Design Systems, WCAG, and a Possible CSS “Base” Unit

Three recent frontend pieces got me thinking about how they might interlock. Hidde’s take on whether components can conform to WCAG, Joas’s guide to automating design systems, and Zell’s suggestion for a new CSS unit between root and relative sizing all circle a similar theme: dependency and context.

The core observations break down like this:

  • Component-level WCAG is a semantic trap. You can optimize a single component for accessibility, but real conformance happens on complete pages where components must work together.
  • Automation has a blind spot. Updating a token in a design system propagates everywhere instantly—but you still can’t know whether that change breaks another component downstream.
  • A “base” CSS unit could help. The idea is to designate one element as a typographic root so others inherit its font-related properties for consistent vertical rhythm, regardless of where they appear in the markup.

That last point sparks some questions worth exploring:

  • Could a base unit make components more interoperable? For instance, a button could pick up a font size based on whatever component it lives in—similar to container query units, but without extra wrapper elements.
  • Would such a mechanism let design system changes cascade more fluidly between components?
  • If properties inherit through a base element, do components on a full page become better positioned for WCAG conformance?
  • And does this overlap with CSS @scope in any meaningful way?

Shower thoughts, sure—but worth chewing on when components, systems, and standards keep converging.