Building an Accessible Design System with the CSS APIs Approach
summary
Presents a working design system built using CSS Custom Properties and CSS Layers as a declarative CSS API for overrides, organizing tokens as neutrons/electrons/protons and composing atomic components up to organisms (examples: search, grid, button). Describes a rem-based type scale, a meta element for light/dark modes, browser support notes (custom properties since 2017, layers since 2022), motion respecting prefers-reduced-motion, and recommends automated visual regression testing with pixel diffing; argues benefits outweigh the implementation effort.
AI-written summary · about
chapters (19)
- 0:00Accessible design system
- 1:23Design system goals
- 2:07CSS APIs theory
- 3:10Custom properties use
- 5:18CSS layers intro
- 7:01CSS layers order
- 8:49Cascade and layers
- 11:39Atomic API design system
- 13:05Design system atoms
- 15:11Typography and icons
- 16:59Typography with CSS vars
- 18:23Colors and shadows
- 19:48Light Dark API
- 21:11Atoms and molecules
- 22:37Interface composition
- 24:24CSS API exposure
- 25:26Visual integrity tests
- 26:32Dev tools and docs
- 26:53CSS APIs pros and cons
related talks
16mCSS, Design Systems & Developer Experience
56mModern CSS For Dynamic Component-Based Architecture
29mDesign at scale with Web Components (and ducks)
01h 11mCSS is Rad
30mDesign Systems are a Carnival! One Accessible Component, Many Pretty Masks
43mRethinking Colors in Design Systems: A CSS Approach to Idiomatic Design
29mCSS Architecture for Modern Web Applications
23mCSS-in-JS