One system, three brands

Everything our apps are built from: the tokens, the components, the composition rules and the decisions behind them. Switch the brand in the header — only the accent moves.

Primitives
31
shadcn, patched
Registry items
51
installable with one command
Documents
23
every number measured
Modes
6
three brands × two themes
Sections
TokensThe palette, both themes and the three brands, with the value the browser actually computes.ComponentsEvery primitive and every brand device, rendered from the registry's own sources.PatternsThe dashboard composition, the admin screens, the entry screens — the arrangement, not the parts.MapThe choropleth, whose only configuration is the accent.DocumentationTwenty-three documents, and every number in them was measured in a browser.
Using it

Two channels, on purpose. The tokens are an npm dependency, because a colour fix has to reach every app without anyone re-running a CLI. The components are a shadcn registry, because a primitive is a starting point each app patches — and both of ours already have.

1 · the tokens
pnpm add @8020rei-com/tokens

@import "tailwindcss";
@import "@8020rei-com/tokens";

Then data-brand and data-theme on the html element. That is the whole integration.

2 · the components
pnpm dlx shadcn@latest add @8020iq/base
pnpm dlx shadcn@latest add @8020iq/site-shell
pnpm dlx shadcn@latest add @8020iq/dashboard-screen

A block brings its own files plus the registry items they import — nothing is listed by hand.