Household Design System
Pastel palette derived from the wagtail logo
Color scales
Each scale runs 100 (pastel background) → 700 (text-safe on light backgrounds), same hue throughout. 500 is the logo-adjacent "brand" step — used sparingly, mostly for primary actions.
Semantic tokens
Apps should consume these names, not raw scale steps — a future re-tune of the palette then needs no consumer changes.
Typography
Nunito — chosen for its round terminals, echoing the logo's organic curves. This standalone showcase loads it from Google Fonts for preview; consumer apps self-host it via @fontsource/nunito (see docs/design-system.md).
Eyebrow label
Aa — Household heading
Section heading
Card title
Body text at base size — de rest van de interface leest hierop verder.
Small / helper text
Extra small / meta text
Buttons & navigation
Panels & badges
Panel
Cumulatieve uren
parro handmatig icsPanel
Panels sit on the stone-100 page background as elevated white surfaces — mirrors the logo's layered flat shapes.
Radius & shadow
shadow-sm
shadow-md
radius-full