TYPOGRAPHY
TYPE SCALE

Clear type makes everything easier

Preview the type hierarchy, text treatments, and accessible contrast styles.

DISPLAY HEADING · 32PX

A little clarity goes a long way.

Use a confident display style to introduce a page, focus attention, and set a clear tone.

Manrope · BoldLine height · 1.2
HEADING HIERARCHY

Heading one 32px

Heading two 24px

Heading three 19px

Heading four 16px

BODY COPY

Readable at every size

Good typography makes interfaces easier to scan and more comfortable to use. Keep paragraphs concise, use enough line height, and maintain clear contrast between text and background.

Emphasis belongs here for important details, while inline links should remain easy to recognize.

Caption text · 13px
“The details are not the details. They make the design.”— Charles Eames
TEXT TREATMENTS

Meaningful color

Muted supporting text

✓ Positive status text

! Attention status text

× Error status text