Dark Mode Luxe

---
name: dark-mode-luxe
description: Apply the Dark Mode Luxe visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Dark Mode Luxe, mentions luxury dark UI, premium dark, gold on black, or describes near-black backgrounds with gold accents, serif display + sans body pairing, hairline 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
---

# Dark Mode Luxe Design System

Premium near-black interfaces with restrained gold or jewel-tone accents: a refined serif display face over quiet sans body, hairline borders, generous spacing, and spotlight lighting. The visual language of private banking and luxury tech — wealth expressed through restraint, not ornament.

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 Dark Mode Luxe.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (luxury dark UI, premium dark, gold on black, dark elegance), or describes its traits: near-black backgrounds with gold accents; serif display + sans body pairing; hairline borders; generous, airy dark spacing; spotlight/vignette lighting; metallic gradient details.

## Design tokens

### Color palette

- Near-black canvas with a hint of warmth: `#0c0c0e` (--color-bg)
- Card and panel fill: `#16161a` (--color-surface)
- Hovered cards, modals, elevated panels: `#1d1d22` (--color-surface-raised)
- Primary text, soft white: `#f2f2f2` (--color-text)
- Secondary text and captions: `#a1a1aa` (--color-text-muted)
- Muted gold — the single luxury accent: `#c9a227` (--color-accent)
- Gold highlight stop for metallic gradients and hover: `#e6c968` (--color-accent-bright)
- Hairline borders and dividers: `#26262b` (--color-border)

### Typography

- Display / headings: Fraunces (fallback: Georgia, serif) (ideal: Canela, premium — use Fraunces as the free substitute)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.15, letter-spacing -0.01em
- Body: line-height 1.4, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96, 128 — Generous to the point of extravagance — emptiness is the luxury good. Sections get 96–128px of vertical air; cards pad at 32px.
- Border radius: sm 8px, md 12px — Softly rounded but never bubbly; 12px maximum keeps the tailored feel.
- Border treatment: 1px solid #26262b — Hairlines only. Gold borders (1px solid #c9a227) are reserved for the primary CTA and featured 'spotlight' cards.

### Shadows

- lift: `0 4px 24px rgba(0, 0, 0, 0.45)` — Card and modal elevation on the dark canvas
- gold-glow: `0 0 24px rgba(201, 162, 39, 0.18)` — Faint halo behind gold-bordered CTAs and featured elements

### Layout

- Max content width: 1200px
- Centered single-column compositions with wide margins; luxury doesn't crowd the frame
- Spotlight sections: a radial light pool (barely lighter than bg) behind the featured object
- Thin gold hairline rules as section separators, often only 64px wide and centered
- Large serif numerals or drop caps as graphic anchors

### Effects

- Metallic gold gradient (linear, #c9a227 → #e6c968 → #c9a227) on rules and icon strokes
- Radial spotlight vignette behind hero objects (white at 3% fading to transparent)
- Very slow shimmer sweep across gold elements on hover (opacity, not hue)

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 200ms / 400ms / 700ms
- Slow, weighted transitions — nothing snaps; everything settles
- Content fades up 12px on scroll entry with long stagger
- Hover states brighten gold from accent to accent-bright over 200ms
- No bounce, no overshoot — spring physics read as playful, which is off-brand

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0c0c0e;
  --color-surface: #16161a;
  --color-surface-raised: #1d1d22;
  --color-text: #f2f2f2;
  --color-text-muted: #a1a1aa;
  --color-accent: #c9a227;
  --color-accent-bright: #e6c968;
  --color-border: #26262b;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-lift: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-gold-glow: 0 0 24px rgba(201, 162, 39, 0.18);
  --border-default: 1px solid #26262b;
  --font-display: Fraunces, Georgia, serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.4;
  --tracking-heading: -0.01em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@300;500;600&family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Transparent over bg, becoming surface with a hairline bottom border on scroll; wordmark in Fraunces, links in 13px Inter with wide tracking; a gold-bordered 'Private Access' CTA at right
- **Hero:** Vast dark stage, Fraunces headline at 64–96px in soft white with one word in gold, short muted subline, single gold-bordered CTA under a faint spotlight
- **Card:** Surface fill, hairline border, 12px radius, 32px padding, lift shadow; featured tier swaps to a 1px gold border with gold-glow
- **Button (primary):** Transparent fill, 1px gold border, gold text, 8px radius, 48px height; hover fills with gold at 10% and brightens border to accent-bright
- **Button (secondary):** Hairline #26262b border, text color; border lightens on hover — deliberately quiet
- **Form fields:** Surface fill, hairline border, 8px radius, 48px height, generous 16px padding; focus swaps border to gold with a faint gold-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 single muted-gold (#c9a227) accent — a hairline rule, a serif drop-cap, a button border — glinting against acres of near-black, like jewelry on velvet. One gold moment per viewport, never more. Spend boldness here; keep everything else quiet.

## Do

- Spend gold like money: one accent moment per viewport
- Pair a characterful serif display with a neutral sans body
- Let sections breathe with oversized vertical spacing
- Use spotlight lighting to direct the eye to one object at a time

## Don't

- Don't use bright saturated gold (#ffd700) — muted #c9a227 reads expensive, arcade gold reads cheap
- Never combine gold with competing accent colors; one metal per interface
- No dense layouts or busy cards — crowding destroys the luxury signal
- Don't use playful motion (bounces, springs) or rounded-bubbly corners

## Accessibility notes

- Gold #c9a227 on bg #0c0c0e passes at ~8:1 for text, but gold on surface-raised panels drops — re-check contrast wherever gold sits on lighter surfaces
- Light-weight Fraunces (300) at small sizes gets spindly on dark backgrounds; keep the 300 weight above 32px and use 500 below that
- The shimmer sweep and slow fades must respect prefers-reduced-motion; luxury pacing is not an exemption

## Reference sites

- Rolex: https://www.rolex.com
- Mercury (banking): https://mercury.com
- Aston Martin: https://www.astonmartin.com

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

Install this skill

unzip dark-mode-luxe.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/dark-mode-luxe.json

Settings → Capabilities → Skills → Upload skill → dark-mode-luxe.zip