Atlas.
Zero drift from repo to production, for a brand that measures its audience in millions.
Atlas is the design system of a major automotive brand's web platform: national reach, an enterprise CMS on the receiving end, and developer teams who had learned to distrust design handoffs. The mandate was a foundation that cannot lie: one source of truth feeding design and code with equal fidelity.
Every design system dies the same death: drift. Atlas was built so that death is not possible.
Figma says one thing. The CSS says another.
And nobody can prove which one is right. At enterprise scale that ambiguity compounds daily: every handoff becomes a negotiation, every component a small archaeology project.
Atlas was the second validation of the hypothesis Meridian proved first. This time in the most traditional of territories: a corporate web platform where the system had to serve designers in Figma and developers in an enterprise CMS, from one repository, without a single manual sync.
The repo is the truth. Everything else is a projection.
One W3C-DTCG token source lives in the repository: 162 variables and 18 text styles across 15 sets. Primitives underneath, semantic color contexts (light and dark) and responsive breakpoint modes above. From there, everything is generated: Figma variables through a plugin, CSS custom properties, SCSS maps and TypeScript objects through Style Dictionary, and an installable package for the client's CMS (AEM).
Nothing flows backward. If a designer hand-edits Figma, the system detects the drift and sweeps it. If a spec changes, a build hash flags every affected component automatically. Consistency stopped being a meeting and became a property of the pipeline.
Change the token. Watch everything follow.
This is the pipeline, working. Pick a new value for one semantic token, the brand's primary action color, and watch it propagate: source, design tool, production code. One edit, three surfaces, zero meetings.
In Atlas this propagation is guarded: parity checks to 1/255 color tolerance, spec hashes on every component, drift swept on sight.
Follow one red through the stack.
Four layers separate a hex value from a component decision. Each one answers a different question, and the answer travels by alias, never by copy. The brand red, traced top to bottom:
Fifty variants, zero hand-painted.
The button alone covers fifty variants: four emphases by five states by two sizes in solid, plus a glass family over light and dark backdrops. None of them was drawn. Each one is a declarative spec the engine renders, every fill and radius bound to a token. This matrix is generated the same way, right now, from the same logic:
Solid family, size md. Every visual property above resolves from the token map in this page's source. Change one token, the row re-renders: that's the whole point.
Glass that refuses to be illegible.
The glass surface floats over photography and media the system doesn't control. So legibility can't be a designer's guess: it's computed. The component samples the backdrop behind it, picks the right pairing (ink text over light media, white over dark), and steps up its tint opacity along the token scale until the label clears the contrast floor. Swap the backdrop, or feed it any image of yours:
…………The image never leaves your browser. The real tokens: glass/tint/on-dark @ 0.14 and on-light @ 0.22, with hover and pressed steps up the same scale, and glass/blur = 16.
The instrument that builds and audits all of this, an eight-tool Figma plugin, runs in production on Atlas today. Meet it in The Method
Chosen once, enforced forever.
One-way flow, no exceptions.
Repo to Figma to code. Never backward. The moment edits can flow upstream from a design file, the truth has two homes and therefore none. Drift isn't fixed; it's made impossible.
Responsive without a token-name explosion.
Type and spacing respond through breakpoint modes, not through suffixes multiplying the vocabulary. One text style is responsive by what it's bound to, not by what it's called.
Components are described, not crafted.
Every component is a declarative manifest: anatomy, variants, bindings, build spec, interpreted by one generic engine. Adding component fifty costs the same as adding component five. That's the difference between a library and infrastructure.
Every change knows why it happened.
93 architecture decision records in 22 days. When someone asks in a year why error red isn't orange, the answer exists, is dated, and links to its alternatives. Institutional memory, by design.
The handoff installs; it doesn't explain.
Developers received tokens as CSS, SCSS and TypeScript plus an installable CMS package with a working component: dialogs, styles, policies included. A handoff you can run beats a handoff you can read.
Twenty-two days, audited.
Twenty-two days, end to end.
From a blank repo to an installable handoff, through five disciplined phases. No phase skipped, no documentation debt deferred: the decision records were written while it happened, not reconstructed after.
The method survived a change of world.
Meridian proved the hypothesis in a SaaS product. Atlas proved it somewhere much less forgiving: a traditional corporate platform, an enterprise CMS, developer teams with hard requirements and no patience for design-tool theater. Different domain, same primitives, same method. And it shipped again.
The dynamic of the project put architecture, tokens, plugin and documentation in one pair of hands, working in constant dialogue with the client's design and engineering teams as first users. Which is exactly why everything is written down: a system is only real when it works without its author in the room.