Typography
A comprehensive set of typography tokens for the design system. Includes type scale, font weights, text sizes, and text colors — all mapped to CSS variables for consistent theming.
Heading 1
--ds-font-3xlHeading 2
--ds-font-2xlHeading 3
--ds-font-xlHeading 4
--ds-font-lgBody text for paragraphs and general content.
--ds-font-baseSmall text for captions and labels.
--ds-font-smExtra-small text for fine print.
--ds-font-xsLight — The quick brown fox jumps over the lazy dog.
font-weight: 300Regular — The quick brown fox jumps over the lazy dog.
font-weight: 400Medium — The quick brown fox jumps over the lazy dog.
font-weight: 500Semibold — The quick brown fox jumps over the lazy dog.
font-weight: 600Bold — The quick brown fox jumps over the lazy dog.
font-weight: 700xs — The quick brown fox jumps over the lazy dog.
--ds-font-xssm — The quick brown fox jumps over the lazy dog.
--ds-font-smbase — The quick brown fox jumps over the lazy dog.
--ds-font-baselg — The quick brown fox jumps over the lazy dog.
--ds-font-lgxl — The quick brown fox jumps over the lazy dog.
--ds-font-xl2xl — The quick brown fox jumps over the lazy dog.
--ds-font-2xl3xl — The quick brown fox jumps over the lazy dog.
--ds-font-3xlPrimary — The quick brown fox jumps over the lazy dog.
--ds-foregroundSecondary — The quick brown fox jumps over the lazy dog.
--ds-secondary-foregroundMuted — The quick brown fox jumps over the lazy dog.
--ds-muted-foregroundDestructive — The quick brown fox jumps over the lazy dog.
--ds-destructive