Design system — "The Control Surface"
An instrument panel: precise, technical, calm. Borrow the composure of Linear/Vercel/Warp, not their palettes. Full spec: DESIGN.md, PRODUCT.md, tokens in DESIGN.json and apps/web/src/index.css.
Visual rules
- Squared geometry — 0px radius on buttons, badges, cards, inputs, images. No rounded corners anywhere.
- Monochrome ink ramp (OKLCH, chroma 0) for all structure, plus exactly two chromatic voices:
- destructive red = failure/danger
- signal violet
oklch(0.52 0.21 293) light / oklch(0.72 0.19 293) dark = "live right now" (≤10% of screen; four surfaces max)
- No other accent colors. Badges are text-only — no colored chips.
- Underline inputs, not boxed boxes. Hairline rings, not shadows (flat by default,
shadow-sm max).
- Uppercase, wide-tracked micro-labels for badges/eyebrows/status; buttons and nav are sentence-case, medium-weight (deliberate hybrid). Machine values in mono; prose never mono. Literal white
oklch(1 0 0) light background. Display capped ~3rem (hero up to ~4rem).
Anti-references (do NOT drift toward these)
Generic shadcn/AI-default (grayscale-neutral + Inter + default-purple); playful/consumer/rounded; cluttered enterprise dashboard; loud SaaS marketing.
Accessibility — WCAG 2.2 AA (required)
- Body contrast ≥4.5:1 (≥3:1 large/bold); placeholders held to 4.5:1.
- Full keyboard nav + visible, high-contrast focus rings.
- Light and dark themes must both pass.
prefers-reduced-motion fallback for every animation.- Never encode status by color alone — always pair a word, icon, or shape.
Practice
- Use tokens from
src/index.css (@theme inline, OKLCH vars, .dark) over literal colors. Compose with cn() (@/lib/utils) and cva, matching the squared/ink/uppercase geometry of existing src/components/ui/*.
- For live visual iteration, use the
/impeccable skill (live mode configured) rather than eyeballing screenshots.
1---2name: design-system3description: Skillist's visual system ("The Control Surface") and WCAG 2.2 AA rules for any UI work in apps/web or apps/docs. Use when creating/editing components, routes, styles, or tokens, or reviewing UI. Full detail lives in DESIGN.md / PRODUCT.md.4---56# Design system — "The Control Surface"78An instrument panel: precise, technical, calm. Borrow the *composure* of Linear/Vercel/Warp, not their palettes. Full spec: `DESIGN.md`, `PRODUCT.md`, tokens in `DESIGN.json` and `apps/web/src/index.css`.910## Visual rules1112- **Squared geometry** — 0px radius on buttons, badges, cards, inputs, images. No rounded corners anywhere.13- **Monochrome ink ramp** (OKLCH, chroma 0) for all structure, plus exactly **two chromatic voices**:14 - destructive **red** = failure/danger15 - signal **violet** `oklch(0.52 0.21 293)` light / `oklch(0.72 0.19 293)` dark = "live right now" (≤10% of screen; four surfaces max)16 - No other accent colors. **Badges are text-only** — no colored chips.17- **Underline inputs**, not boxed boxes. **Hairline rings, not shadows** (flat by default, `shadow-sm` max).18- Uppercase, wide-tracked micro-labels for badges/eyebrows/status; **buttons and nav are sentence-case, medium-weight** (deliberate hybrid). **Machine values in mono; prose never mono.** Literal white `oklch(1 0 0)` light background. Display capped ~3rem (hero up to ~4rem).1920## Anti-references (do NOT drift toward these)2122Generic shadcn/AI-default (grayscale-neutral + Inter + default-purple); playful/consumer/rounded; cluttered enterprise dashboard; loud SaaS marketing.2324## Accessibility — WCAG 2.2 AA (required)2526- Body contrast ≥4.5:1 (≥3:1 large/bold); placeholders held to 4.5:1.27- Full keyboard nav + visible, high-contrast focus rings.28- **Light and dark themes must both pass.**29- `prefers-reduced-motion` fallback for every animation.30- **Never encode status by color alone** — always pair a word, icon, or shape.3132## Practice3334- Use tokens from `src/index.css` (`@theme inline`, OKLCH vars, `.dark`) over literal colors. Compose with `cn()` (`@/lib/utils`) and `cva`, matching the squared/ink/uppercase geometry of existing `src/components/ui/*`.35- For live visual iteration, use the `/impeccable` skill (live mode configured) rather than eyeballing screenshots.
skillist-io