Design Tokens Propagation Simulator

A design system's power comes from indirection: components don't hold their own colors and spacing, they reference shared tokens. This simulator makes that mechanism visible. A glowing core holds two tokens — an accent hue and a spacing unit — connected by edges to eight UI components arranged around it. In Design System mode, dragging a token slider sends the new value cascading down every edge, and every component eases toward it within moments, staying perfectly consistent no matter how often the tokens change. Switch to Ad-hoc mode and the edges go dashed: each component now holds its own hardcoded copy of color and size, ignores the tokens entirely, and randomly drifts further out of sync every frame — the slow-motion version of a codebase where "just this one button" got a literal hex value instead of a variable. Watch the consistency score to see how quickly disciplined propagation beats manual upkeep.