Component Library 2.13.1 (configured with Dummy App)

Typography

Typography

Font family: Lato, Arial, Helvetica, sans-serif Base size: 18px (XS), 16px below 1024px Line height: 26px (XS), 24px below 1024px

Type scale

The typography scale is a named token set defined in utilities/_mixins.scss ($type-scale for large screens, $type-scale-small for ≤1024px). It is the single source of truth — components apply a step with a mixin rather than hardcoding font sizes. Both mixins are responsive: they emit the small-screen step automatically below 1024px.

  • @include type-style(<token>) — full style (size, line height, weight, tracking)
  • @include type-size(<token>) — size + line height only, for elements that keep their own weight (buttons, links, table cells)
Token Large (size / LH) Small ≤1024 (size / LH) Weight Use for
xxxl 48 / 56 40 / 48 700 page headings, stat cards
xxl 40 / 48 32 / 40 700 panel headings
xl 32 / 40 24 / 32 700 card headings
l 24 / 32 24 / 32 700 card headings
m 22 / 28 20 / 28 600 subtitles (incl. .panel__subtitle)
s 18 / 26 16 / 24 400 body text, buttons, links
xs 16 / 24 16 / 24 400 chrome: header, nav, pagination
xxs 14 / 16 13 / 18 400 captions
button 18 / 24 16 / 24 700 button labels, the s size on the button's 24px leading

xxxl, xxl and xl carry -1.5px tracking on large screens (xl relaxes to 0 on small). l and xs are the same on both screens.

.text-card__subtitle { @include type-style(m); }
.media-card__link    { @include type-size(s); } // keeps its link weight

Headings

Element selectors map directly onto the scale and inherit its responsive sizing:

Element Token Large Small ≤1024
h1 xxxl 48 / 56 40 / 48
h2 xxl 40 / 48 32 / 40
h3 xl 32 / 40 24 / 32
h4 l 24 / 32 24 / 32
h5 m 22 / 28 20 / 28

Text Utilities

Class Token Size
.medium-text s 18px / 26px (16/24 on small)
.caption xxs 14px / 16px (13/18 on small)
.bold — font-weight: 700
.italic — font-style: italic

Default links use --text-link colour with a 2px underline and 4px offset. A dark surface publishes --link-light as --text-link (see Colours, Surfaces).

Font Weights

Lato is loaded in weights: 100, 300, 400, 600, 700, 900 (with italic variants for all but 600). The scale uses 400 (Regular), 600 (SemiBold — subheadings) and 700 (Bold — headings).