Design System

The BlueMonkeyMakes design system, wearing the HouseOfZA brand. The contract travels between projects unchanged. Only the brand layer is ours.

Two layers, one seam

The system declares which decisions exist. The brand supplies what they are. That seam is the reason a re-brand is a change to one folder rather than a search across the codebase.

src/system/theme.css

The contract

Which color roles exist, the type ladder, the radius steps, the named z and elevation ladders. Kept byte-identical with the design-system reference repo. Re-copy it from there. Never edit it here.

src/brand/

The swap surface

Token values, the six HouseOfZA scales, the fluid display type, the fonts, and the decorative effects. Everything that makes this look like HouseOfZA and nothing else.

The components are not copies

Every file in src/components/ui/ is byte-identical with bluemonkeymakes/design-system. They are the real components, not a re-implementation, because a second representation would have to be kept in sync by hand and would drift. They are React, and Astro renders them to static HTML at build time. Only a demo that genuinely needs to open or close something is hydrated.

There are two documented divergences, both forced and both catalogued in DESIGN-SYSTEM-NOTES.md: Link renders a plain anchor because this is a multi-page app with no client router, and Preview drops its light and dark toggle because this site is dark-only.

The marketing pages import none of this and still ship zero JavaScript.

Foundations

Color Typography Spacing Elevation Motion Icons

Components (25)

Accordion Alert Avatar Badge Breadcrumbs Button Card Dialog Dropdown Menu Empty State Form Field Input Link Page Header Pagination Popover Radio Group Sheet Skeleton Stat Card Table Tabs Toast Toggle Tooltip

Start here

If you are about to write a component or a page, read the rules first. Two of them account for most of what goes wrong: no arbitrary values, and select rather than restyle.