Typography
Pick a role and the ramp sets the size. The editorial switch above shows any component on the other surface, where .editorial retunes all four heading sizes together.
Headings
variant="display" sets a larger size at the same level, for a landing page heading that should outrank the docs. divider adds a rule underneath. The two props are independent.
Settings
Ship with less ceremony
Billing
Featured post
Connected accounts
Body copy
TypographyMuted pins tone to muted and drops the prop from its type, so <TypographyMuted tone="default"> fails to typecheck. Reach for TypographyP to set the tone yourself.
Interface copy, 13px.
The same rung, secondary ink.
Reading copy: 18px, relaxed leading, balanced wrapping. Essays and docs pages set their body at this rung, and the heading ladder is a ratio to it.
- The ui variant sets bullets at 13px, matching interface copy.
- Use it for lists inside cards, panels and tiers.
- The prose variant sets bullets at reading size.
- Same measure as the prose above it.
Meta and labels
Labels and captions share one size scale. They usually appear together as a key and its value, so their sizes match.
tone="heading": primary ink, for an eyebrow above a section
tone="label": quiet ink, for a card where the figure leads
Workspace
Updated 3 minutes agoRates exclude tax.
Stats, code, highlight
The card, panel and page sizes ride the heading ladder, so a stat retunes with the heading beside it on an editorial surface. Use tabular figures wherever the number updates in place, and proportional for a headline figure.
Events
2.4MUptime
98%Run npx foundations doctorbefore reporting a styling bug. It checks import order, fonts and peers, which is where most of them come from. Changing seed gives a different swipe from the same tone.
Links
An href with a scheme renders a plain anchor and opens in a new tab with rel=noopener. Every other href routes through next-view-transitions. The href decides, so the call site stays the same either way.
The href decides whether a link routes or leaves. An internal href routes through next-view-transitions elsewhere. An external one opens in a new tab, andaddArrow marks it with an outbound glyph. On an internal link the same prop points along the page instead. Both are rendered above, so compare them in place.
Rendering your own element
Two options, depending on whether you need a different tag or a different component.
// A different tag: the classes stay the same
<TypographyEyebrow as="h2">Pricing</TypographyEyebrow>
// A different component: take the classes as a string
<motion.h2 layoutId={id} className={cn(headingClass(), "text-2xl")}>
<Dialog.Title className={eyebrowClass("label")}>Hand-rolled text-sm font-medium stops matching the moment the ramp changes. Last time these went in by hand, the codebase collected five slightly different copies of the heading styles.