The Maya system
Design system
The vocabulary every screen is built from — colour as semantic roles, two typefaces, and fifteen colourways that recolour the whole site through the same tokens. Switch one below and watch the whole site change with it.
Two looks · persisted
Semantic roles
We never reach for raw hex. Every colour is a role, so a colourway can move underneath the whole site.
A sixteenth token, story-filter, is not a colour — it is each colourway’s own monochrome grade for “story” imagery.
Type scale · Cormorant Garamond + Inter
Cormorant 400 · 116px
Cormorant 400 · 50px
Cormorant italic · 30px
Inter 400 · 16px
Inter 500 · .28em
Contrast · computed live
The pairs the site actually sets, measured against WCAG — recomputed the moment the colourway changes.
Active colourway: … · Pass ≥ 4.5 · AA large ≥ 3
| Pair | Used for | Sample | Ratio | Result |
|---|---|---|---|---|
| text on canvas | Body copy on the page | — | — | |
| text-strong on canvas | Headlines on the page | — | — | |
| text-muted on surface | Secondary copy on cards | — | — | |
| text-muted on canvas | Secondary copy on the page | — | — | |
| text on surface | Body copy on cards | — | — | |
| on-accent on accent | Button labels on the accent | — | — | |
| accent-hover on canvas | Pressed accent on the page | — | — | |
| text-on-dark on band | Copy on ink bands | — | — | |
| accent-on-dark on band | Accent on ink bands | — | — |
Ratios are measured from the resolved token values of the colourway you are viewing. A dash means the value isn’t an opaque colour (some dark colourways define translucent hairlines).
The Nocturne rulebook · frozen canon
One answer per question, sitewide. The Phase-2 reskin builds against exactly this list — nothing drifts per page.
- Display (hero): serif, clamp(44px,7vw,108px), weight 400, line-height ≤1.02
- Page title: serif, clamp(38px,5.6vw,76px)
- Section title: serif 32 · card title: serif 26
- Body: sans 15–16, line-height 1.6–1.7 · micro/legal: sans 12, never below 11
- Label (eyebrow): sans 10–11.5 caps, letter-spacing .14–.2em — nothing outside that window
- Solid: accent bg, on-accent text, radius 10, min-height 52, caps 12px ls .14em
- Outline: 1px accent-on-dark border, transparent bg, same metrics as Solid
- Header pill (Book direct only): radius 40
- No fourth shape, no per-page paddings — six paddings and three radii was the drift.
- Hairlines, three strengths only: structural 1px var(--hairline) · emphasis 1px accent-on-dark · divider 40×1px accent
- Content width 1180 (prose 820) · gutter 24 · section padding clamp(70px,10vw,130px)
- Dates read “7 July 2026” — never “07 · 07 · 26”
- Reveal .6s · hover lift -2px .25s · crossfade 450ms · slow drift ~32s — all reduce-gated, no new timings
- The punctuation band: --punct-* tokens (cream ground, ink text, gold accents) — theme-constant, applied in Phase 2
- Numbers are never hand-typed into a page — attested data only (site.proof / the API)
Cream as punctuation — one warm pause on a dark page. Gold speaks softly here.
Theme-constant in every colourway. This block renders from the new --punct-* tokens.