All foundations
THE FOUNDATION

Typography

A clear voice at every scale.

Version 1

About typography

Make hierarchy easy to understand at every size. UX Prototype uses DM Sans by default, with six alternative typeface options. Typography roles, spacing, and accessible behavior remain consistent when the family changes.

Our typography principles

HierarchyUse size, weight, and spacing to distinguish titles, labels, and body content.
LegibilityChoose clear forms and readable sizes. Check line length, contrast, and real interface copy.
WhitespaceLet text breathe. Generous leading and separation support reading without fragmenting the content.

Font families

The interface uses DM Sans, with six alternatives available in Themes. IBM Plex Mono distinguishes code and token names. A font change preserves semantic roles, accessible sizing, and wrapping behavior.

AaClear ideas.
Considered details.ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789
DM Sans · interfaceThe default for product controls, navigation, and reading.
{ }Design in systems.const theme = 'blue';
0123456789 → () [] </>
IBM Plex Mono · codeA deliberate monospace treatment for technical content.

Text formatting

Formatting adds emphasis and context. Keep each treatment purposeful and do not use formatting as a substitute for a meaningful semantic element.

Thoughtful design
ItalicUse for an alternate voice or emphasis.
Thoughtful design
StrikethroughIndicate a superseded value without erasing it.
Thoughtful design
UnderlineReserve underlining for links in normal interface copy.

Font weight

Use a deliberate weight hierarchy. Regular is suited to reading, semibold highlights a label, and bold adds stronger emphasis.

Aa 012
Regular · 400Comfortable reading.
Aa 012
Semibold · 600Concise emphasis.
Aa 012
Bold · 700Titles and important emphasis.

Text alignment

Start alignment supports normal reading and adapts to writing direction. Center brief display copy sparingly. End alignment helps readers compare numeric values.

A shared language

Clear decisions help

people build together.

Start alignedDefault for paragraphs and labels.
A shared language

Clear decisions help

people build together.

Center alignedUseful for short, balanced headings.
Amount

$12.00

$148.50

End alignedUseful for numeric columns.

Line height

The source uses 150% for body copy and 120% for headings, rounded to the 4px rhythm where specified. Keep enough space between lines for accents and tall glyphs.

Good documentation gives people
a clear path from an idea
to a working experience.

Body · 150%A 16px paragraph starts from a 24px line height.
One foundation.
Many possibilities.
Heading · 120%Compact title leading preserves the visual relationship between lines.

Paragraph spacing

Separate paragraphs visibly. A two-em gap is the source’s illustration; choose defaults to fit the content while supporting reader overrides without clipping.

Shared decisions give every component a familiar structure.

2em paragraph separation

Clear documentation explains how the parts fit together.

A visible pause between ideasThe highlighted spacer is twice the paragraph’s font size.

WCAG 1.4.12 requires support for user-applied spacing, including paragraph spacing of at least 2× the font size. It does not prescribe that value as the default for every paragraph.

Line length

The source’s preferred reading measure is 45–75 characters. The 80-character reference belongs to WCAG’s AAA visual-presentation criterion. Measure is a reading aid; allow text to reflow freely on small screens.

45 characters
75 characters
80 characters
100 characters
Compare four reading measuresThe bars are proportional schematics of 45, 75, 80, and 100 characters. The 100-character example illustrates a line that is harder to track.