One system. The brand is one file.
This portfolio runs on a six-layer design system: a neutral token contract, one client pack that binds the brand, and components that only ever speak semantic names. “A re-skin is one file” is an easy claim to make, so it is kept checkable. The chrome wears the portfolio’s own neutral pack, the fourth skin these components have carried, and the three before it ship in the repository beside it. The prototype exhibits keep the packs they were designed in, loaded per page. Swap one link tag in the head and the chrome changes clothes.
Brand primitives
tokens.css §1The skin's facts, and nothing else. A palette, one self-hosted face, a 4px spacing scale, a clamp() type ramp, radii by rule. The current values are the portfolio's own, each pair computed against the surface it actually sits on. This is the fourth skin these components have carried; each re-skin was this one file.
The semantic contract
tokens.contract.cssThe interface. Every name a component is allowed to use, declared once with neutral defaults. No brand lives here; with no pack loaded, the base still renders coherent.
The client pack
tokens.css §2The binding. Primitives mapped onto the contract's slots, so a full re-skin is one swapped file and the structure never changes.
The component library
components.cssBrand-agnostic atoms, chrome and patterns. They reference semantic tokens only: never a primitive, never a literal. site.js builds the header and footer from config, so even the chrome re-skins as data.
The surfaces
This site, five case studies, eleven working prototypes in three settings. Each exhibit renders from contract-declared tokens its own pack supplies: the agreement six from tokens.proto-agreement.css, the bank journeys from banks.css, the handover replay from a pack scoped in its page CSS.
The governance
What changed, and what did not.
The last re-skin, layer by layer. Layer 1 is entirely different, layer 3 is a different file, and layers 2, 4 and 6 are byte-for-byte identical. That ratio is the argument: the brand is one file, and the structure underneath it is reusable because nothing brand-specific was ever allowed into it.
#161616 charcoal, an orange in two weights (#FB4F14 as the signal, #FB4F14 where it carries text), powder #AECACD calls to action that darken to peacock #104A65, warm cream and sand, radius 8/16/24 and a 100px pill. The portfolio's own values, computed by script on 24 August 2026.
#110009 ink, #D41070 and #F90081, blush and mint, the same radii. Read from a real lender's production stylesheets with the occurrence count of each value recorded beside it; it survives as the agreement exhibits' pack.1
The same file. Neutral defaults for every token a component can reference, and no brand value anywhere in it.
The same file. If a component starts using a new token, it gets declared here first. That rule is what keeps the two packs interchangeable.
tokens.css. Binds the portfolio’s primitives onto the
contract, and keeps the discipline: the solid orange carries text at 6.09:1 on
white while the bright #FB4F14 fails there at 3.37:1 and holds 5.37:1 on the
charcoal, so the two weights trade places at the light/dark boundary. The
calls to action pair powder with a charcoal label at 10.45:1 and darken to
peacock on hover.
tokens.carmoola.css, preserved in this repository beside
tokens.previous.css and tokens.saulera.css. Swapping
the one <link> in each page head moves the chrome back to
any of them.
The same file. Buttons, cards, chrome, hero, feature band, case blocks: every one reads semantic tokens only. Never a primitive, never a literal.
The same file, and the same proto.css under the phone screens.
The prototype tokens were lifted out of it into the contract so this row could
say “identical” without an asterisk.
The portfolio, five case studies, and eleven prototypes in three settings: one car finance agreement, a bank's core journeys, and an AI-to-human handover.
The same portfolio and case studies around five prototypes for a different industry, with not one changed component.
The same rules. A fixed load order, read-only mirrors, a promotion rule that moves a component out of a page the second another page needs it, and a decision log with the rejected alternatives kept.
The same rules. The governance is what makes layer 3 cheap.
- The lender-derived pack: every value was read from a real UK lender’s production stylesheets on 16 August 2026, and the pack records how many times each value occurs there, so the weight of a colour in the pack matches its weight in that brand. The lender goes unnamed here because the exhibits are brand-agnostic. Two values are derived rather than read and both are marked DERIVED in the file.
- Contrast figures throughout are WCAG 2.1 relative-luminance ratios computed against the surface each pair actually sits on, not against white by default.
One base, any brand.
This matters even with one brand. When the brand lives in one file and the components trust a contract, every new surface (a campaign page, an experiment, a partner page) ships on-brand without a rebuild, and an agent can be trusted to build it. Swap the pack, keep the system.
The practice page shows how I run it day to day: agents read the rules, gates hold the craft.