Design system

Typography

Geist Sans for display and interface text, Geist Mono for code and identifiers.

Scale

Every text role, with the size, line height and weight it renders at here. Headings live at weight 500; there is no bold.

Display.text--display
Heading one.text--h1
Heading two.text--h2
Heading three.text--h3
Heading four.text--h4
Lead paragraph, one step up from body..text--lead
Body. The default, and most of any page..text
Small body, for dense rows and secondary detail..text--sm
Label.text--label
Caption.text--caption
Meta.text--meta
Overline.text--overline
const code = true.text--code

Density

The same classes at two sizes: comfortable on the marketing site, product in the app.

Why

One domain, two densities, split at the route group. The same classes, re-resolved.

MarketingHeadingBody text at this density.
AppHeadingBody text at this density.