The system, before the design

• #08080a

  --color-ground

  Page ground

• #050506

  --color-ground-deep

  Banded sections, footer

• #0f0f13

  --color-raised

  Cards

• #16161c

  --color-raised-high

  Hover, nested cards

• #1e1e26

  --color-line

  Hairlines

• Headlines and body

  #f5f5f7

  --color-ink

  18.9:1 on ground

• Secondary copy

  #a9a9b4

  --color-ink-soft

  8.6:1 on ground

• Eyebrows, captions

  #7c7c88

  --color-ink-mute

  4.85 on ground · 4.63 on raised · fails on raised-high

• #ff6a1f

  --color-flare

  Accent. The only ramp stop that may carry text

  6.99:1 on ground

• #d9460f

  --color-flare-deep

  Pressed and hovered solid orange

  —

• #ffb98c

  --color-flare-soft

  Focus ring, chip borders

  11.4:1 on ground

• #ff2f6d

  --color-ember

  Ramp middle. Decorative only

  —

• #a01bff

  --color-magenta

  Ramp end. Never a text colour

  4.35:1 — decorative

• .type-display

  Creative studio

• .type-headline

  We design with purpose

• .type-title

  Card and section titles

• .type-lead

  The opening paragraph of a section.

• .type-body

  The default running text of the page.

• .type-small

  Captions, legal and meta.

• .type-label

  Eyebrows and buttons

• .type-mono

  01 · 14 February 2026

• .type-stat

  $10.7B

• .type-price

  $2,199

Every image surface in the template. Each field is a pure function of its seed — the same string always produces the same gradient, on the server and in the browser, which is what keeps hydration clean.

• seed: alpha

• seed: beta

• seed: gamma

• seed: delta

• seed: epsilon

• seed: zeta

Nothing in components/ may invent a duration, easing, stagger or scroll offset. If a beat needs something new it gets a name in lib/theme.ts first.