One design system, a brand layer per product

Our design system started in Reputo: CSS tokens, React components, lint rules that keep screens from setting their own styles, and a catalogue. On 8 October Leadgener copied its 209 files and changed the palette. Four days later, 26 files present in both copies differed and 14 existed in only one. Some differences were Leadgener's own components; one was a fix that stayed where it was made, a narrower tab padding that fits three tabs on one row of a 375 px wide phone screen. Reputo's tabs still wrapped.

The core is shared, the brand is not

Under our harvest rule, look and feel were copied on purpose. On 12 October we made the design system the exception. Its core sets the quality of the interface and must not diverge: the focus ring, 44 px touch targets, contrast, tones marked by shape as well as colour, and the type and spacing scales. It became the design-system kit, an npm package released like our other kits, with a dated changelog section and a protected tag.

A product keeps a brand layer: brand.css with exactly twelve colour roles, its mark, and its own components under its own prefix. Its tests call assertBrand, which fails when a role is missing, when the file sets any other kit property, when a role falls below its WCAG 2.1 contrast minimum, or when an action colour could pass for a success, warning or danger state. The app shell, the login theme and the landing page stay copies, but in Reputo and Leadgener each imports the kit's stylesheet, then brand.css.

Compared, then released

Kit 1.0.0 is a faithful port of Leadgener's copy. We captured every catalogue entry at 375, 768 and 1366 px and compared the kit with both products pixel for pixel. Apart from entries listed as different by construction, the only rendering change is the tab fix, which now reaches Reputo. The kit's 384 captures became its baseline for every merge request that changes it.

Before it publishes, the release job requires a rehearsed candidate of the same code to verify in the registry, and runs the suite again on the merge commit: 615 tests for 1.0.0. Reputo and Leadgener adopted the candidate, compared their catalogue and all nine login theme pages with what they rendered before, and pinned 1.0.0 the same day.

If you build on the toolkit, your product's colours are one file the kit checks: a palette that fails contrast fails your brand test before it reaches a screen. A fix like the tab padding is made once, in the kit, not in each copy.