Material & depth · 2000–2007
Aqua
Mac OS X's original UI language: candy-coloured translucent gel buttons, liquid drop highlights, and that Pinstripe surface behind everything.
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(88% 0.016 240) - --fg
oklch(22% 0.014 240) - --muted
oklch(50% 0.017 240) - --surface
oklch(96% 0.009 220) - --surface-2
oklch(92% 0.013 230) - --border
oklch(74% 0.018 230) - --accent
oklch(56% 0.2 255) - --accent-fg
oklch(99% 0 0) - --focus
oklch(56% 0.2 255)
| Token | Value |
|---|---|
| --font-body | 'Lucida Grande', 'Geneva', 'Nunito', 'Helvetica Neue', sans-serif |
| --font-display | 'Lucida Grande', 'Geneva', 'Nunito', 'Helvetica Neue', sans-serif |
| --font-mono | 'Courier New', Courier, monospace |
| --radius | 14px |
| --radius-sm | 10px |
| --shadow | 0 2px 6px oklch(20% 0.02 240 / 0.35), 0 1px 0 oklch(100% 0 0 / 0.5) inset |
| --shadow-lg | 0 16px 40px oklch(20% 0.02 240 / 0.52) |
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
:root {
--bg: oklch(88% 0.016 240);
--fg: oklch(22% 0.014 240);
--muted: oklch(50% 0.017 240);
--surface: oklch(96% 0.009 220);
--surface-2: oklch(92% 0.013 230);
--border: oklch(74% 0.018 230);
--accent: oklch(56% 0.2 255);
--accent-fg: oklch(99% 0 0);
--focus: oklch(56% 0.2 255);
--font-body: 'Lucida Grande', 'Geneva', 'Nunito', 'Helvetica Neue', sans-serif;
--font-display: 'Lucida Grande', 'Geneva', 'Nunito', 'Helvetica Neue', sans-serif;
--font-mono: 'Courier New', Courier, monospace;
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 2px 6px oklch(20% 0.02 240 / 0.35), 0 1px 0 oklch(100% 0 0 / 0.5) inset;
--shadow-lg: 0 16px 40px oklch(20% 0.02 240 / 0.52);
}Where it came from
Origin: Apple Mac OS X 10.0, unveiled at Macworld 2000
Steve Jobs unveiled Aqua at Macworld 2000, reportedly saying "we made the buttons on the screen look so good you'll want to lick them." Translucent gel buttons in red, yellow, and green for window controls, a fine pinstripe background, and heavy drop shadows defined early Mac OS X. Apple refined it through Tiger and began flattening it in Leopard, with Yosemite (2014) completing the transition to flat.
How to spot it
- Translucent gel sheen on buttons — a bright top-half highlight over a saturated fill
- Candy-colour tricolour controls: red, yellow, green
- Pinstripe or subtle striped background texture
- Liquid-looking controls with thick glossy highlights and heavy drop shadows
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Playful and immediately recognisable | Directly tied to an era — reads as retro without any ambiguity |
| Strong button affordances from the sheen — everything looks pressable | Extremely hard to maintain quality outside its original system context |
| Evokes a specific nostalgic era warmly and precisely | Colour palette resists neutral or dark interpretations |
In the wild
- Mac OS X 10.1–10.4 System Preferences
- iCal and Address Book in early Mac OS X
- Mac OS X 10.0–10.4 window controls and Dock
Use it when
Nostalgic Mac-era revival projects, throwback games, or any context where the early-2000s Apple aesthetic is itself the content.