Tokens

Typography, space & elevation

Space Grotesk carries headings and product moments; Inter carries everything you read. Spacing follows an 8pt rhythm with two half-steps for dense controls.

Families

Space Grotesk

Display · weights 500, 600, 700 · headings, numerals, brand moments

--font-display

Inter

Body · weights 400, 500, 600 · UI text, labels, long-form copy

--font-body

Scale

Forge with intent

Display · --text-display

Precise tools, calm surfaces

Heading 1 · --text-h1

Build once, ship everywhere

Heading 2 · --text-h2

Component anatomy

Heading 3 · --text-h3

Field states and validation

Heading 4 · --text-h4

Accessibility checklist

Heading 5 · --text-h5

Naming conventions

Heading 6 · --text-h6

The lede sets context for a page in one or two sentences.

Body large / lede · --text-lg

Body copy carries the bulk of the interface: form help, descriptions, and prose in dialogs.

Body · --text-body

Work email

Small / label · --text-sm

Last synced 4 minutes ago

Caption · --text-caption

Spacing

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-12

--space-16

--space-20

--space-24

Radius & elevation

--radius-xs

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-full

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg