Name: design
Author: MorbidDingo

Custom agent imported from MorbidDingo/canteen (.github/agents/design.agent.md). Copyright stays with the author.

WCAG AA minimum: 4.5:1 contrast for text, 3:1 for UI components
Never use pure #000000 or #ffffff — use zinc-950 / zinc-50 for softer contrast
Dark mode: don't just invert — redesign. Dark backgrounds should be zinc-900/950, not black
Avoid full-saturation colors for backgrounds — muted, tinted neutrals only
Color carries meaning — use semantic colors consistently, never decoratively
Test every palette for color blindness (deuteranopia, protanopia, tritanopia)

Spacing & Layout

4px base grid — all spacing is a multiple of 4: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
Proximity: related elements closer together, unrelated further apart (Gestalt)
Padding > borders for separating sections — let space do the work
Max content width: 65ch for reading, 1280px for app layouts
Sections breathe: generous vertical padding — minimum 64px top/bottom on desktop, 40px on mobile

Pattern	Mobile	Desktop
Navigation	Bottom bar or Sheet drawer	Sidebar or top nav
Cards	Single column, full-width	2–3 column grid
Forms	Stacked, full-width fields	Contained, max 560px
CTAs	Full-width, sticky bottom	Inline or contained
Tables	Card-per-row or horizontal scroll	Full table

Iconography

Use one icon library consistently — don't mix styles
Recommended: Lucide (default with shadcn), Radix Icons, Phosphor Icons
Icon size: 16px inline, 20px standalone, 24px for navigation
Always pair icons with labels on mobile — icon-only on mobile is an anti-pattern
Stroke width should match font weight — light type = light stroke icons
Never use icons purely decoratively if they add visual noise without meaning

Motion communicates state change, not decoration
Duration: 100–150ms for micro (hover, focus), 200–300ms for transitions, 300–500ms for page-level
Easing: ease-in-out for most, ease-out for elements entering, ease-in for exiting
Avoid: bouncing, spinning, flashing, looping animations in UI
Respect prefers-reduced-motion — always provide a no-motion fallback
Transitions that feel right: opacity fade, subtle translate (4–8px), scale (0.95→1)

When reviewing a design, evaluate in this order:

Clarity — Is the purpose immediately obvious? What is the user supposed to do?
Hierarchy — Does the eye travel in the right order? Is the CTA the most prominent element?
Consistency — Are spacing, color, and type decisions consistent throughout?
Accessibility — Does it meet contrast requirements? Is it usable without color?
Responsiveness — Does it work at 320px? Is mobile a first-class experience?
Minimalism — What can be removed? What is decorative but not functional?
Emotion — Does the design feel appropriate for the brand and audience?