Foundations
Foundations
Typography
A full product type scale with display, body, mono, and role-based samples. Swap typefaces live — selections map to CSS variables and persist for the docs shell.
Live typeface selection
Typeface selection
Composition preview
Product update
Typography that ships with the interface
Display carries emotion. Body carries comprehension. Mono carries tokens. Foundry keeps them as CSS variables so every component inherits your selection.
--font-display: "Syne"; --font-sans: "Plus Jakarta Sans"; --font-mono: "JetBrains Mono";
Type scale & roles
Display 2XL
font-display · text-5xl/6xl
48–60px · 800 · -0.03em
Voltage
Marketing heroes only — one per page max
Display
font-display · text-4xl/5xl
36–48px · 700 · -0.025em
Design systems with voltage
Page heroes, empty-state titles
Heading 1
font-display · text-3xl/4xl
30–36px · 700 · -0.02em
Section heading
Docs page titles, modal titles
Heading 2
font-display · text-2xl
24px · 600
Subsection title
In-page sections
Heading 3
font-display · text-lg
18px · 600
Card title
Cards, list group headers
Heading 4
font-sans · text-base · 600
16px · 600
Group label
Dense panels, form groups
Body large
font-sans · text-lg
18px · 400
Lead paragraphs introduce a page. Keep measure near 60–70 characters and avoid stacking more than two body sizes.
Intros, feature blurbs
Body
font-sans · text-base
16px · 400
Body copy is the default reading size. Line-height ~1.55 keeps multi-line blocks comfortable without looking sparse.
Paragraphs, descriptions, docs prose
Body small
font-sans · text-sm · muted
14px · 400
Secondary explanations, table helpers, and compact list rows.
Help text, meta, dense UI
Label
font-sans · text-sm · 500
14px · 500
Email address
Form labels, control captions
Caption / eyebrow
text-xs · 600 · tracked · primary
12px · 600 · 0.14em
Foundations
Eyebrows, overlines, timestamps (not uppercase)
Code / token
font-mono · text-sm
14px · 400
--font-display · bg-primary · h-11
Inline code, props, design tokens
Code small
font-mono · text-xs
12px · 400
npm install framer-motion
Shell snippets, dense logs
Button
font-sans · text-sm · 600
14px · 600
Get started
Buttons, tabs, menu items
Tabular nums
font-mono · tabular-nums
16px · 500
1,280 · 04:32 · $19.00
Counters, prices, timers, tables
Two families + mono
Display + body (or one UI family with weight contrast) plus a mono for code. A third display family only for marketing campaigns.
≤3 sizes per view
Hero + section + body is enough. Extra sizes for captions/code don’t count as primary hierarchy.
Weight before size
Prefer 600 vs 400 on the same size before inventing a new step on the scale.
Fluid, not jumpy
Use clamp() or sm: steps so display type scales with viewport without layout thrash.
Fluid type tokens (optional)
Clamp-based scale for marketing surfaces
Foundry defaults use Tailwind steps with sm: breakpoints. Drop in fluid tokens when display type must scale continuously.
CSS variable mapping
Selection writes these variables on the document root (document.documentElement) at runtime.
Do
- Map display / body / mono to CSS variables once
- Use font-display only for titles — not long paragraphs
- tabular-nums + mono for live stats and prices
- Test pairings at 390px and 1280px
Don’t
- Ship more than three type families without a brand reason
- All-caps long sentences
- Ultra-light (200) body text on screens
- Mix serif body with decorative display in dense admin UI