CCD Design System
One file. Every token, style, and component for three apps, built from scratch and held in a single source of truth.
01 CONTEXT
Three apps, one system
Concordium is a privacy-first layer-1 blockchain with three apps: a mobile wallet, a browser-extension wallet, and Concordium ID. All three were live and growing, with no token layer or component library behind them.
Concordium brought us in to build that foundation as one unified system, alongside shipping live features.
02 PROBLEM
Adoption was the real problem
Building the library was the tractable part. A design system only works if the people downstream use it, and most of them had never worked with one. Three pressures defined the job.
Three versions of everything
Each app defined its own buttons, inputs, colours, and spacing. A family resemblance existed, with nothing enforcing it. Every change had to be made three times, three chances to drift.
Inconsistency reads as risk
Users here confirm transactions and guard recovery phrases. Inconsistent screens undermine the sense that the product is secure and considered. The system had to make coherence the default.
No appetite for tokens
The frontend leads had always read values straight off a mockup. Tokens meant an unfamiliar pipeline and a source of truth they hadn't built. The early reaction was resistance, and reasonably so.
03 WORK
The system in four layers
The system came together across four fronts, built in parallel: the file, the components, the token pipeline, and the workflow that kept it maintained. The craft was in the components and tokens. The workflow made it stick.
LAYER 01
One file for everything
Every variable, style, and component for all three apps lives in one file. Shared foundations, icons, buttons, and forms have their own pages, and anything app-specific sits on its product page. An intro page carries the versioning system and changelog. One place to look, one place to change, nothing to keep in sync across files.
LAYER 02
Every state accounted for
Each component carries its full range in one definition: variants, states, and sizes handled through properties. Spacing, colour, and typography bind to system variables, so a token change reshapes every instance at once. A designer can drop a component in and trust it. An engineer can read it straight off the file.
LAYER 03
Figma variables to native code
Variables export as JSON, run through Style Dictionary, and land in each platform's codebase in its native format. A change made once in Figma propagates everywhere, with no one hand-copying a value. The token layer, the part most prone to silent drift, was automated end to end, while components were coded manually against the designs.
LAYER 04
A versioned workflow
Changes happened on a branch under a version number. When the design was done, the branch was merged, the library republished, and any changed tokens exported down the pipeline. Every step was documented in Confluence.
04 DECISIONS
Two calls worth walking through
Most of the work was technical and uncontroversial. These two calls weren't, and they're worth showing the reasoning behind.
CALL 01
Build one unified file
The conventional structure for a multi-product system is a shared foundation file feeding separate, linked product libraries. The alternative: everything, foundations and all three products, in a single file.
WHAT WE CHOSE
A single file. For a team this size, one source of truth meant no cross-file linking to maintain, no version skew, and one place to look. The simplicity paid for itself daily.
TRADE-OFF
A single file scales less gracefully than a federation as team and product count grow. Concordium was nowhere near that ceiling, and the daily cost of linked libraries was the more immediate price.
CALL 02
Build the token pipeline anyway
The path of least resistance was handing engineers the Figma file to read values off, the way they always had. The harder path was the JSON-to-Style-Dictionary pipeline and an unfamiliar workflow they were openly skeptical of.
WHAT WE CHOSE
The pipeline. We scoped it, documented every step, and tested it against live product work until it proved itself. The resistance was reasonable, so we earned past it rather than overriding it.
TRADE-OFF
It cost time up front and spent goodwill before earning any back. But hand-copied values are exactly where a design system silently rots. Automating that layer was worth the early friction.
05 OUTCOME
What shipped
All three products run on the system. Designers and engineers reach for the same tokens by the same names, fed into each codebase through one pipeline. The engineers who pushed back hardest on tokens ended up relying on them. None of it existed at the start.
One lesson carried forward: write the conventions down as they form. A lot of the rules lived in review conversations, which works with one designer and slows onboarding the next. Documenting as you go makes the system easier to hand off.
- 3
- apps on one systemMobile wallet, browser wallet, and Concordium ID, all drawing from the same source of truth.
- 1
- file, one source of truthEvery variable, style, and component for all three apps in a single unified file.
- 1
- design system, built to lastConventions, design language, components, and the branching and versioning workflow, all built from scratch.
- 100%
- token coverage to codeEvery value in code comes from exported variables, none hand-copied.
