Reference · canonical tokens

Design tokens

Every value visible on this site comes from these tokens. Reference tokens — not raw values — in production collateral. Warm Light is the default reading surface; Blueprint Dark is reserved for cover, pause, command, and high-contrast moments.

Specimen · surfaces

Surface

No box first; then hairline; then full-width exhibit; then card. Use the lowest depth that solves the surface.

Page --into-surface-page Warm #fbfaf7 · Blueprint #0f1518
Primary reading surface.
Raised --into-surface-raised Warm #f4f1ea · Blueprint #161d21
Card and panel surface.
Muted --into-surface-muted Warm #ece8de · Blueprint #1e272b
Sub-panel or footnote zone.
Inverse --into-surface-inverse Warm #1a1a1a · Blueprint #fbfaf7
Inverted surface for emphasis blocks.
Deep editorial --into-surface-deep-editorial Warm #0a1c1c · Blueprint #0a1c1c
Cover and pause moments.
Hover --into-surface-hover Warm #f0ece3 · Blueprint #1b2429
Hover state surface.

Specimen · display scale

Display and section titles

Display roles render in Newsreader 400. Line-heights stay tight (1.0–1.1). Use the low end first.

Cover title --into-type-cover-title 4rem · Newsreader 400 Cover and key takeover headlines.

A measured argument, made visible.

Section title --into-type-section-title 3.5rem · Newsreader 400 Major section openers.

Section title

Slide title --into-type-slide-title 3rem · Newsreader 400 Slide and exhibit titles.

Slide title

Specimen · reading scale

Lead and body

Reading roles use Lexend 300. Body floor is 1rem. Measure stays inside 35–56ch.

Lead --into-type-lead 1.125rem · Lexend 300 Lead paragraph following a title.

The lead carries the argument into the body without theatre.

Body --into-type-body 1rem · Lexend 300 Primary reading size.

Body copy reads in Lexend 300 at the floor of 1rem, with rhythm that stays calm under pressure.

Specimen · floors

Minimum legibility floors

Floors are absolute. Splitting a layout beats shrinking text.

Meta --into-type-meta 0.75rem · IBM Plex Mono 400 Metadata, kickers, document chrome.

meta · footnote · 2026-05-22

Table floor --into-type-floor-table 0.875rem · Lexend 300 Minimum table body text.

Sample text

Footnote floor --into-type-floor-footnote 0.6875rem · IBM Plex Mono 400 Minimum footnote text.

meta · footnote · 2026-05-22

Specimen · sequential

Sequential — Teal 1 to 5

Use for ordinal data, ramps, intensities. Direction is from accent to soft.

Specimen · neutrals

Neutral — Gray 1 to 5

Use for non-emphasized series, baselines, comparison neutrals.

Specimen · categorical

Categorical — six max

Cat 4 (saffron) is a signal — reserved for milestone, comparison, or caution series only. Cat 6 (critical) is reserved for negative-only series.

Cat 1 --into-chart-cat-1
Primary series.
Cat 2 --into-chart-cat-2
Comparison neutral.
Cat 3 --into-chart-cat-3
Tertiary series.
Cat 4 --into-chart-cat-4
Saffron — caution or milestone signal only.
Cat 5 --into-chart-cat-5
Quaternary neutral.
Cat 6 --into-chart-cat-6
Critical / negative-only signal.