Expressive & trend · Print origin; digital revival 2015 – present
Duotone
Every image remapped to two hues — usually one dark, one vivid — creating a bold, graphic print quality that unifies diverse photography under one visual voice.
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(12% 0.06 268) - --fg
oklch(90% 0.06 130) - --muted
oklch(62% 0.06 145) - --surface
oklch(16% 0.07 268) - --surface-2
oklch(20% 0.08 268) - --border
oklch(30% 0.09 265) - --accent
oklch(86% 0.28 128) - --accent-fg
oklch(10% 0.05 265) - --focus
oklch(86% 0.28 128)
| Token | Value |
|---|---|
| --font-body | 'Barlow Condensed', system-ui, sans-serif |
| --font-display | 'Barlow Condensed', system-ui, sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 4px |
| --radius-sm | 3px |
| --shadow | 0 4px 20px oklch(0% 0 0 / 0.5) |
| --shadow-lg | 0 12px 40px oklch(0% 0 0 / 0.65) |
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
:root {
--bg: oklch(12% 0.06 268);
--fg: oklch(90% 0.06 130);
--muted: oklch(62% 0.06 145);
--surface: oklch(16% 0.07 268);
--surface-2: oklch(20% 0.08 268);
--border: oklch(30% 0.09 265);
--accent: oklch(86% 0.28 128);
--accent-fg: oklch(10% 0.05 265);
--focus: oklch(86% 0.28 128);
--font-body: 'Barlow Condensed', system-ui, sans-serif;
--font-display: 'Barlow Condensed', system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 4px;
--radius-sm: 3px;
--shadow: 0 4px 20px oklch(0% 0 0 / 0.5);
--shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.65);
}Where it came from
Origin: Photographic duotone printing technique, Spotify’s 2015 rebrand
Duotone is a traditional printing technique where an image is reproduced using two inks — typically black plus one spot colour. Spotify popularised it as a digital design tool with its 2015 rebrand by Collins, applying duotones to artist photos, playlist covers and campaigns. The technique allows any photograph to be immediately incorporated into a strong brand colour system, however diverse the underlying imagery.
How to spot it
- All images mapped to two key colours
- Dark base tone plus vivid highlight tone
- CSS mix-blend-mode or filter to apply in browser
- Bold graphic quality — all images feel related
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Unifies diverse photography under a brand palette | Loses photographic detail and nuance |
| Strong, graphic, and distinctive | Two-colour constraint limits expression |
| Simple to apply with CSS | Overused since Spotify made it popular |
In the wild
- Spotify playlist covers and campaigns, mid-2010s
- 1960s album covers and concert posters
- Many design conference identity systems
Use it when
When diverse photography needs to align with a brand palette or when bold graphic impact beats fidelity.