Component Library 2.3.12 (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
xxl 48 / 56 40 / 48 700 page headings, stat cards
xl 40 / 48 32 / 40 700 panel headings
l 32 / 40 24 / 32 700 card headings
m 24 / 32 24 / 32 700 card headings
s 22 / 28 20 / 28 600 subtitles (incl. .panel__subtitle)
xs 18 / 26 16 / 24 400 body text, buttons, links
xxs 14 / 16 13 / 18 400 captions

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

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

Headings

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

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

Text Utilities

Class Token Size
.medium-text xs 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. On dark panel backgrounds, link colour automatically switches to --link-light.

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).