Rules of typesetting throughout the system.
Typeface
Two families, one typeface: IBM Plex. Mono-first, engineered for operators — Sans exists solely for long-form prose. Copy either stack straight into CSS.
The base for everything — headings, data, interface chrome, and labels. Mono-first, engineered for operators.
'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospaceThe one exception, reserved for body-* long-form prose only — never headings, data, or UI chrome.
'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serifModifiers
Two emphasis modifiers layer on top of any size in the scale — they change weight/colour only, never the size or family. Use <strong> for real semantic emphasis, not for making text look bigger.
| Aa Example | ◇ Modifier | Usage |
|---|---|---|
| Subtle — de-emphasised text | Secondary/muted text within any size — sets colour to --ds-ink-5, weight and size untouched. | |
| Regular text with a strong span inline | Semantic emphasis via <strong> — steps weight up one notch on the five-step ladder (e.g. regular→medium, medium→semibold, semibold→bold), never changes colour or size. |
Headings
Used to introduce pages or sections. Plex Mono --font-weight-semibold; tracking tightens as size increases. The two largest tiers are responsive — resize the window below 760px.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Heading 72 | Marketing heroes. Responsive: 40px below 760px. | |
| Heading 64 | Secondary marketing heroes. | |
| Heading 56 | Large section intros. | |
| Heading 48 | Page titles. Responsive: 32px below 760px. | |
| Heading 40 | Dense page titles. | |
| Heading 32 | Section headers, dashboard headings. | |
| Heading 24 | Compact section headers. | |
| Heading 20 | Sub-section headers. | |
| Heading 16 | Card and compartment titles. | |
| Heading 14 | Smallest heading — dense list/table group headers. |
Data
Telemetry and metrics. Plex Mono; always font-variant-numeric: tabular-nums.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| 99.999% | Hero telemetry readouts. | |
| 12,480 | Stat strip figures. | |
| 8,462 | Card metrics. | |
| 21d ramp | Inline data points. | |
| A17 · af-cpt | Node and region tags. |
Buttons
Only used inside components that render buttons — never for links or plain text. Plex Mono --font-weight-semibold.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Deploy Scrums.com | Largest button — marketing CTAs. | |
| Deploy | Default button. | |
| Documentation | Compact buttons, and buttons placed inside an input field. |
Interface
Navigation and tag chrome. Plex Mono.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Platform | Nav links. | |
| 01 / 05 | Nav indices. | |
| af-cpt | Tags and chips. |
Body
Long-form prose. The only place Plex Sans is used. Never below the 15px accessibility floor.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Software Engineering Orchestration Platform. | Lead paragraphs. | |
| Never below 15px for long-form prose. | Default body copy. Workhorse. | |
| Secondary descriptive text, captions. | Captions, secondary copy. | |
| Fine print, legal, metadata. | Legal, fine print. |
Labels
Uppercase, tracked. Coordinates, addresses, and eyebrows. Plex Mono.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Region // af-cpt | Section labels, eyebrows. Workhorse. | |
| Section header | Dense labels. | |
| Micro label | Micro coordinates, ticks. |
Weights
Five weights, system-wide — up from three. Weight, not size, now carries most of the legibility/hierarchy load: light for de-emphasised metadata, regular for prose, medium for secondary UI text and data labels, semibold for headings and buttons, bold for the highest-impact brand moments. Every step here is a real static weight IBM Plex Mono ships on Google Fonts — no interpolated in-between values, since this family has no variable-font axis to interpolate from.
| Aa Example | ◇ Token | Usage |
|---|---|---|
| Light 300 | De-emphasised metadata, timestamps, muted captions. | |
| Regular 400 | Body copy, default UI text. | |
| Medium 500 | Nav links, data figures, tags. | |
| Semibold 600 | Headings, buttons, emphasis. | |
| Bold 700 | Highest-impact brand moments — hero display numerals, top-of-funnel headlines. |
Line height
Tightens as size increases — a 72px headline needs a much tighter line-box than 15px prose to avoid looking loose. Named by value so the token doubles as the number.
| Aa Example | ◇ Token | Usage |
|---|---|---|
| 0.92 — tightest | heading-hero. | |
| 0.95 | heading-64. | |
| 1.0 — numeric | The entire Data family; heading-56. | |
| 1.05 | heading-h1. | |
| 1.08 | heading-40. | |
| 1.1 | heading-h2. | |
| 1.15 | heading-24. | |
| 1.2 | heading-h3. | |
| 1.3 | heading-h4. | |
| 1.35 | heading-14. | |
| 1.55 | body-small, body-tiny. | |
| 1.6 — prose | body-large, body-default. |
Tracking
Negative tracking tightens large display type; positive tracking opens up small uppercase labels so they stay legible. Never use a value outside this scale.
| Aa Example | ◇ Token | Usage |
|---|---|---|
| Tightest | -0.05em — heading-hero, heading-64, heading-h1. | |
| Tighter LG | -0.04em — heading-56, heading-40. | |
| Tighter | -0.03em — heading-h2, data-hero, data-large. | |
| Tight | -0.02em — heading-24, data-medium, ui-nav. | |
| Snug | -0.01em — heading-h3, heading-h4. | |
| Normal | 0 — buttons, body copy, the default. | |
| Wide | .04em — ui-tag. | |
| Wider | .05em — data-tiny. | |
| Widest | .06em — label-small. | |
| Widest LG | .08em — label-default, ui-nav-index. | |
| Widest XL | .12em — label-tiny. |