Digital era · 2010s–present
Monochrome
One hue (or no hue), every element in tints and shades — a complete palette from black to white through one colour family.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(90% 0.06 258) - --fg
oklch(20% 0.07 258) - --muted
oklch(48% 0.08 258) - --surface
oklch(95% 0.04 258) - --surface-2
oklch(86% 0.07 258) - --border
oklch(78% 0.065 258) - --accent
oklch(32% 0.11 258) - --accent-fg
oklch(92% 0.05 258) - --focus
oklch(46% 0.22 258)
| Token | Value |
|---|---|
| --font-body | 'DM Sans', system-ui, sans-serif |
| --font-display | 'DM Sans', system-ui, sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 4px |
| --radius-sm | 3px |
| --shadow | 0 1px 4px oklch(14% 0.018 258 / 0.08) |
| --shadow-lg | 0 8px 24px oklch(14% 0.018 258 / 0.14) |
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');
:root {
--bg: oklch(90% 0.06 258);
--fg: oklch(20% 0.07 258);
--muted: oklch(48% 0.08 258);
--surface: oklch(95% 0.04 258);
--surface-2: oklch(86% 0.07 258);
--border: oklch(78% 0.065 258);
--accent: oklch(32% 0.11 258);
--accent-fg: oklch(92% 0.05 258);
--focus: oklch(46% 0.22 258);
--font-body: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 4px;
--radius-sm: 3px;
--shadow: 0 1px 4px oklch(14% 0.018 258 / 0.08);
--shadow-lg: 0 8px 24px oklch(14% 0.018 258 / 0.14);
}Where it came from
Origin: Print design tradition, digitally accelerated by fashion industry web design
Monochrome design on screen comes partly from the constraints of early computing (black-and-white CRTs) and partly from editorial tradition — a black-and-white magazine can feel more luxurious than a colour one if the typography is strong enough. Fashion, architecture and luxury brands adopted monochrome web design in the 2010s as a counter to the 'rainbow of accents' SaaS aesthetic.
How to spot it
- All surfaces, borders and type derived from one hue (or zero hue)
- Hierarchy through lightness and weight, not colour difference
- One pure accent — white or black — for interactive emphasis
- Strong typographic contrast compensates for absent colour
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Feels refined and confident — colour restraint reads as control | Status indicators (error, warning, success) require extra care |
| Photographs and illustrations pop against a neutral system | Easy for users to miss interactive elements without colour contrast |
| Works in print and screen without colour-shift concerns | Risk of feeling cold, clinical or lifeless without texture or weight |
In the wild
- Many architecture firm and fashion brand websites
- Vercel's black-and-white interface
- Linear's light theme (near-monochrome)
Use it when
Luxury, editorial, architecture or any brand where restraint itself is the message.