Early-2000s Skeuomorphism

---
name: skeuomorphism-2000s
description: Apply the Early-2000s Skeuomorphism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Early-2000s Skeuomorphism, mentions skeuomorphic UI, ios 6 style, aqua interface, or describes glossy glass buttons with specular highlights, brushed metal and linen textures, stitched leather borders — 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
---

# Early-2000s Skeuomorphism Design System

The photorealistic UI language of iOS 6 and Mac OS X Aqua: glossy glass buttons, brushed metal, stitched leather, felt and linen textures, and controls that mimic real objects with bevels, highlights, and reflections — the web as a cabinet of tactile things.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Early-2000s Skeuomorphism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (skeuomorphic UI, ios 6 style, aqua interface, rich chrome UI, pre-flat design), or describes its traits: glossy glass buttons with specular highlights; brushed metal and linen textures; stitched leather borders; heavy bevels and inner shadows; realistic drop shadows and reflections; real-object metaphors.

## Design tokens

### Color palette

- Linen-gray desktop background: `#e3e3e0` (--color-bg)
- Raised panel and card surface: `#f5f5f2` (--color-surface)
- Soft black text with subtle etched highlight: `#333333` (--color-text)
- Secondary gray text: `#5c5c5c` (--color-text-muted)
- Aqua glass blue — buttons and active states (gradient base): `#15559f` (--color-accent)
- Light gradient stop for the glass gloss: `#6fa8e8` (--color-accent-gloss)
- Felt green for game-table surfaces and accents: `#2f6b3a` (--color-felt-green)
- Leather brown for headers and stitched panels: `#8b5a2b` (--color-leather)
- Brushed metal for toolbars: `#c9c9c9` (--color-metal)
- Bevel edge gray: `#9b9b96` (--color-border)

### Typography

- Display / headings: Nunito Sans (fallback: Lucida Grande, Helvetica Neue, sans-serif) (ideal: Lucida Grande, premium — use Nunito Sans as the free substitute)
- Body: Nunito Sans (fallback: Lucida Grande, Helvetica Neue, sans-serif)
- 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 700, line-height 1.3, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 20, 28, 40, 56 — Compact and furniture-like — controls sit snugly in grouped panels with visible frames, like physical devices.
- Border radius: sm 6px, md 8px, lg 12px — The era's radius is 8px-ish: rounded enough to feel molded, never pill-soft.
- Border treatment: 1px solid #9b9b96 — Every control has a 1px defining edge, usually paired with an inner white highlight below it to fake a bevel.

### Shadows

- gloss: `inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -8px 12px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.35)` — Glass buttons and toggles
- well: `inset 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.2)` — Input fields and recessed wells
- panel: `0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6)` — Raised panels and cards
- page-curl: `0 8px 16px rgba(0,0,0,0.35)` — Modals and lifted paper elements

### Layout

- Max content width: 1080px
- Grouped, framed panels like preference panes
- Brushed-metal toolbar tops with centered titles
- Leather or felt header strips with visible stitching
- Real-object metaphors: notepads, shelves, dials

### Effects

- Linen/noise texture tiled on the background
- Vertical glass gradients with a hard-stop specular highlight at 50%
- Stitched borders (dashed inner line on leather panels)
- Reflections under hero objects (mirrored gradient fade)
- Torn-paper or page-curl edges on note elements

### Motion

- Easing: ease-in-out; durations 150ms / 300ms / 500ms
- Physical transitions: slide, flip, and page-curl rather than fade
- Buttons visibly depress — gradient darkens and inner shadow deepens on :active
- Switches slide with momentum like real toggles

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e3e3e0;
  --color-surface: #f5f5f2;
  --color-text: #333333;
  --color-text-muted: #5c5c5c;
  --color-accent: #15559f;
  --color-accent-gloss: #6fa8e8;
  --color-felt-green: #2f6b3a;
  --color-leather: #8b5a2b;
  --color-metal: #c9c9c9;
  --color-border: #9b9b96;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-gloss: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -8px 12px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-well: inset 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.2);
  --shadow-panel: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-page-curl: 0 8px 16px rgba(0,0,0,0.35);
  --border-default: 1px solid #9b9b96;
  --font-display: "Nunito Sans", "Lucida Grande", "Helvetica Neue", sans-serif;
  --font-body: "Nunito Sans", "Lucida Grande", "Helvetica Neue", sans-serif;
  --text-base: 15px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease-in-out;
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}
```

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

## Component recipes

- **Nav:** Brushed-metal toolbar: metal gradient, 1px dark bottom edge, embossed centered title, glass-capsule nav buttons
- **Hero:** Linen background, product mounted on a wooden or felt shelf with a reflection beneath, glass CTA button with gloss shadow
- **Card:** Raised surface panel, 8px radius, panel shadow, optional leather header strip with stitched border
- **Button (primary):** Aqua glass capsule: blue vertical gradient (accent-gloss to accent), white text with subtle dark text-shadow, gloss shadow, 1px dark blue border
- **Button (secondary):** Gray glass capsule with the same gloss anatomy, dark text
- **Form fields:** Recessed well: white fill, well inner shadow, 6px radius, 1px border; focus adds the era's soft blue outer glow ring

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

A glass-gloss button: vertical gradient from light to saturated blue, a white specular highlight capping the top half, 1px dark border, inner bevel, and a soft realistic drop shadow — sitting on a linen-textured panel. Spend boldness here; keep everything else quiet.

## Do

- Give every control full material anatomy: edge, bevel highlight, gradient, shadow
- Commit to one material per section — felt, leather, linen, or metal
- Use recessed wells for inputs and raised gloss for actions; depth communicates function
- Add tiny delights: stitching, reflections, a page curl

## Don't

- No flat fills — a flat button in this style is a bug
- Don't mix materials chaotically; a leather button on brushed metal on felt reads as parody
- Avoid modern soft-glow gradients; era shadows are tight and literal
- Don't fake textures at giant scale — tile subtle, small-grain patterns

## Accessibility notes

- White text on glass buttons needs the darker gradient stop to pass contrast — verify against the lightest stop (#6fa8e8) and add a subtle text-shadow as the era did
- Textured backgrounds behind text must stay low-contrast (under 5% luminance variation) so linen grain never interferes with reading
- Embossed/etched text effects (light text-shadow) can reduce effective contrast for low-vision users; keep the effect to 1px

## Reference sites

- Skeuomorph: https://en.wikipedia.org/wiki/Skeuomorph
- Version Museum — iOS history: https://www.versionmuseum.com/history-of/ios
- Mac OS X Aqua: https://en.wikipedia.org/wiki/Aqua_(user_interface)

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

Install this skill

unzip skeuomorphism-2000s.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → skeuomorphism-2000s.zip