Token anatomy
Each text style bundles four to five values: family, weight, size, line height, and (for body styles) paragraph spacing. The token name encodes the role; the values are tuned together so a writer can change a heading's level without re-tuning anything below.
Tailwind defaults
We don't maintain a custom scale. Tokens map 1:1 to Tailwind utilities (text-base, text-2xl, etc.) so prototypes and production share one vocabulary.
Heading
Use heading levels for structure — they matter for accessibility. Bold weight on a paragraph is not a heading.
- heading.displayFounders Grotesk X CondensedBold (700)60 px0.92Branding H1 only. Always set in ALL CAPS. Hero bands, login, marketing surfaces.
- heading.xxlInter TightSemibold (600)36 px1.1Page H1 in product UI. Catalog, settings, dashboard.
- heading.xlInter TightSemibold (600)30 px1.15Section H1 on dense pages, modal titles.
- heading.lgInter TightSemibold (600)24 px1.2H2 — section heading inside a page.
- heading.mdInter TightSemibold (600)20 px1.3H3 — subsection heading.
- heading.smInter TightSemibold (600)16 px1.4Card titles, row headings, dense layouts.
Body
Default to body (16 px) for prose, body.sm (14 px) for product UI.
- body.lgInter TightRegular (400)18 px1.62520 pxLead paragraphs in marketing or hero bands.
- bodyInter TightRegular (400)16 px1.62516 pxDefault prose. Docs, detail pages, long-form content.
- body.smInter TightRegular (400)14 px1.512 pxDefault product UI body. Catalog rows, table cells, form labels.
- body.xsInter TightRegular (400)12 px1.58 pxMetadata, captions, inline annotations.
Metric
For numeric emphasis. Tabular figures + slashed zero are wired into every metric token — totals stack cleanly, deltas update without jitter.
- metric.displayFounders Grotesk X CondensedBold (700) · ALL CAPS · tabular60 px0.95The single hero metric per page — a balance, an end-of-day total. Pairs with the page H1 in Founders.
- metric.xlInter TightSemibold (600) · tabular48 px1.05Hero KPI on a dashboard tile when not paired with a Founders display.
- metric.lgInter TightSemibold (600) · tabular32 px1.1Card-level metric. Daily total, percentage delta, big number.
- metric.mdInter TightMedium (500) · tabular20 px1.3Inline metric in a row or list. Receipts, breakdowns.
- metric.smInter TightRegular (400) · tabular14 px1.5Inline numbers in dense tables.
Code
Martian Mono. Tabular numerals on by default via the .font-mono selector.
- codeMartian MonoRegular (400) · tabular13 px1.5Code blocks, inline code, repo paths, model names.
- code.smMartian MonoRegular (400) · tabular11 px1.5Metadata strips, inline IDs, table cell paths.
Consuming a token
Tokens map to Tailwind utilities. The mapping is mechanical — a token is a name for a stack of utilities you'd otherwise have to remember together.
tsx
/* heading.display — branding H1, ALL CAPS */
<h1 className="font-display uppercase text-6xl font-bold leading-[0.92]">
Money in.
</h1>
/* heading.xxl — product H1 */
<h1 className="text-4xl font-semibold tracking-tight">Settings</h1>
/* heading.lg — H2 */
<h2 className="text-2xl font-semibold tracking-tight">Section</h2>
/* heading.md — H3 */
<h3 className="text-xl font-semibold tracking-tight">Subsection</h3>
/* body */
<p className="text-base leading-relaxed">Default prose.</p>
/* body.sm — product UI body */
<p className="text-sm leading-relaxed">Catalog row.</p>
/* metric.lg — KPI */
<p className="text-3xl font-semibold tabular-nums slashed-zero">2.055,00 kr</p>
/* code */
<code className="font-mono text-[13px]">flatpay/proto-…</code>
/* eyebrow — Inter Tight, sentence case, semibold */
<p className="eyebrow text-muted-foreground">Section</p>