ui-design-principleslisted

# The system is a decision, not a vibe `01-design-system.md` is the first of Kintwadi's sixteen numbered v0 prompts (`01-design-system.md` through `16-role-scoped-views.md`), and it is the only one that doesn't produce a product screen — it produces the *rules* every later screen has to obey. Everything below is distilled from that prompt, the one behind the Best Design win at H0: Hack the Zero Stack. ## Tokens, not hex Color, spacing, and radius are installed as CSS variables and referenced by semantic name — `background`, `foreground`, `primary`, `accent`, `muted`, `border`, `ring`, `success`, `warning`, `danger`, `info` — never as a raw hex value typed into a component. A component that reads `bg-primary` instead of `bg-[#0F766E]` doesn't just look neater; it means a palette change, a dark-mode swap, or a rebrand touches one token file instead of every component that happened to hardcode a color. If you can `grep` a component file for `#` and find a hex code, the token layer has already leaked. ## Light and dark are both designed The prompt specifies a full second palette for dark mode — different background, different card surface, a brightened `primary` (`#14B8A6` instead of `#0F766E`) so it still reads at the right contrast against a dark ground — not a CSS filter or an automatic darkening of the light values. A derived dark mode (invert, or run everything through a lightness transform) reliably produces muddy surfaces and blown-out accents; a designed one gets a c