Typography — Design System

Typefaces

Build things that feel clear.

Inter is the default for navigation, labels, body copy, and code-adjacent UI.

The root layout loads both fonts and exposes them as --font-inter and --font-grandstander. Use the Tailwind aliases font-sans and font-heading when a utility class is the clearest expression.

Scale and leading

Token	Value	Use for
`--type-size-xs`	12px	Meta, labels, and shortcuts.
`--type-size-sm`	14px	Supporting copy and compact controls.
`--type-size-md`	16px	Default body copy.
`--type-size-lg`	1.2rem	Leads and introductory copy.
`--type-size-xl`	1.55rem	Section headings.
`--type-leading-body`	1.7	Readable paragraphs and instructions.
`--type-leading-code`	1.65	Code blocks with room to scan.

Hierarchy

Role	Use for	Guidance
Display	Landing statements and docs page titles	Grandstander, tight leading, short phrases.
Heading	Sections and component names	Inter semibold; make the outline scannable.
Body	Explanations and instructions	Inter regular; keep the measure comfortable.
Meta	Labels, breadcrumbs, and shortcuts	Smaller size with contrast, not shouting.
Code	Tokens, props, and snippets	Monospace with horizontal scrolling when needed.

Writing for the interface

Lead with the outcome, then explain the detail.
Use sentence case for labels and headings.
Keep button labels specific: prefer “Save changes” over “Submit”.
Use a visible text label for important actions; icons alone need an accessible name.