Typography

The kit keeps one type scale. A look retunes the three faces (font-sans, font-body, font-display); it does not invent new sizes. font-mono is system only. There is no brand mono.

Atlas parked Outfit on font-sans and used that for headings. The kit puts titles on font-display so Washi can be Fraunces, ICS can be Outfit, and a dry consumer can pick a serif without stealing the UI face.

Switch Washi and ICS in the sidebar. The metrics below should not move.

Scale

Each role is a text-* step carrying size, leading, tracking, and weight (400). Pair it with a family — font-display for display and headings, font-body for body and caption (Tailwind v4 keeps font-family off the text-* tuple). Don't mix a role with a raw text-xl; pick the role.

text-display48 / 1.2

Display

text-heading-136 / 1.25

Heading one

text-heading-230 / 1.25

Heading two

text-heading-324 / 1.25

Heading three

text-heading-420 / 1.25

Heading four

text-heading-518 / 1.25

Heading five

text-heading-616 / 1.25

Heading six

text-body-lg18 / 1.5

Body large. Supporting lede under a title.

text-body-md16 / 1.5

Body. Running copy. One scale, three faces.

text-body-sm14 / 1.375

Body small. Captions under a title, helper text.

text-caption12 / 1.33

Caption. Meta, timestamps, footnotes.

Role	Family to pair	Size	Leading
`text-display`	`font-display`	3rem (48)	1.2
`text-heading-1`	`font-display`	2.25rem (36)	1.25
`text-heading-2`	`font-display`	1.875rem (30)	1.25
`text-heading-3`	`font-display`	1.5rem (24)	1.25
`text-heading-4`	`font-display`	1.25rem (20)	1.25
`text-heading-5`	`font-display`	1.125rem (18)	1.25
`text-heading-6`	`font-display`	1rem (16)	1.25
`text-body-lg`	`font-body`	1.125rem (18)	1.5
`text-body-md`	`font-body`	1rem (16)	1.5
`text-body-sm`	`font-body`	0.875rem (14)	1.375
`text-caption`	`font-body`	0.75rem (12)	1.33

Ink is separate: text-fg, text-fg-muted, text-fg-subtle. UI chrome that is not a title or a paragraph stays on font-sans plus a Tailwind size (text-sm on a Button). font-ui is the brand UI weight, used with stroke, not a scale step.

Voices

font-display

Titles sit here

Washi uses Fraunces. ICS uses Outfit. Dry is a system serif.

font-body · font-sans

Running copy uses the body face. Buttons, inputs, and the shell stay on font-sans, which is UI, not prose.

Usage

<h1 className="text-display font-display text-fg">Display</h1>
<h2 className="text-heading-3 font-display text-fg">Section</h2>
<p className="text-body-md font-body text-fg">Running copy.</p>
<p className="text-body-sm font-body text-fg-muted">Helper under a title.</p>

The scale lives in bindings.css as --text-* tuples in @theme (size plus --line-height / --letter-spacing / --font-weight). Faces live on --brand-font-*. See Tokens for how a look retunes those. The rest of the language is under Foundations.

Typography

Scale

Voices

Usage

On this page