Design Systems HandbookChapter 3 of 8

Building accessible design systems that scale

Primitives, tokens, and CSS-first theming — part of a continuing series.

ARAlex RiveraMarch 18, 20268 min read
Horizontal workspace cover for the design systems handbook

Introduction

A production design system speeds up delivery and keeps accessibility a default. Pair unstyled accessible primitives with semantic tokens and you get a foundation that scales across products without rewriting the hard parts.

Accessible primitives

Primitives should own focus traps, keyboard navigation, and ARIA roles. You style the surface; behavior stays consistent out of the box so every product inherits the same interaction contract.

“Accessibility works best when it is the default path, not a checklist at the end.”

Tokens and theming

Keep colors, radius, and spacing in CSS variables. Light and dark modes swap tokens without shipping a theme runtime — consumers stay in control of the look.

Conclusion

Accessible behavior, flexible styling, and low runtime cost make a stack teams can adopt once and reuse everywhere.

Up next

Token migration playbook

Discussion

23 comments
  • SC

    Sarah Chen

    2h ago

    The callout on semantic tokens finally clicked for our design sync.

  • MK

    Maya Kim

    5h ago

    Would love a follow-up on focus rings inside nested dialogs.