UI System
Turn a brand into a reusable, consistent system — without flattening it into a generic default kit.
Before anything
Read TASTE.md and BRAND.md. The system encodes their decisions as tokens; it does not import a stock design system and reskin it. (Check for and open these with your Read/Glob tools, not shell commands — OS portability.)
Build
- Tokens — colors (from
BRAND.md), type scale, spacing scale (4/8px base), radii, shadows, motion durations. Name them semantically (accent, surface, text-muted), not by raw value.
- Core components — buttons, inputs, cards, nav — each expressing the brand's one distinctive move, not the library default look.
- Usage rules — when to use each token/component, and what breaks the system.
- States — hover, focus, disabled, error, loading, empty. Accessibility baked in (contrast, focus visibility, motion-reduce).
Rules
- Consistency without blandness: the system should still look like this brand, not "a Tailwind starter."
- Document the why for the distinctive choices so contributors don't sand them off toward the default.
Before calling it done
design-critic against TASTE.md: does the system still carry the brand's point of view, or did it regress to a generic component kit?
1---2name: ui-system3description: Build a coherent design system — tokens, components, spacing and type scales — from the project's brand and taste. Use when the user needs a design system, component library, style tokens, or consistent UI foundations across a product. Trigger on design system, tokens, component library, style guide (for product UI). Reads TASTE.md and BRAND.md.4---56# UI System78Turn a brand into a reusable, consistent system — without flattening it into a generic default kit.910## Before anything1112Read `TASTE.md` and `BRAND.md`. The system encodes *their* decisions as tokens; it does not import a stock design system and reskin it. (Check for and open these with your Read/Glob tools, not shell commands — OS portability.)1314## Build15161. **Tokens** — colors (from `BRAND.md`), type scale, spacing scale (4/8px base), radii, shadows, motion durations. Name them semantically (`accent`, `surface`, `text-muted`), not by raw value.172. **Core components** — buttons, inputs, cards, nav — each expressing the brand's one distinctive move, not the library default look.183. **Usage rules** — when to use each token/component, and what breaks the system.194. **States** — hover, focus, disabled, error, loading, empty. Accessibility baked in (contrast, focus visibility, motion-reduce).2021## Rules2223- Consistency without blandness: the system should still look like *this* brand, not "a Tailwind starter."24- Document the *why* for the distinctive choices so contributors don't sand them off toward the default.2526## Before calling it done2728`design-critic` against `TASTE.md`: does the system still carry the brand's point of view, or did it regress to a generic component kit?
le-19-stvn