Five long-form layouts — classic sticky TOC, magazine cover, editorial split, product-docs hybrid, and series immersive with progress + sticky actions.
Building accessible design systems that scale
How accessible primitives, semantic tokens, and CSS-first theming combine into a component library teams can ship with.
Alex Rivera
Lead Engineer
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.
“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.
Callout
Prefer semantic names (`--primary`, `--border`) over raw hex in components so themes stay portable.
Conclusion
Accessible behavior, flexible styling, and low runtime cost make a stack teams can adopt once and reuse everywhere.
Alex Rivera
Lead Engineer
Builds design systems and component libraries for startups and product teams.
Building accessible design systems that scale
Primitives, tokens, and CSS-first theming — a magazine-style long read for product teams.
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.
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 while components stay portable.
Conclusion
Accessible behavior, flexible styling, and low runtime cost make a stack teams can adopt once and reuse everywhere.
Alex Rivera
Lead Engineer
Building accessible design systems that scale
An editorial take on primitives, tokens, and CSS-first theming for product teams.
Alex RiveraMarch 18, 20268 min read
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 every quarter.
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 while components stay portable.
Conclusion
Accessible behavior, flexible styling, and low runtime cost make a stack teams can adopt once and reuse everywhere.
Alex Rivera
Builds design systems and component libraries for startups and product teams.
Related reading
Building accessible design systems that scale
A product-docs style walkthrough of primitives, tokens, and CSS-first theming.
Overview
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.
Tip
RecommendedStart from primitives that already own keyboard and ARIA — then layer visual tokens, not the other way around.
Primitives
Primitives should own focus traps, keyboard navigation, and ARIA roles. You style the surface; behavior stays consistent out of the box.
:root {
--primary: #2563eb;
--radius: 0.75rem;
--border: oklch(0.9 0 0);
}Tokens
Keep colors, radius, and spacing in CSS variables. Light and dark modes swap tokens without shipping a theme runtime.
Warning
Avoid hardcoding hex in components. Raw values break when product teams remap brand tokens later.
Ship checklist
- Keyboard paths verified for every interactive primitive
- Light and dark themes swap via CSS variables only
- Focus rings visible at 375 / 768 / 1280 viewports
Building accessible design systems that scale
Primitives, tokens, and CSS-first theming — part of a continuing series.
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 agoThe callout on semantic tokens finally clicked for our design sync.
- MK
Maya Kim
5h agoWould love a follow-up on focus rings inside nested dialogs.