Typography

Typefaces, type scale, weights, and line heights — the complete typography system.

Typography brings consistency across experiences and platforms. All type tokens are defined in the Core layer and referenced by component tokens. Generated from dist/tokens/tokens.yaml.

Typefaces

Three typeface families — sans-serif for UI, serif for editorial content, monospace for code.

Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
SF Mono --font-family-mono
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Inter --font-family-sans
Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Rokkitt --font-family-serif

Heading Scale

Headings create typographic hierarchy. Each size maps to an HTML element and a utility class.

Size Class / Element Sample
XXXL .heading-xxxl / <h1> The quick brown fox
XXL .heading-xxl / <h2> The quick brown fox
XL .heading-xl / <h3> The quick brown fox
LG .heading-lg / <h4> The quick brown fox
MD .heading-md / <h5> The quick brown fox
SM .heading-sm / <h6> The quick brown fox

Text Scale

Body text sizes for running copy, labels, and captions.

Size Class Sample
XXXL .text-xxxl Clear schedules, gentle spacing, and readable copy for every screen.
XXL .text-xxl Clear schedules, gentle spacing, and readable copy for every screen.
XL .text-xl Clear schedules, gentle spacing, and readable copy for every screen.
LG .text-lg Clear schedules, gentle spacing, and readable copy for every screen.
MD .text-md Clear schedules, gentle spacing, and readable copy for every screen.
SM .text-sm Clear schedules, gentle spacing, and readable copy for every screen.
XS .text-xs Clear schedules, gentle spacing, and readable copy for every screen.

Font Sizes

All available size tokens. Each step follows a consistent scale ratio.

Token Value Preview
--font-size-xs .75rem Ag
--font-size-sm .875rem Ag
--font-size-md 1rem Ag
--font-size-lg 1.25rem Ag
--font-size-xl 1.5rem Ag
--font-size-xxl 2rem Ag
--font-size-xxxl 2.5rem Ag

Font Weights

Numeric weight tokens available in the system.

Token Value Preview
--font-weight-100 100 The quick brown fox
--font-weight-200 200 The quick brown fox
--font-weight-300 300 The quick brown fox
--font-weight-400 400 The quick brown fox
--font-weight-500 500 The quick brown fox
--font-weight-600 600 The quick brown fox
--font-weight-700 700 The quick brown fox
--font-weight-800 800 The quick brown fox
--font-weight-900 900 The quick brown fox

Line Height

Line height tokens ensure readable vertical rhythm across all text sizes.

Token Value Preview
--line-height-xs 1rem Line height
demonstration
--line-height-sm 1.25rem Line height
demonstration
--line-height-md 1.5rem Line height
demonstration
--line-height-lg 1.75rem Line height
demonstration
--line-height-xl 2rem Line height
demonstration
--line-height-xxl 2.75rem Line height
demonstration
--line-height-xxxl 3.5rem Line height
demonstration

Usage Guidelines

Use defined type tokens

Do

Always use font-size tokens from the scale. Custom pixel values break consistency.

Avoid arbitrary sizes

Don't

Don't use arbitrary px or rem values that aren't in the token scale.

Paragraphs of text should be roughly 50–80 characters wide for comfortable reading.

Do

Keep line lengths between 50 and 80 characters for body text.

Text too narrow is hard to read and wastes space.

Don't

Don't let paragraph widths get too thin or too wide.

Use brand font tokens

Do

Reference --brand-font-base and --brand-font-lead so fonts adapt per brand.

Don't hardcode font names

Don't

Never hardcode font-family values like "Inter" or "Arial" directly.