Semantic tokens have been a helpful concept in the world of design systems. Their utility is clear when supporting dark mode and other branding needs. While the construction of these is well understood for style properties such as color and typography, other facets of design have eluded us for some time.

How might we support semantic spacing tokens?

Complementary Space was the result of a 6-month long exploration to fully understand what a semantic token is meant to solve and how we can reframe our current methods of applying space to user interfaces.

The site comes with visual examples built using vanilla web components for responsiveness and themability. Code samples describe a potential method of use; where the site itself uses an early version of this approach. Print styles were also added for readability. A custom syntax highlighting script was written specifically to highlight CSS custom properties. Footnotes are included to go deeper into concepts that were considered in the research.