Colour
The site has one theme, deep navy, by choice. Each value appears once, as a primitive. Every role the CSS uses references one primitive.
Primitives
| Primitive | Value | Use |
|---|---|---|
--navy-950 | #060D19 | Deepest navy |
--navy-900 | #0B1628 | Page navy |
--navy-800 | #12223A | Raised navy |
--navy-700 | #2A3B57 | Hairline navy |
--teal-400 | #2EC4B6 | Interaction and the first brand stop |
--pink-400 | #FF6FB1 | Annotation and the last brand stop |
--blue-400 | #7C9BFF | Accent and the middle brand stop |
--violet-400 | #A78BFA | Accent |
--orange-400 | #FF7A45 | Danger. Hue 17 degrees, 44 degrees from pink-400 |
--grey-100 | #E8EDF4 | Text |
--grey-300 | #B9C6D8 | Muted text |
Roles
| Role | References | Use |
|---|---|---|
--color-surface | --navy-900 | Page background |
--color-surface-raised | --navy-800 | Cards, tables, the menu and contents sheets |
--color-surface-deep | --navy-950 | Code blocks and gate output |
--color-text | --grey-100 | Text and headings |
--color-text-muted | --grey-300 | Metadata, notes and captions |
--color-interactive | --teal-400 | Links, buttons, focus and selected states |
--color-on-interactive | --navy-900 | Text on teal, violet and pink fills |
--color-hairline | --navy-700 | 1px borders and separators |
--color-annotation | --pink-400 | "Show the spec" annotations |
--color-annotation-component | --violet-400 | Component name tags in "Show the spec" |
--color-accent | --blue-400 | File names and keys in code, secondary labels |
--color-accent-pink | --pink-400 | Accent text, pills and the brand's warm end |
--color-accent-violet | --violet-400 | Accent text and headings |
--color-danger | --orange-400 | Failure states: "Fails AA" and gate FAIL lines |
--color-brand-start | --teal-400 | Brand gradient, first stop |
--color-brand-middle | --blue-400 | Brand gradient, middle stop |
--color-brand-end | --pink-400 | Brand gradient, last stop |
Contrast
The build fails if a text pair drops below 4.5:1, or a large text or UI pair below 3:1. These are the WCAG 2.2 AA minimums.
| Pair | Ratio | Minimum |
|---|---|---|
text on surface | 15.39:1 | Text, 4.5:1 |
text on surface-raised | 13.57:1 | Text, 4.5:1 |
text on surface-deep | 16.54:1 | Text, 4.5:1 |
text-muted on surface | 10.46:1 | Text, 4.5:1 |
text-muted on surface-raised | 9.22:1 | Text, 4.5:1 |
text-muted on surface-deep | 11.24:1 | Text, 4.5:1 |
interactive on surface | 8.35:1 | Text, 4.5:1 |
interactive on surface-raised | 7.36:1 | Text, 4.5:1 |
interactive on surface-deep | 8.98:1 | Text, 4.5:1 |
on-interactive on interactive | 8.35:1 | Text, 4.5:1 |
annotation on surface | 7.04:1 | Text, 4.5:1 |
annotation on surface-raised | 6.20:1 | Text, 4.5:1 |
on-interactive on annotation | 7.04:1 | Text, 4.5:1 |
surface on annotation | 7.04:1 | Text, 4.5:1 |
on-interactive on annotation-component | 6.65:1 | Text, 4.5:1 |
accent on surface | 6.89:1 | Text, 4.5:1 |
accent on surface-raised | 6.07:1 | Text, 4.5:1 |
accent on surface-deep | 7.40:1 | Text, 4.5:1 |
danger on surface | 7.00:1 | Text, 4.5:1 |
danger on surface-raised | 6.17:1 | Text, 4.5:1 |
danger on surface-deep | 7.52:1 | Text, 4.5:1 |
interactive on hairline | 5.20:1 | Large text and UI, 3:1 |
accent-pink on surface | 7.04:1 | Text, 4.5:1 |
accent-pink on surface-raised | 6.20:1 | Text, 4.5:1 |
accent-violet on surface | 6.65:1 | Text, 4.5:1 |
accent-violet on surface-raised | 5.87:1 | Text, 4.5:1 |
Recreations of product screens use 30 further --demo- colours. They show the product's brand and stay inside the recreations.
Type
Atkinson Hyperlegible Next sets all text. Atkinson Hyperlegible Mono sets code, gate output and spec annotations. Body text is 18px with line-height 1.55 at 900px and above, and 16px with 1.5 below.
--text-64: 64pxI run design systems as products.--text-40: 40pxI run design systems as products.--text-28: 28pxI run design systems as products.--text-20: 20pxI run design systems as products.--text-18: 18pxI run design systems as products.--text-16: 16pxI run design systems as products.--text-14: 14pxI run design systems as products.
| Line height | Value |
|---|---|
--leading-tight | 1.05 |
--leading-snug | 1.15 |
--leading-body | 1.55 |
--leading-body-compact | 1.5 |
| Weight | Value |
|---|---|
--weight-regular | 400 |
--weight-medium | 500 |
--weight-semibold | 600 |
--weight-bold | 700 |
Spacing
Every margin, padding and gap uses one of these steps. Below 900px, the gap between sections steps down from 96 to 64 and the gap between blocks from 48 to 32.
--space-4: 4px--space-8: 8px--space-12: 12px--space-16: 16px--space-24: 24px--space-32: 32px--space-48: 48px--space-64: 64px--space-96: 96px
Radius
Radius follows the role an element plays, so hierarchy shows in its corners.
--radius-control: 10pxButtons, inputs, contents button--radius-surface: 16pxGate output, recreation frames, tables--radius-modal: 20pxContents sheet, recreated modal--radius-pill: 999pxStatus and disclosure labels--radius-circle: 50%Swatches and step markers
Gradient and pattern
The brand sweeps from teal through blue to pink. It runs along the top of the header, borders the chosen cards and colours one phrase per headline. Every stop clears 3:1 against navy, so gradient type stays readable as large text. A soft aurora sits behind the whole page and stays put as you scroll, so no section cuts it off.
--gradient-brandBrand sweep: teal, blue, pink. Used where the brand is the subject, and as the header rule--gradient-textGradient type. Every stop clears 3:1 for large text on navy--gradient-auroraDrifting glow behind navy bands--gradient-surface-glowFaint glow on page-surface panels--gradient-page-glowFaint glows spread down the whole page, so sections flow into each other--pattern-spec-gridThe grid behind "Show the spec": an 8px baseline and 48px columns
Elevation and borders
Three shadows do three jobs. --shadow-overlay lifts the menu and contents sheets, --shadow-card lifts a card you point at, and --shadow-glow marks the one action or piece of work that matters most. A 1px --color-hairline border separates kinds of content.
--shadow-overlay--shadow-card--shadow-glowMotion
Motion adds a little joy without getting in the way of reading. Aurora glows drift slowly, headlines sharpen into focus, sections ease in as they arrive and figures count up once. "Show the spec" fades in a grid, then draws each measurement top to bottom. With reduced motion set, every duration becomes 0ms and nothing moves.
| Token | Value | Use |
|---|---|---|
--motion-fast | 200ms | Hover, toggles, the menu and contents sheets, the spec reveal and the resize highlight |
--motion-medium | 400ms | Card lift and bars |
--motion-reveal | 700ms | Sections easing in as they scroll into view |
--motion-count | 1400ms | Figures counting up |
--motion-ambient | 24s | The slow drift of the aurora glow |
--motion-ease | cubic-bezier(0.2, 0.8, 0.2, 1) | One easing curve for everything |
--motion-draw | 600ms | "Show the spec" lines and outlines drawing in |
--motion-stagger | 45ms | Delay between one annotation and the next |