Typography tokens provide a consistent, modular system for all text across the products. They are designed for clarity, readability, and hierarchy, while remaining flexible across devices.

The system uses three font families — a primary sans-serif for body and UI, a secondary serif for headings, and a tertiary monospace for code and labels. For the full list of typography token values, see the Tokens page.

Font Sizes

The full type scale used across the system. Reference these tokens when setting font sizes on any element.

The scale uses a progressive step approach: +2px in the body range, +4px in the heading range, and +8px in the display range. This gives more granularity where it matters most.

Headings

All headings use var(--font-secondary) (RecifeText) at var(--font-weight-regular) (400). Each level steps down in size to create a clear visual hierarchy.

<h1>Build systems that scale with your ambition</h1>
<h2>Every detail contributes to the whole</h2>
<h3>Structure creates clarity in complexity</h3>

Headings use var(--line-height-m) (1.3) so multi-line titles have breathing room. On mobile (≤768px), h1 and h2 step down a level to prevent giant titles from dominating small viewports.

Body Text

The default paragraph style used for all running content. The var(--text-body) token controls the base size globally — changing it updates paragraphs, inputs, code, tables, and buttons at once. Size modifier classes let you step up or down from the default.

<p class="text-size-xlarge">Lead paragraph text.</p>
<p class="text-size-large">Introductory text.</p>
<p>Default body text (no class needed).</p>
<p class="text-size-small">Smaller supporting text.</p>
<p class="text-size-xsmall">Captions and metadata.</p>

Eyebrow

A small, uppercase label used to provide context above headings, within sections, or inline with other content. The .eyebrow class works on any element — <p>, <span>, <h2>, or anything else.

<!-- On a paragraph -->
<p class="eyebrow">Case Study</p>
<h2>Building a design system from the ground up</h2>

<!-- On a span (inline) -->
<span class="eyebrow">Latest Update</span>

<!-- On a heading (semantic heading, eyebrow style) -->
<h2 class="eyebrow">Section Label</h2>

Blockquote

Used for pullquotes and highlighted passages. Renders in the secondary serif font with a left border accent.

<blockquote>
  <p>Good typography is invisible. Bad typography is everywhere.</p>
</blockquote>

Links

Links use text-color underlines with a hover transition. The default state shows var(--text-plain) text with a var(--text-link) coloured underline. On hover, the text colour shifts to var(--text-link) and the underline moves down slightly. External links (target="_blank") automatically show a share icon via ::after that inherits the link colour.

<!-- Inline link -->
<p>Read the full <a href="/brand">brand guidelines</a> before starting.</p>

<!-- External link (icon added automatically) -->
<p>Typography is powered by <a href="https://fonts.google.com" target="_blank" rel="noopener noreferrer">Google Fonts</a> for web delivery.</p>

Font Families

The system uses four font stacks, each with a distinct role.

body { font-family: var(--font-primary); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); }
code, pre, kbd { font-family: var(--font-quaternary); }

Font Weight

Available weight values from light to black. All headings default to regular weight.

font-weight: var(--font-weight-bold);

Line Height

Vertical rhythm values from tight display text to loose body copy. Headings use tighter values; body text uses looser values for readability.

line-height: var(--line-height-l);

Letter Spacing

Tracking values used for labels, eyebrows, and display text. Values are em-based so they scale proportionally with font size.

letter-spacing: var(--letter-spacing-xl);