Material & depth · 2000s–2010s (retro revival)
Chrome
Reflective metallic surfaces: sharp highlights, dark reflections, and the cool gleam of polished or brushed steel.
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.004 240) - --fg
oklch(90% 0.004 240) - --muted
oklch(60% 0.007 240) - --surface
oklch(24% 0.005 240) - --surface-2
oklch(30% 0.005 240) - --border
oklch(40% 0.007 240) - --accent
oklch(88% 0.003 240) - --accent-fg
oklch(12% 0.004 240) - --focus
oklch(72% 0.08 200)
| Token | Value |
|---|---|
| --font-body | 'Exo 2', ui-sans-serif, system-ui, sans-serif |
| --font-display | 'Exo 2', ui-sans-serif, system-ui, sans-serif |
| --font-mono | ui-monospace, 'Courier New', monospace |
| --radius | 6px |
| --radius-sm | 4px |
| --shadow | 0 1px 0 oklch(80% 0.003 240 / 0.45) inset, 0 -1px 0 oklch(0% 0 0 / 0.65) inset, 0 2px 6px oklch(0% 0 0 / 0.55) |
| --shadow-lg | 0 16px 48px oklch(0% 0 0 / 0.78) |
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,700;0,900;1,900&display=swap');
:root {
--bg: oklch(12% 0.004 240);
--fg: oklch(90% 0.004 240);
--muted: oklch(60% 0.007 240);
--surface: oklch(24% 0.005 240);
--surface-2: oklch(30% 0.005 240);
--border: oklch(40% 0.007 240);
--accent: oklch(88% 0.003 240);
--accent-fg: oklch(12% 0.004 240);
--focus: oklch(72% 0.08 200);
--font-body: 'Exo 2', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Exo 2', ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, 'Courier New', monospace;
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 1px 0 oklch(80% 0.003 240 / 0.45) inset, 0 -1px 0 oklch(0% 0 0 / 0.65) inset, 0 2px 6px oklch(0% 0 0 / 0.55);
--shadow-lg: 0 16px 48px oklch(0% 0 0 / 0.78);
}Where it came from
Origin: Automotive and hi-fi design; early media-player software skins
Chrome and brushed-metal UIs appeared heavily in media software skins — Winamp, early iTunes, Windows Media Player — borrowing from hi-fi equipment aesthetics. Apple's brushed-metal window style began with QuickTime 4 Player in 1999 and reached the Finder in Mac OS X 10.3 Panther (2003). As flat design won, chrome became retro-cool, then found renewed life in luxury and automotive brand sites. The visual grammar is the same as a physical reflective surface: a bright specular highlight at the top, dark reflections below.
How to spot it
- Reflective highlight strip at the top edge, dark absorption at the bottom
- Brushed-metal texture via fine parallel linear gradients
- High contrast between the lightest highlight and darkest reflection
- Usually set against a very dark background to sell the gleam
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Striking and immediately premium-feeling | Contextual — reads as retro without careful handling |
| High perceived craft — surface quality is its own signal | Metal textures reduce text scanability |
| Distinctive against flat-dominated contemporary contexts | Dark reflective areas fail body-text contrast requirements |
In the wild
- Early iTunes and Winamp brushed-metal skins
- Mac OS X brushed-metal windows (c. 1999–2007)
- Automotive and hi-fi brand interface sites
Use it when
Hardware product pages, automotive, audio equipment, or anywhere a premium metallic material quality is the message.