Calibrate Design System

Typography

Calibrate’s typography tokens drive type size, weight, and rhythm. Compose with the typographic components first; reach for these tokens only when authoring custom type.

Font family

var(--clbr-typography-font-family-default)

Default font family. Use as the system's standard typeface.

Calibrate

var(--clbr-typography-font-family-mono)

Monospaced font family. Use for code, contexts where character-width consistency matters (e.g. avatar, badge), and occasional typographic flourishes.

Calibrate

Font weight

var(--clbr-typography-font-weight-regular)

Regular font weight. Use as the system's standard text weight.

Calibrate

var(--clbr-typography-font-weight-regular-plus)

Slightly heavier regular font weight. Use for subtly emphasised text where bold would be too strong.

Calibrate

var(--clbr-typography-font-weight-medium)

Medium font weight. Use for medium text emphasis (e.g. medium headings).

Calibrate

var(--clbr-typography-font-weight-bold)

Bold font weight. Use for strong text emphasis (semantic strong/b elements, small headings).

Calibrate

Text

var(--clbr-typography-text-body-xs)

Extra small body text. Use for the smallest body copy (microtext).

Calibrate

var(--clbr-typography-text-body-sm)

Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent.

Calibrate

var(--clbr-typography-text-heading-xs)

Extra small heading (h6-equivalent). Use for subsection headings.

Calibrate

var(--clbr-typography-text-body-md)

Default body text size.

Calibrate

var(--clbr-typography-text-heading-sm)

Small heading (h5-equivalent). Use for subsection headings.

Calibrate

var(--clbr-typography-text-body-lg)

Large body text. Use for emphasised copy (intro paragraphs, lede text).

Calibrate

var(--clbr-typography-text-heading-md)

Medium heading (h4-equivalent). Use for subsection headings.

Calibrate

var(--clbr-typography-text-heading-lg)

Large heading (h3-equivalent). Use for subsection headings and component-level titles (cards, panels).

Calibrate

var(--clbr-typography-text-heading-xl)

Extra large heading (h2-equivalent). Use for section headings.

Calibrate

var(--clbr-typography-text-heading-2xl)

2xl heading (h1-equivalent). Use for page titles.

Calibrate

var(--clbr-typography-text-heading-3xl)

Display heading (3xl). Use for hero/marketing headings.

Calibrate

var(--clbr-typography-text-heading-4xl)

Display heading (4xl). Use for larger hero/marketing headings.

Calibrate

var(--clbr-typography-text-heading-5xl)

Display heading (5xl). Use for the largest hero/marketing headings.

Calibrate

Text responsive

var(--clbr-typography-text-body-responsive-xs)

Extra small body text. Use for the smallest body copy (microtext).

Calibrate

var(--clbr-typography-text-body-responsive-sm)

Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent.

Calibrate

var(--clbr-typography-text-heading-responsive-xs)

Extra small heading (h6-equivalent). Use for subsection headings.

Calibrate

var(--clbr-typography-text-body-responsive-md)

Default body text size.

Calibrate

var(--clbr-typography-text-heading-responsive-sm)

Small heading (h5-equivalent). Use for subsection headings.

Calibrate

var(--clbr-typography-text-body-responsive-lg)

Large body text. Use for emphasised copy (intro paragraphs, lede text).

Calibrate

var(--clbr-typography-text-heading-responsive-md)

Medium heading (h4-equivalent). Use for subsection headings.

Calibrate

var(--clbr-typography-text-heading-responsive-lg)

Large heading (h3-equivalent). Use for subsection headings and component-level titles (cards, panels).

Calibrate

var(--clbr-typography-text-heading-responsive-xl)

Extra large heading (h2-equivalent). Use for section headings.

Calibrate

var(--clbr-typography-text-heading-responsive-2xl)

2xl heading (h1-equivalent). Use for page titles.

Calibrate

var(--clbr-typography-text-heading-responsive-3xl)

Display heading (3xl). Use for hero/marketing headings.

Calibrate

var(--clbr-typography-text-heading-responsive-4xl)

Display heading (4xl). Use for larger hero/marketing headings.

Calibrate

var(--clbr-typography-text-heading-responsive-5xl)

Display heading (5xl). Use for the largest hero/marketing headings.

Calibrate

Paragraph

var(--clbr-typography-paragraph-spacing-sm)

Tighter paragraph spacing. Use in dense layouts or compact prose.

var(--clbr-typography-paragraph-spacing-default)

Default vertical spacing between paragraphs.

var(--clbr-typography-paragraph-spacing-lg)

Looser paragraph spacing. Use in editorial layouts where extra breathing room aids reading.

Leading

var(--clbr-typography-leading-700)

Default leading dimension. A block size representing the line-height; divide by font size to derive a line-height ratio. An escape hatch for aligning line-heights across elements with different font sizes (e.g. a small counter beside a large heading) — reach for text composites or typeStep pairs first.

var(--clbr-typography-leading-750)

Leading step 750.

var(--clbr-typography-leading-775)

Leading step 775.

var(--clbr-typography-leading-800)

Leading step 800.

var(--clbr-typography-leading-850)

Leading step 850.

var(--clbr-typography-leading-900)

Leading step 900.

var(--clbr-typography-leading-925)

Leading step 925.

var(--clbr-typography-leading-950)

Leading step 950.

var(--clbr-typography-leading-1000)

Leading step 1000.

var(--clbr-typography-leading-1200)

Leading step 1200.

var(--clbr-typography-leading-1300)

Leading step 1300.

Measure

var(--clbr-typography-measure-tight)

Tighter measure (line length, in em). A more constrained alternative to the default.

var(--clbr-typography-measure-default)

Default measure (line length, in em). Use as the comfortable maximum width to keep line lengths readable.

Type step

var(--clbr-typography-type-step-50-font-size)

Type-step 50 font size. Smallest step.

var(--clbr-typography-type-step-50-line-height)

Type-step 50 line height.

var(--clbr-typography-type-step-100-font-size)

Type-step 100 font size. Tight-leading variant.

var(--clbr-typography-type-step-100-line-height)

Type-step 100 line height. Tight leading.

var(--clbr-typography-type-step-150-font-size)

Type-step 150 font size. Loose-leading variant of step 100.

var(--clbr-typography-type-step-150-line-height)

Type-step 150 line height. Loose leading.

var(--clbr-typography-type-step-200-font-size)

Default type-step font size. Type-steps are size/leading pairs for explicit typographic control without a full text composite (body/heading).

var(--clbr-typography-type-step-200-line-height)

Default type-step line height.

var(--clbr-typography-type-step-300-font-size)

Type-step 300 font size.

var(--clbr-typography-type-step-300-line-height)

Type-step 300 line height.

var(--clbr-typography-type-step-400-font-size)

Type-step 400 font size. Tight-leading variant.

var(--clbr-typography-type-step-400-line-height)

Type-step 400 line height. Tight leading.

var(--clbr-typography-type-step-450-font-size)

Type-step 450 font size. Loose-leading variant of step 400.

var(--clbr-typography-type-step-450-line-height)

Type-step 450 line height. Loose leading.

var(--clbr-typography-type-step-500-font-size)

Type-step 500 font size.

var(--clbr-typography-type-step-500-line-height)

Type-step 500 line height.

var(--clbr-typography-type-step-600-font-size)

Type-step 600 font size.

var(--clbr-typography-type-step-600-line-height)

Type-step 600 line height.

var(--clbr-typography-type-step-700-font-size)

Type-step 700 font size.

var(--clbr-typography-type-step-700-line-height)

Type-step 700 line height.

var(--clbr-typography-type-step-800-font-size)

Type-step 800 font size.

var(--clbr-typography-type-step-800-line-height)

Type-step 800 line height.

var(--clbr-typography-type-step-900-font-size)

Type-step 900 font size.

var(--clbr-typography-type-step-900-line-height)

Type-step 900 line height.

var(--clbr-typography-type-step-1000-font-size)

Type-step 1000 font size.

var(--clbr-typography-type-step-1000-line-height)

Type-step 1000 line height.

var(--clbr-typography-type-step-1100-font-size)

Type-step 1100 font size.

var(--clbr-typography-type-step-1100-line-height)

Type-step 1100 line height.

var(--clbr-typography-type-step-1200-font-size)

Type-step 1200 font size.

var(--clbr-typography-type-step-1200-line-height)

Type-step 1200 line height.

var(--clbr-typography-type-step-1300-font-size)

Type-step 1300 font size. Largest step.

var(--clbr-typography-type-step-1300-line-height)

Type-step 1300 line height.

Prose

var(--clbr-typography-prose-code-padding-block-default)

Default block padding for inline code. Use at smaller viewports.

var(--clbr-typography-prose-code-padding-block-lg)

Larger block padding for inline code. Use at larger viewports.

var(--clbr-typography-prose-code-padding-inline-default)

Inline (horizontal) padding for inline code.

var(--clbr-typography-prose-link-default-decoration-line)

Default decoration line for prose links.

var(--clbr-typography-prose-link-default-decoration-offset)

Default decoration offset for prose links, in em.

var(--clbr-typography-prose-link-default-decoration-thickness)

Default decoration thickness for prose links.

var(--clbr-typography-prose-link-hover-decoration-line)

Decoration line for prose links on hover.

var(--clbr-typography-prose-link-hover-decoration-offset)

Decoration offset for prose links on hover, in em.

var(--clbr-typography-prose-link-active-decoration-offset)

Decoration offset for prose links during active (pressed) state, in em.