A picture of the rules is not the rules.

A feature never arrives as one screen. It arrives as four or five versions someone has to see before choosing, and then the chosen one gets polished. My team built each of those by hand.

Then Inception went white label. It ships to ADCB's credit committee as Credit Companion, so every one of those versions now existed twice, once per brand, on every release.

I was the bottleneck, and hiring would not have fixed it. The work was not hard. It was endless, and it was the wrong work to spend designers on.

I handed a screen to an AI tool to see how far it got. It came back close and wrong: colours near enough to pass, a corner radius it invented, a font it chose for itself. It was not being careless. Our system is a set of pictures. A designer looks at a button and knows it is a pill because a token says so. Software sees a shape that happens to be round.

So before building anything I stopped reading the Figma file and started measuring it. I pulled the resolved value of every bound token off the ADCB frames and compared it with ours, one by one.

That finding set the architecture. A system that treats theming as swapping colours cannot say "this button is a pill in one brand and a rectangle in the other", and it cannot change a typeface at all.

Three layers. Primitives hold the raw colour ramps and scales and no component ever touches them. Semantic tokens sit on top and are the only thing a component may read. A brand block overrides semantics and nothing else.

Components read semantic tokens only. No raw colour, no fixed corner size, no font name typed into a component. Ever.

Nobody keeps a rule like that by discipline alone, so I made it mechanical. A script reads every component and fails the build the moment it finds a raw value. The mistake is now impossible rather than merely detectable.

The most useful output was not the code. It was a list of defects that only showed up once both brands had to render from one source. None came from the rebuild. All five were already live.

Findings decay. Guards do not. Four scripts run before anything ships, and none of them is a checklist.

The contrast audit taught me something. I fixed the two ADCB regressions, re-ran it, and it still reported them. The script kept its own copy of the palette, and that copy went stale the moment the tokens changed.

Rewritten to read the generated token file directly, it went from 26 reported failures to 8 real ones. It had been wrong both ways at once: counting exempt borders and disabled text as defects, while missing that its own numbers were out of date.

One core, and everything builds from it. Nothing gets drawn twice.

A designer asks for a screen by name. An installed skill loads the tokens, the canonical markup, the icons and the rules, follows the product constraints, and returns the screen in both brands. That is the moment the library stopped being something the team reads and became something it uses.

Holding it together is one file, system.md. It tells a person or a model how to build here: the rule, how to switch brand, the shell measurements, what the product must never say, and what is still unfinished. It is also, word for word, the context we paste into Figma Make.

Worth being exact about the evidence. Four MCC committee views were generated rather than drawn early on: attention as tiles, attention as a list, the item drill-down, the in-meeting view. Four real answers to one question, side by side. That is what proved the approach was worth systematising. But they came before the token core existed and carry their own inline styles, so they are snapshots. The component gallery is the one surface running on the live system, and that is the real test: change a token and the gallery changes. The snapshots do not.

Every specimen below is the live system rendering both brands from one set of markup, captured today with the real typeface. Under each one: what the team used to do by hand, and what happens now.

The 41 is deliberate. Those tokens appear on no ADCB frame I could read, so they fall back to the Light value and say so, in the CSS and in the JSON. The gap closes with one screenshot of Foundation's variables panel from whoever holds that file. I would rather ship a system that says which part of itself is assumption than one that looks complete and quietly is not.

Still open, and named as such: the data table is partly built, the 41 inferred values need confirming, and a few primitives remain. The next call is not mine. Foundation gives us how a dialog should look; it cannot give us focus traps, keyboard navigation or the ARIA wiring underneath. The recommendation on the table is Radix for behaviour, our tokens for appearance, the shadcn pattern, and that decision sits with engineering.

I asserted something false, repeatedly. I searched one of the three Figma files, found no form controls, and concluded the system had no primitive layer. I wrote that into the documentation, the tooling and the plan. A colleague pushed back. The primitives were all there, in a different file, and my own notes had contained the evidence the whole time. The failure was not the search. It was turning a finding about one file into a claim about the system, then never re-testing it once it became load-bearing.

I verified too late. Two bugs shipped into a published page, a script error that rendered it empty and a font stack that silently fell back, because linting and bundling both passed. Neither of them opens the page. Now nothing publishes without being loaded and measured.

I would tokenise shape earlier. Radius and typeface were treated as incidental until the comparison forced them into view. On the next multi-brand system they go into the first token pass, not the third.

And the 41 inferred values exist because I designed around a missing Figma permission for two weeks instead of asking for it on day one.