CCD Design System

One file. Every token, style, and component for three apps, built from scratch and held in a single source of truth.

Concordium is a privacy-first layer-1 blockchain with three apps: a mobile wallet, a browser-extension wallet, and Concordium ID. All three worked, but nothing held them together. No shared foundation, no token layer, no library. I came in as the senior product designer and the only person positioned to build the system, alongside shipping live features.

A system was the obvious need. Adoption was the real problem. Three apps were each defining their own buttons, colours, and spacing, every shared element living in three slightly different versions. And this is a wallet on a privacy-first chain, where visual inconsistency doesn't just look unpolished, it undermines trust. The system had to make coherent the default.

One file, organised so anything is findable. Every variable, style, and component for all three apps in a single source of truth, not a foundation with libraries branching off it. Shared foundations live on their own pages; anything app-specific sits on its product page. One place to look, one place to change, nothing to keep in sync.

Components built to flex, every state inside one definition. Variants, states, and sizes handled through properties, not scattered copies. Spacing, colour, and type bind to the same variables that feed the rest of the system, so one token change reshapes every instance at once. A designer drops them in and trusts them; an engineer reads them straight off the file.

From Figma variables to native code, automatically. Variables export as JSON, run through Style Dictionary, and get consumed directly by each platform. Change a colour once in Figma and it propagates everywhere with nobody hand-copying a value. The token layer, the part most prone to silent drift, is automated end to end.

A versioned workflow people would actually follow. Changes happen on a branch under a version number, then merge, republish, and export down the pipeline. The frontend leads were experienced engineers who'd always read values off a mockup and were openly skeptical of tokens. I scoped it, documented every step, and tested it against live work until the people who resisted hardest ended up relying on it.

All three Concordium products now run on one design system, every token and component in a single file, fed into each codebase through one shared pipeline.