Dark-first. Montserrat. Cyan primary (#00F1F1) + amber secondary (#F0A840). A small set of tokens and components extracted directly from the live codebase — ready to mirror in Figma.
Four rules extracted from the live site that keep the system coherent. Dark canvas, bright point of focus, quiet chrome.
The site opens dark and stays dark. Light is a courtesy, not a baseline.
Cyan #00F1F1 primary — points, never decorates. Amber #F0A840 secondary — highlights CTAs, tags, and interactive elements.
Twelve opacity steps of the foreground replace a grey scale. Hierarchy by alpha, not hue.
Every surface inherits a 0.3s background-color / border / color transition, so toggling theme reads as a single coordinated fade.
Montserrat carries everything, using the full 100–900 weight range for hierarchy. JetBrains Mono is added for tokens, metadata, and code — a supporting voice, never decorative.
| Role | Size / line | Weight | Use |
|---|---|---|---|
| Eyebrow | 11 / 14 | 600 · tracked 0.24em | Section numbers, metadata |
| Caption | 12 / 18 | 500 | UI labels, meta |
| Small | 14 / 22 | 400 | Captions, hints |
| Body | 16 / 26 | 400 · fg-70 | Default prose |
| Body L | 18 / 28 | 400 | Nav, emphasis |
| Lede | 20 / 30 | 300 · fg-70 | Intros |
| H4 | 20 / 26 | 600 | Card headings |
| H3 | 28 / 34 | 500 | Subsections |
| H2 | 44 / 46 | 300 | Page titles |
| H1 | 64 / 64 | 200 | Hero |
| Display | 88 / 84 | 100 | Cinematic entrance |
Deep blue-black canvas. Off-white foreground stepped down by opacity for hierarchy. Two accent tokens: cyan (#00F1F1) points, amber (#F0A840) highlights. Both grade down for light mode. Footer stays dark.
The site does not keep a separate grey scale — instead, the foreground token rgba(255,255,255,α) steps through twelve opacities. Mirror these one-for-one in Figma as colour styles.
Selected text uses the theme-specific accent opacity and ink color.
2px solid accent · 2px offset. No exceptions.
6px rail, track matches canvas, thumb is cyan at 3px radius.
Tailwind's default 4px step scale. Borders are all variations of the foreground opacity ladder, so light/dark stay perfectly paired. No hard shadows — depth comes from glow.
| Token | Value | Use |
|---|---|---|
| max-width | 1200px | Content container |
| page gutter | 32px | Edge inset |
| measure | 62ch | Body text max-width |
| transition base | 0.3s ease | Background / border / color on every element |
| theme-switch | 0.35s ease | Body bg/color cross-fade |
The pieces used across the home page, case studies, and template sub-sites. All rebuilt in Figma with the tokens above.
44px height · pill radius · 12px / 600 / 0.12em tracked label. Primary: filled accent, ink color, accent glow. Secondary: amber border + text, permanent double-ring glow (0 0 0 1px / 0 0 18px). Ghost: text-only fg-70, hover to accent.
Inline text uses the accent with a subtle underline — for example, a link to a case study. Standalone CTAs use the arrow form so the motion is the signal:
10px / 600 / 0.16em tracked label. Focus ring is accent with 18% glow.
Inputs sit on --bg-surface-2 against the card.
Pill-shaped, blurred background (--nav-bg). Active dot gets the accent at 12% with a 1px inset ring.
Redesigning analytics for a 1,000-person research team.
A scroll-linked homepage opener with motion scaling.
A restaurant booking template built on the same token set.
The tokens assembled into the two surfaces the site spends most of its life in — the cinematic entrance and a case-study open.
Digital Product Designer — 20 years, 300+ projects, specialising in UX research and EdTech.
Redesigning analytics for a 1,000-person research team.
The team needed a single view of programme health across faculties. Existing tooling fragmented the signal across six dashboards.