Typography

Font familiesCopy Anchor Link

Inter is the default interface family. Use it for headings, body text, labels, and metrics. Geist Mono is the documentation's code family, used for snippets, tokens, and technical values.

The workbench loads both families with Next.js fonts. Registry components inherit the consuming app's font; installing a component or the theme does not install these fonts. Configure your product's font family explicitly if you want the same appearance.

Product type scaleCopy Anchor Link

These are the product roles defined in DESIGN.md. Each specimen shows its size, line height, weight, and equivalent Tailwind utilities. The metric role uses tabular numerals to align changing numbers.

Use weight 400 for regular content, 500 for labels and table headings, and 600 for titles and metrics. Prefer hierarchy and spacing over adding more weights or sizes.

Default heading mappingCopy Anchor Link

Use this as the starting point for product pages. Heading levels describe the content hierarchy; type roles describe how the headings look.

<h1 className="text-2xl leading-8 font-semibold">Workspace settings</h1>
<h2 className="text-lg leading-7 font-semibold">Access management</h2>
<h3 className="text-base leading-6 font-semibold">Invitations</h3>

Choose the heading level from its place in the page, not from its desired size. A card title can be an h2 styled with the component-title role when the card is a direct subsection of the page. Do not skip heading levels just to get a smaller heading.

Deeper headings: h4–h6 remain valid semantic elements, but have no dedicated default type roles yet. If the content needs that depth, keep the correct level and explicitly choose an existing role appropriate to the context. Do not progressively shrink headings into label or caption sizes. Document a new role when a repeated use case needs one.

This mapping is guidance, not a global CSS reset. Products apply the styles explicitly; registry installation does not restyle every heading. The docs apply this mapping through scoped styles; it does not affect consuming products.

Text treatmentsCopy Anchor Link

Typography sets hierarchy; semantic colors set emphasis. Use muted text for supporting content, an underlined link for navigation, and descriptive error text for validation. Keep essential information readable and do not communicate errors using color alone.

The link token is part of the optional Migoy theme. Products using their own palette should map it to a readable link color, particularly in dark mode.

In contextCopy Anchor Link

A product page title, body copy, field label, helper text, table text, and caption shown together. This is a typography specimen, not a new table or form component.

Field descriptions and errors use the 12px / 16px caption role. Labels keep the 14px / 20px label role. Keep supporting text concise; place longer instructions in body text before the field.

UsageCopy Anchor Link

Copy the equivalent utilities below. The type-* names in the design specification describe roles; they are not currently exported CSS utilities. Use real heading elements for the document hierarchy, independently of their visual size.

// Page title: 24px / 32px, 600
<h1 className="text-2xl leading-8 font-semibold">Workspace settings</h1>

// Section title: 18px / 28px, 600
<h2 className="text-lg leading-7 font-semibold">Team members</h2>

// Component title: 16px / 24px, 600
<h3 className="text-base leading-6 font-semibold">Notification preferences</h3>

// Body: 14px / 20px, 400
<p className="text-sm leading-5 font-normal">Manage access and preferences for your workspace.</p>

// Label: 14px / 20px, 500
<label htmlFor="email" className="text-sm leading-5 font-medium">Email address</label>

// Caption: 12px / 16px, 400
<p className="text-xs leading-4 font-normal">Last updated 5 minutes ago</p>

// Metric: 28px / 36px, 600
<p className="text-[28px] leading-9 font-semibold tabular-nums">12,480</p>

// A product heading can be an h1 while using the 24px page-title role.
<h1 className="text-2xl leading-8 font-semibold">Workspace settings</h1>

Inter can display metrics in tabular numerals without switching to a monospace font. Use font-mono when the content itself is code or a technical identifier.

Product and documentationCopy Anchor Link

Product page titles use 24px / 32px at weight 600. Documentation uses Inter and the same product type scale. Its default mapping is:

Page titles, section headings, subsection headings, and prose use the product roles directly. Sidebar labels and code keep their own compact styles. Component previews and specimens keep their explicitly defined styles.

ReadabilityCopy Anchor Link

Allow text to wrap and layouts to grow when users zoom or increase text size. Use relative units through Tailwind utilities where possible, avoid fixed-height text containers, and keep the content's heading order meaningful. The pixel measurements above describe the default scale, not a restriction on user scaling.