Design Systems that Engineers Actually Use

Global primitives (values) → Semantic aliases (intent, e.g. action.primary.bg) → Component overrides. A component may only reference the middle layer, so a mode, a brand or a white-label client changes values, never components.

A mode or a brand is a value set over the same keys, never a second file. At IBWT light and dark are one Figma collection resolved twice, every key carrying the same variable id in both. At upSWOT a bank supplies values into the third layer and never touches the first two. At SaldoApps the decision is made once and each platform expresses it in its own conventions. Where the pipe is not automated I say so: the colour tokens at IBWT went from Figma to the repository by hand, and the full version says as much.

Components live in Storybook and production repos. Designers and engineers review the same living interactive states, keyboard focus, and edge-case permutations — and Figma is the record of what was decided, not the place it is enforced.

Usage rules written beside the components: when to reach for one, when not to, what each state means. Then something that can fail. At IBWT the legacy violations are frozen at a per-file baseline and the count may never go up — zero is never required, growth is never allowed. At SaldoApps it was a recurring cross-platform session where per-app divergence became a documented decision rather than a thing somebody noticed later in review.

Where a brand touchpoint is in the product’s hands, it is a theme over the product’s tokens, not a parallel system with its own hex values. That is how upSWOT could wear a different bank per client, how light and dark at IBWT keep identical geometry and differ only in values, and how this site renders its public and private tiers from one dictionary. When I inherit a brand, I match it exactly and extend it only where the interface has no pattern for what is needed — on the 2026 assignment the agent channel reused a colour already in the product’s palette, and the one addition was named as one. What this page does not show is an identity built from nothing — a mark, a type system, a voice. My brand work has run the other way, from an existing identity into the product.