Typography

One type scale covers the whole system. Each step is one class that sets size, weight, line height and letter spacing. Text uses the system font, with Georgia for editorial accents and the system monospace font for code.

The scale

Sixteen steps in six groups. label-caps adds 0.8px letter spacing so all-caps text stays readable. shortcut adds 1.6px for keyboard hints.

Display

One system, every branddisplay-large

Copy it, then own itdisplay-medium

Built to be readdisplay-small

Heading

Across five basesheading-large

One source of truthheading-medium

For humans and agentsheading-small

Tokens, not guessworkheading-xsmall

The smallest heading tierheading-xxsmall

Body

Body-default is the workhorse reading size for documentation prose, with text-wrap: pretty to guard against orphans and widows.body-default

Body-small carries supporting copy, captions, and the secondary text under a heading.body-small

Label

Label defaultlabel-default

Label smalllabel-small

Label capslabel-caps

Shortcut

⌘⇧Pshortcut

Code

Two monospace steps: one for inline code and one for code blocks.

Reference a token inline with --nx-color-primary-background in running prose.

import { Button } from '@/components/button/button';

<Button variant="secondary">Ship it</Button>

Families

Three typefaces — one system.

System UISans — UI, headings, body

The quick brown fox jumps over the lazy dog

GeorgiaSerif — editorial accents

The quick brown fox jumps over the lazy dog

System monoMono — code, token names, labels

const token = "--nx-color-primary-background"