A design system you can read, run, and rebrand.
This kit documents itself: every page is real code, every token lives in one CSS file, and every component is composed from the same primitives. Run it, read it, then make it yours.
Two reference pages, one set of tokens.
The Examples page shows what you can build. The Design System page shows the rules that make it work. The /styles/app.css file lets you swap the brand without touching either.
Design System (/design-system)
Color, typography, buttons, cards, forms, spacing, radius, elevation, responsive. Open this when you need to know what a token is named or how a primitive is supposed to look.
Examples (/examples)
Pricing tiers, product selector, shopping cart drawer, app shell, data table, auth forms, modal, empty state, toasts. Open this when you need a pattern to drop into your own app.
Rebrand in one file
Every color, font, radius, and spacing value is a CSS variable in app/styles/app.css. Replace the hex values, leave the token names, and every page in the kit retags to the new brand.
See it running, then read the rules.
Most teams skim Examples first to find the pattern they need, then jump to Design System to confirm the tokens. Either entry point works — they reference each other section by section.
Working journal
Loose notes on how the kit was put together — what's intentional, what's still open, and where the seams are.