Typography as composable tokens — design systems should empower, not dictate¶
Insight: Typography is the backbone of a design system but is often treated as an afterthought. The "infinite style" approach (creating new CSS classes for every variation) doesn't scale. Instead, typography should be built from composable token-backed props (variant, weight, color, size) that teams can combine within design language parameters. Design systems should empower teams to make thoughtful decisions, not control every combination.
Detail: Cusick advocates for a primitive-based Typography component where each visual property maps to a token: font-family: var(--theme-font-family-productive), font-size: var(--global-font-size-1000), etc. This enables: (1) Theming — all tokens respond to theme changes, (2) Flexibility — teams can compose valid combinations without requesting new styles from the DS team, (3) Scalability — no explosion of hardcoded classes. Two schools of thought: the "all-knowing DS" that forbids overrides (Cusick learned the hard way this never works) vs. the "DS as product and service" that empowers teams. He recommends the latter. "Design systems teams bog themselves down by trying to control everything."
Sources
- Josh Cusick — "Flexible typography in React" (2025-05-22)