Typography

One scale for the whole system. Every tier is a composite utility — size, weight, line-height, and letter-spacing in one class — built on the OS system font stack, with Georgia for editorial accents and the system monospace stack for code.

The scale

Twelve composite tiers across five groups. Most use normal (0) letter-spacing; label-caps adds +0.8px for all-caps legibility, and shortcut adds +1.6px for compact key-command hints.

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 tiers — inline spans and fenced blocks.

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

import { Button } from '@nexus_ds/react';

<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"