macOS Aqua (2000s)

---
name: macos-aqua-2000s
description: Apply the macOS Aqua (2000s) visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" macOS Aqua (2000s), mentions aqua interface, mac os x aqua, gel buttons, or describes glossy blue gel capsule buttons, horizontal pinstripe backgrounds, red-yellow-green traffic lights — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# macOS Aqua (2000s) Design System

The Mac OS X 10.0-10.4 'lickable' interface: pinstriped windows, candy-gel capsule buttons with a wet top highlight, brushed-metal panels, traffic-light window controls, and the pulsing blue default button. Everything glossy is a capsule; everything structural is soft gray; light always enters from directly above.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as macOS Aqua (2000s).
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (aqua interface, mac os x aqua, gel buttons, pinstripe mac, brushed metal, lickable ui), or describes its traits: glossy blue gel capsule buttons; horizontal pinstripe backgrounds; red-yellow-green traffic lights; brushed-metal panel texture; wet-look top highlight on controls; soft deep window drop shadows.

## Design tokens

### Color palette

- Cool pale desktop-adjacent page background: `#edf2f7` (--color-bg)
- Window body base under the pinstripes: `#f5f5f5` (--color-surface)
- Alternate stripe color for the horizontal pinstripe texture: `#e8e8e8` (--color-pinstripe)
- Primary text — Aqua used pure black labels: `#000000` (--color-text)
- Secondary labels and window-title gray: `#5f5f5f` (--color-text-muted)
- Aqua blue — gel button base, selection, progress bars: `#1e62d0` (--color-accent)
- Top-of-capsule glass highlight blue: `#9ccefc` (--color-gel-highlight)
- Text and list selection wash: `#b5d5ff` (--color-selection)
- Brushed-metal panel base tone: `#b9bfc4` (--color-metal)
- Close window control red: `#ff6058` (--color-traffic-close)
- Minimize window control amber: `#ffbd2e` (--color-traffic-minimize)
- Zoom window control green: `#28c840` (--color-traffic-zoom)

### Typography

- Display / headings: Nunito Sans (fallback: Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif) (ideal: Lucida Grande Bold, premium — use Nunito Sans as the free substitute)
- Body: Nunito Sans (fallback: Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif) (ideal: Lucida Grande, premium — use Nunito Sans as the free substitute)
- Type scale: 1.25 ratio, base 15px — computed steps: 15px / 19px / 23px / 29px / 37px / 46px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 1.25, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 20, 28, 40, 64 — Roomier than classic Mac OS but still an OS: 8-12px control padding, 20px dialog margins, generous space around gel buttons so their glow reads.
- Border radius: sm 4px, md 10px, pill 999px — Buttons are full capsules (pill); windows and sheets round at 8-10px on top; fields stay nearly square.
- Border treatment: 1px solid #8e979e — Thin cool-gray hairlines edge windows, fields, and metal panels; gel controls rely on shadow and highlight instead of borders.

### Shadows

- gel: `inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -6px 10px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.35)` — Glossy capsule buttons and pill controls — the wet-glass look
- window: `0 10px 34px rgba(0, 0, 0, 0.4)` — Window and modal frames — Aqua's famously deep soft drop shadow
- focus-halo: `0 0 0 3px rgba(120, 175, 255, 0.65)` — Focused fields and default controls — the glowing blue Aqua focus ring
- sheet: `0 4px 14px rgba(0, 0, 0, 0.25)` — Dropdowns, sheets, and toolbar popovers

### Layout

- Max content width: 1100px
- Content lives in window-like panels with a traffic-light cluster top-left
- Toolbars sit under the title area with capsule segmented controls
- Sidebars use the brushed-metal or pinstripe texture with source-list selection
- Center important dialogs and let their deep shadow separate them from the pinstriped ground

### Effects

- Horizontal pinstripes: repeating-linear-gradient(180deg, #f5f5f5 0 2px, #e8e8e8 2px 4px)
- Brushed metal: subtle horizontal noise gradient over #b9bfc4 with 1px lighter top edge
- Gel gradient: linear-gradient(180deg, #9ccefc, #1e62d0 55%, #1a55b8) under the inset highlights
- Pulsing default button: slow 1.2s opacity breathe on the gel highlight
- Genie-style scale-and-fade for appearing sheets (CSS transform origin top)

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 150ms / 250ms / 450ms
- Sheets slide down from a toolbar edge and settle with a soft ease-out
- The default button pulses gently and continuously
- Hover states brighten the gel highlight rather than changing the base color
- Minimize-style exits may scale toward an edge, but keep them under 450ms

## CSS variables (drop-in)

```css
:root {
  --color-bg: #edf2f7;
  --color-surface: #f5f5f5;
  --color-pinstripe: #e8e8e8;
  --color-text: #000000;
  --color-text-muted: #5f5f5f;
  --color-accent: #1e62d0;
  --color-gel-highlight: #9ccefc;
  --color-selection: #b5d5ff;
  --color-metal: #b9bfc4;
  --color-traffic-close: #ff6058;
  --color-traffic-minimize: #ffbd2e;
  --color-traffic-zoom: #28c840;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --shadow-gel: inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -6px 10px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-window: 0 10px 34px rgba(0, 0, 0, 0.4);
  --shadow-focus-halo: 0 0 0 3px rgba(120, 175, 255, 0.65);
  --shadow-sheet: 0 4px 14px rgba(0, 0, 0, 0.25);
  --border-default: 1px solid #8e979e;
  --font-display: "Nunito Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  --font-body: "Nunito Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  --text-base: 15px;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;800&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A window toolbar: traffic-light dots top-left (12px circles with 1px darker rims), centered window title in gray 13px, and capsule segmented controls or a pill search field on the right, all over pinstripes.
- **Hero:** A large pinstriped panel with a deep window shadow: bold Lucida-style heading, supporting gray text, and one pulsing blue gel call-to-action capsule; optionally a brushed-metal strip along the top.
- **Card:** A white or pinstriped rounded panel with a 1px #8e979e hairline and sheet shadow; header row may use the metal texture; selected state washes the row in #b5d5ff.
- **Button (primary):** Blue gel capsule: gel gradient plus the gel shadow recipe, white 700-weight label with a faint dark text-shadow, pill radius, focus halo on keyboard focus, and the signature slow pulse when it is the default action.
- **Button (secondary):** The same capsule geometry in glass gray: white-to-#d8dde3 gradient, black label, identical inset highlights — Aqua secondary buttons are clear gel, not flat.
- **Form fields:** White field with 1px hairline, near-square corners, inset 0 1px 2px rgba(0,0,0,0.18) top shadow, and the glowing blue focus halo; labels right-aligned to the left of the field in dialog layouts.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The gel button: a pill with a saturated blue base, an inset white top highlight covering the upper half like a bead of water, a soft under-glow at the bottom edge, and — for the default action — a slow opacity pulse. Spend boldness here; keep everything else quiet.

## Do

- Build every glossy control from the same recipe: base gradient, inset white top highlight, soft under-glow
- Use pinstripes and brushed metal as large-area textures, never on small controls
- Keep the blue focus halo on every focusable element — it is both authentic and accessible
- Let windows cast deep, soft shadows to float above the striped ground

## Don't

- Don't flatten the buttons — matte capsules read as modern pill buttons, not Aqua
- Don't mix light sources; the highlight is always top-center
- Don't use the traffic-light colors as status semantics elsewhere in the UI
- Don't stripe body-text containers so tightly that text sits on visible stripe edges

## Accessibility notes

- Accent #1e62d0 passes 4.5:1 on the pale background, but white text on the gel gradient's light top stop can dip low — keep button labels bold and add the dark text-shadow as Aqua did.
- Pinstripe and brushed-metal textures behind long-form text reduce readability; reserve them for chrome and keep reading surfaces plain.
- Respect prefers-reduced-motion by disabling the default-button pulse and sheet animations.

## Reference sites

- Aqua (user interface) — history and versions: https://en.wikipedia.org/wiki/Aqua_(user_interface)
- 512 Pixels Aqua screenshot library: https://512pixels.net/projects/aqua-screenshot-library/
- Mac OS X 10.0 review coverage of Aqua: https://arstechnica.com/gadgets/2001/04/macosx/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip macos-aqua-2000s.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/macos-aqua-2000s.json

Settings → Capabilities → Skills → Upload skill → macos-aqua-2000s.zip