The site that announced our design-system kit now builds on it

Since 13 October Reputo and Leadgener have pinned one design-system kit, and this site announced it the same day. The site itself did not use the kit: it kept its own colour values for both themes, IBM Plex Sans where the kit sets Inter, its own buttons and focus outline.

One package, two written exceptions

On 21 October 2026 the site moved onto the kit's npm package, pinned at 1.1.0. In the light theme its surfaces, text and borders now take the kit's roles, and its buttons, heading weights, text typeface and the focus ring on its controls are the kit's. The toolkit's blue lives in brand.css: the twelve colour roles of the kit's brand contract, checked by the kit's assertBrand in the site's tests, as in Reputo and Leadgener. A light blue action colour fails that test at 1.80 : 1, below the minimum of 4.5 : 1.

Pieces the kit has no counterpart for, such as the factory floor, stay the site's own; for two of them, the decision to adopt the kit writes down why they stay out of it. The kit has no dark theme and no product needs one, so under our harvest rule it does not go into the kit; 13 tests keep the site's dark text and button colours at 4.5 : 1 or more. Nor does the kit have a filter chip, so the toggles that filter the factory floor and the news stay a site control on kit tokens until a product needs one.

Tailwind inside the kit's layers

The kit declares seven cascade layers; the last, product, is for a page's own CSS. This site's Tailwind emits CSS outside any layer, and such CSS beats every layer whatever its specificity: Tailwind's reset would have undone the kit's buttons. So the build runs Tailwind twice, putting its reset into the kit's reset layer and everything else into product. Three checks can then stop the build: the layers must appear in the kit's order, no rule may stand outside a layer except @font-face, and every local url() must name a file the build wrote. We broke each on purpose; each stopped the build with its own message.

The Docker image build on main runs the same build, and the deploy waits for that image: the first pipeline installed the kit, built the image and finished the deploy 83 seconds after the change was merged.

The kit's CSS thus works here without any of its React components: two passes put Tailwind's output inside the kit's layers, and the build fails when a rule leaves them or their order changes.