themx
← Back to themes

Monochrome

minimalist Color mode

The power of black, white, and everything between

Reference year: 2022

Compare this theme

Best for

Editorial, Portfolio, Dashboard

Less suitable for

  • Interfaces that rely on color alone to distinguish status.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Monochrome preview

Examples

Monochrome — Hero Section
Hero Section
Monochrome — Card Grid
Card Grid
Monochrome — Form
Form
Monochrome — Dashboard Layout
Dashboard Layout

Color Palette

Primary #111111
Secondary #666666
Accent #999999
Background #FFFFFF
Text #111111

Typography

Heading: Instrument Serif
Body: Instrument Sans

Key Characteristics

  • Strictly black and white color palette
  • Strong typographic hierarchy driving the layout
  • High-contrast black and white photography
  • Generous whitespace for breathing room
  • Bold dividing lines and borders for structure
  • No color — depth achieved through value and typography

Tags

black-white contrast editorial timeless

Monochrome design strips the interface down to its most essential visual elements: black, white, and the spectrum of grays between them. By eliminating color entirely, it forces designers to rely on typography, spacing, contrast, and composition alone to create hierarchy and visual interest. The result is timeless, sophisticated, and effortlessly elegant — a style that never dates because it was never trendy to begin with.

When to Use

Monochrome is a strong choice for editorial publications, photography portfolios, luxury fashion brands, architecture firms, and minimalist personal sites. It works best when the content is strong enough to carry the experience without chromatic decoration. Photography-driven sites benefit particularly — black and white imagery gains dramatic impact when the surrounding interface is equally restrained.

Key Visual Elements

The palette is absolute: pure black (#111111 for slightly softer rendering), pure white, and carefully chosen grays for secondary information. Bold horizontal rules and vertical dividers create structure in place of colored sections. Whitespace is used lavishly — it is the primary tool for grouping and separating content. Photography, when present, is converted to high-contrast black and white. Text size variation is dramatic: massive headlines next to modest body text create rhythm and hierarchy without any color cues.

Typography

Instrument Serif brings an editorial refinement to headings — its high contrast strokes and elegant proportions anchor the monochrome palette with personality. Instrument Sans provides a matching companion for body text, sharing the same design DNA in a cleaner sans-serif form. The serif/sans-serif pairing is the primary source of visual contrast in a colorless design, so weight, size, and style differences should be pronounced.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Instrument Serif", sans-serif;
  --tx-font-body: "Instrument Sans", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #E5E5E5;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #111111;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 400;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(17,17,17,0.6);
  --tx-text-subtle: rgba(17,17,17,0.4);
  --tx-link-color: #111111;
  --tx-button-radius: 0.25rem;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #E5E5E5;
  --tx-text: #111111;
  --tx-primary: #111111;
  --tx-secondary: #666666;
  --tx-accent: #999999;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Monochrome

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Editorial
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Monochrome (color-mode)
- Strictly black and white color palette
- Strong typographic hierarchy driving the layout
- High-contrast black and white photography
- Generous whitespace for breathing room
- Bold dividing lines and borders for structure
- No color — depth achieved through value and typography

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #111111, secondary #666666, accent #999999, background #FFFFFF, text #111111
Typography: Instrument Serif for headings, Instrument Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #FFFFFF;
  --tx-font-heading: "Instrument Serif", sans-serif;
  --tx-font-body: "Instrument Sans", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFFFF;
  --tx-card-border: #E5E5E5;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #111111;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 400;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(17,17,17,0.6);
  --tx-text-subtle: rgba(17,17,17,0.4);
  --tx-link-color: #111111;
  --tx-button-radius: 0.25rem;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #E5E5E5;
  --tx-text: #111111;
  --tx-primary: #111111;
  --tx-secondary: #666666;
  --tx-accent: #999999;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Keep the existing layout. Use spacing, borders, and type weight for hierarchy.

## Interaction
- Distinguish state with labels and icons as well as changes in brightness.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Monochrome: Interfaces that rely on color alone to distinguish status.

## Components
Generate the following components in this style:
- Navbar
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.