Typography
The heading, body, label, and mono text styles used throughout the design system.
Text styles
Composite classes, e.g. heading-01-medium, body-03-regular — this is how typography is meant to be consumed directly in Vue templates, not via standalone font-size/weight/tracking utilities composed by hand.
heading (medium also available)
The quick brown fox jumps over the lazy dog
typography.text-style.heading-01-regular
The quick brown fox jumps over the lazy dog
typography.text-style.heading-02-regular
The quick brown fox jumps over the lazy dog
typography.text-style.heading-03-regular
The quick brown fox jumps over the lazy dog
typography.text-style.heading-04-regular
The quick brown fox jumps over the lazy dog
typography.text-style.heading-05-regular
body (light, medium also available)
The quick brown fox jumps over the lazy dog
typography.text-style.body-01-regular
The quick brown fox jumps over the lazy dog
typography.text-style.body-02-regular
The quick brown fox jumps over the lazy dog
typography.text-style.body-03-regular
The quick brown fox jumps over the lazy dog
typography.text-style.body-04-regular
The quick brown fox jumps over the lazy dog
typography.text-style.body-05-regular
label (medium also available)
The quick brown fox jumps over the lazy dog
typography.text-style.label-01-regular
The quick brown fox jumps over the lazy dog
typography.text-style.label-02-regular
The quick brown fox jumps over the lazy dog
typography.text-style.label-03-regular
mono
The quick brown fox jumps over the lazy dog
typography.text-style.mono-01
The quick brown fox jumps over the lazy dog
typography.text-style.mono-02
The quick brown fox jumps over the lazy dog
typography.text-style.mono-03
The quick brown fox jumps over the lazy dog
typography.text-style.mono-04
The quick brown fox jumps over the lazy dog
typography.text-style.mono-05