Design Tokens Propagation Simulator

Design Token Propagation

Accent hue token 225°

Spacing unit token 1.0×

Drift speed (ad-hoc only) 0.5

Consistency

–

In sync

–

Avg deviation from token

–

How it works

The bright core is the design system's single source of truth: an accent-hue token and a spacing-unit token. In Design System mode every component — button, card, input, nav, modal, badge, tab, toggle — reads those tokens live, so nudging a slider sends a value ripple down every edge and every cube's color and size ease toward the new token instantly. In Ad-hoc mode the edges go dashed and grey: each component instead holds its own hardcoded color and size, so the token sliders do nothing to them, and every frame each one randomly drifts a little further from where the token now sits — exactly what happens when a codebase copies literal hex values and pixel sizes into every component instead of referencing shared variables.

System:  value_i(t+dt) = value_i(t) + (token - value_i(t)) · k · dt
Ad-hoc:  value_i(t+dt) = value_i(t) + η_i(t),   η_i ~ U(-driftSpeed, driftSpeed)

Accent hue token — the system's single color source; only components in Design System mode follow it.
Spacing unit token — the system's shared sizing scale; drives cube size and edge length when propagated.
Drift speed — how fast hardcoded components wander from the token in Ad-hoc mode; 0 freezes them where they last matched.
Mode — toggles whether components subscribe to the tokens (propagation, always consistent) or hold their own copies (drift, consistency decays).

Real-world relevance: this is the core argument for a design-tokens architecture (Figma variables, CSS custom properties, Style Dictionary) over copy-pasted values — a token change is a single edit that reaches every consumer, while hardcoded values require finding and updating every occurrence by hand, and untouched ones silently drift out of brand.

Design token core Component in sync Component drifted

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.