MVP UI

Typography

Token-driven font stack, type scale, weights, and color — every value pulled from design tokens.

Type scale

Nine steps from --text-xs (12 px) to --text-5xl (48 px). Each step maps a CSS custom property to a Tailwind utility of the same name.

The quick brown fox
--text-5xl48px·Display hero
text-5xl
The quick brown fox
--text-4xl36px·Display heading
text-4xl
The quick brown fox
--text-3xl30px·Page heading
text-3xl
The quick brown fox
--text-2xl24px·Subheading
text-2xl
The quick brown fox
--text-xl20px·Card heading
text-xl
The quick brown fox
--text-lg18px·Section lead
text-lg
The quick brown fox
--text-md16px·Default prose
text-md
The quick brown fox
--text-sm14px·UI labels, form fields
text-sm
The quick brown fox
--text-xs12px·Badges, captions
text-xs

Font family

Two families defined as tokens. Never hardcode font stack strings in component code — reference the token.

--font-sansfont-sans

Inter — the UI workhorse

Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto …

--font-monofont-mono

JetBrains Mono — for code

"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas …

Weight conventions

Four weights — --fw-regular through --fw-bold. Match weight to hierarchy, not decoration.

Regular · 400
Body text, descriptions
--fw-regularfont-normal
Medium · 500
UI labels, badge text
--fw-mediumfont-medium
Semibold · 600
Nav, buttons, headings
--fw-semiboldfont-semibold
Bold · 700
Strong emphasis
--fw-boldfont-bold

Color

Always use semantic foreground tokens. Raw scale values (gray-900, brand-600) do not flip in dark mode — semantic aliases do.

text-fg·Primary·Main content
The quick brown fox jumps over the lazy dog.
text-fg-secondary·Secondary·Supporting text
The quick brown fox jumps over the lazy dog.
text-fg-tertiary·Tertiary·Placeholders, captions, labels
The quick brown fox jumps over the lazy dog.
text-fg-quaternary·Quaternary·Disabled-adjacent hints
The quick brown fox jumps over the lazy dog.
text-fg-brand·Brand·Brand-colored text, active icons
The quick brown fox jumps over the lazy dog.
text-fg-error·Error·Validation errors, destructive copy
The quick brown fox jumps over the lazy dog.
text-fg-success·Success·Confirmation messages
The quick brown fox jumps over the lazy dog.

Line height

Leading tokens pair with size tokens of the same step. Use the matched pair — mixing sizes and leadings from different steps breaks vertical rhythm.

--leading-xs1.125rem / 18px

Paired with --text-xs

--leading-sm1.25rem / 20px

Paired with --text-sm

--leading-md1.5rem / 24px

Paired with --text-md

--leading-lg1.75rem / 28px

Paired with --text-lg

--leading-xl1.875rem / 30px

Paired with --text-xl

Combinations

Common size + weight + color pairings used across the system. Copy the class string directly — no raw values needed.

Page heading
text-3xl font-semibold text-fg·Top of every doc or settings page
Section heading
text-xl font-semibold text-fg·h2 inside prose content
Card heading
text-lg font-semibold text-fg·Card titles, panel headers
Body
text-md font-normal text-fg-secondary·Default prose, descriptions
UI label
text-sm font-medium text-fg·Form labels, nav items, table headers
Caption / helper
text-xs font-normal text-fg-tertiary·Input hints, timestamps, metadata
Badge text
text-xs font-medium text-fg-brand·Status chips, tag labels