Reviewer reference
A system for
the whole journey.
The palette, typography, spacing and interaction language used throughout this prototype.
Colour
Paper
var(--paper)
Ink
var(--ink)
Signal red
var(--accent)
Active red
var(--accent-hover)
Supporting ink
var(--muted)
Typography
Anton · Motion display
Homepage display: 25vw on mobile, fluid up to 400 px on desktop. Homepage headings use DM Sans, from 35 to 94 px.
Space Grotesk · Page heading 72 / 44
Section heading · 48 / 34
Row heading · 28 / 24
DM Sans · Intro 22 / 18
Body 18 / 16 · line-height 1.6
Supporting text 14 / 14Spacing & shape
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px
Radii: 0 · 6 · 12 px
Inner pages: 76 px desktop margins, 24 px mobile. Homepage margins adapt from 18 to 44 px.
Responsive rules
Desktop uses a two-column hero and three offer columns. At 900 px, navigation becomes a menu and columns stack. Mobile actions fill the content width. The scorecard stacks question, evidence and status on mobile.
Body text stays readable at 320 px. Focus is visible. Reduced motion replaces the homepage sequence with a static EVIDENCE frame. The visible Motion toggle offers the same still view; OS reduced motion always takes priority. Pause and Replay are available only with motion on.
Interaction states
Error state
A specific explanation and a clear next action.
Not assessed · Neutral status for missing evidence