Foundations / Typography

Typography

The typeface Alpha sets everything in, the weights it offers, and the size and line-height steps a component draws from. Size and line height are independent scales rather than one paired set, so a role picks a step from each.

On this page

--font-bodysame in both modesvar(--font-lato, 'Lato'), var(--font-nwo, 'Source Sans Pro'), -apple-system, BlinkMacSystemFont, Helvetica, sans-serif
--font-nwosame in both modes'Source Sans Pro'
--font-latosame in both modes'Lato'
--font-nunitosame in both modes'Nunito'
--font-intersame in both modes'Inter'

--font-lato is primary — every component reads it through --font-body. --font-nwo is brand-reserved. --font-nunito and --font-inter are the secondary and tertiary alternates the palette declares; nothing in Alpha renders them yet.

A token names a family, not a webfont — setting --font-lato to the string 'Lato' does not load it. Bring the typeface yourself, with next/font or an @font-face you already declare, or override --font-lato / --font-nwo to point at a face you do ship.

--font-weight-lightsame in both modes300
--font-weight-regularsame in both modes400
--font-weight-boldsame in both modes700

Size and line height are two independent scales, not one paired one — a role pairs a size step with a line-height step of a different name. H4 Desktop, for instance, is --font-size-lg (18px) with --line-height-sm (22px), not --line-height-lg (28px). Read the step names as independent scales and pick the pair a design calls for, rather than assuming matching names belong together.

Font size

--font-size-4xlsame in both modes40px
--font-size-3xlsame in both modes28px
--font-size-2xlsame in both modes24px
--font-size-xlsame in both modes20px
--font-size-lgsame in both modes18px
--font-size-mdsame in both modes16px
--font-size-smsame in both modes14px
--font-size-xssame in both modes12px

Line height

--line-height-2xlsame in both modes48px
--line-height-xlsame in both modes32px
--line-height-lgsame in both modes28px
--line-height-mdsame in both modes24px
--line-height-smsame in both modes22px
--line-height-xssame in both modes16px

Modal is the first component drawn from this scale. Everything else — Button, Card, Dropdown and the rest — still carries its own literal font-size/line-height pair, matching one of the values above, until it migrates.