Styleguide

The Specimen

Every typeface, token, and signature element in one place. This is the sign-off page — the design system made legible.

Type scale

Fluid · 320 → 1280px

Display XL · --step-8

Criticism with a pulse

Display LG · --step-7

Criticism with a pulse

H1 · --step-6

Criticism with a pulse

H2 · --step-4

Criticism with a pulse

H3 / dek · --step-2

Criticism with a pulse

Body · --step-0

Criticism with a pulse

Small / kicker · --step--1

Criticism with a pulse

Micro / meta · --step--2

Criticism with a pulse

Display — Archivo

Aa Bb Cc 0123

Body — Newsreader

Aa Bb Cc italic 0123

Mono — Space Mono

AA BB CC 0123

Palette

Tokens in tokens.css

Canvas --canvas #0a0a0b
Surface --surface #161617
Surface 2 --surface-2 #1e1e20
Ink --ink #ece7de
Muted --muted #9a9a93
Line --line ink @ 14%
Accent --accent #ff008c
On accent --on-accent #0a0a0b

The accent swaps with one token

The signature is hot magenta (--accent: #ff008c). Editing that single value in tokens.css re-skins the entire publication — set it to lime #ccff00 or safelight red #ff2d2d and every score, rule, link, and hover follows.

#ff008c #ccff00 #ff2d2d

Liquid score

The signature · never stars

A geometric vessel that fills with magenta to the score. The level is an inline custom property (--fill), so the admin can animate it live. Scroll past it to see the reveal-fill.

Spacing & rules

--space-1 → 10

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--space-10

Components

Buttons · chips · pull-quote

Secondary Primary Drama Sci-Fi Kicker label

Event cinema that refuses to let you off the hook.

— Ian, on the form