Design systems that survive a rebrand

A design system is supposed to be the thing the next CMO can't break. In practice, most of them get rebuilt with the next leader. The reason isn't usually craft — it's that the system was authored as a fixed expression rather than as a structure.

The systems that survive separate three layers: primitive tokens (the colours, type, spacing, motion the design language is made of), semantic tokens (the names that apply primitives to meaning — surface-canvas, action-primary), and component tokens (the spec each component pulls). When a rebrand happens, only the primitive layer changes.

We model the layers in code (CSS custom properties, registered with `@property` where animation matters) and in Figma (variables, modes, library tokens). Same names. Same hierarchy. Both serve as the contract between the design and engineering teams.

The next CMO can change a hex code and rerun the build. They can change a font and the tokens cascade. What they can't easily do — and shouldn't easily do — is rip out the system's structure. That's the protection a real system buys you.