Comprehensive UI/UX design system methodology for building professional interfaces. Use when: creating components, improving visual hierarchy, implementing animations, choosing spacing/typography, enhancing dark mode, building responsive layouts, improving hover states, adding micro-interactions. Triggers: component design, visual hierarchy, animation, spacing, typography, responsive, hover effect, micro-interaction, glass effect, gradient.
A comprehensive design methodology combining best practices from UI UX Pro Max, LibreUIUX, Claude Code UI Agents, and the Awesome Claude Code Toolkit. Tuned for this project's React + Tailwind + shadcn/ui stack.
Modern. Clean. Data-Dense. Professional.
--primary, --accent) and component variantsThis project uses HSL-based semantic tokens in src/index.css:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--muted: 210 40% 96.1%;
--accent: 210 40% 96.1%;
--destructive: 0 84.2% 60.2%;
--border: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
}
| Purpose | Token | Usage |
|---|---|---|
| Primary actions, CTAs | --primary | Buttons, links, active states |
| Page background | --background | Main content area |
| Card surfaces | --card | Card backgrounds |
| Body text | --foreground | Primary text |
| Secondary text | --muted-foreground | Descriptions, hints |
| Errors, warnings | --destructive | Error states, delete actions |
| Borders | --border | Dividers, input borders |
| Focus rings | --ring | Keyboard focus indicators |
--success: 142 76% 36%; /* green - Active, completed */
--warning: 38 92% 50%; /* amber - Pending, attention */
--info: 199 89% 48%; /* sky - Information */
| Element | Tailwind | Size | Weight | Use Case |
|---|---|---|---|---|
| Page Title | text-2xl | 24px | font-semibold | Page headers |
| Section Title | text-lg | 18px | font-semibold | Card/section headers |
| Card Title | text-base | 16px | font-medium | Card titles |
| Body | text-sm | 14px | font-normal | Default body text |
| Label | text-xs | 12px | font-medium | Labels, tags, captions |
| Metric | text-3xl | 30px | font-bold | Dashboard KPI numbers |
| Small Metric | text-xl | 20px | font-semibold | Secondary metrics |
leading-relaxed (1.625) for body, leading-tight (1.25) for headingsfont-bold for everything — use weight to create hierarchy| Token | Value | Use Case |
|---|---|---|
gap-1 / p-1 | 4px | Inline icon gaps, tight spacing |
gap-2 / p-2 | 8px | Default small spacing, badge padding |
gap-3 / p-3 | 12px | Button padding-y, compact card padding |
gap-4 / p-4 | 16px | Standard card padding, component gaps |
gap-6 / p-6 | 24px | Section padding, comfortable card padding |
gap-8 / p-8 | 32px | Component group gaps |
gap-12 | 48px | Section gaps |
gap in flex/grid instead of margin for spacing between children| Token | Value | Use Case |
|---|---|---|
rounded-sm | calc(var(--radius) - 4px) | Small badges, chips |
rounded-md | calc(var(--radius) - 2px) | Buttons, inputs |
rounded-lg | var(--radius) | Default — cards, containers |
rounded-xl | 12px | Modals, hero cards |
rounded-full | 9999px | Avatars, status dots, pills |
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) /* Subtle elevation */
shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1) /* Cards */
shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1) /* Modals, dropdowns */
ring-1 ring-white/10 for edge definition instead of shadowsshadow-primary: 0 4px 14px 0 rgba(59, 130, 246, 0.25) /* Primary buttons */
shadow-success: 0 4px 14px 0 rgba(34, 197, 94, 0.25) /* Success states */
| Duration | Use Case | Easing |
|---|---|---|
| 150ms | Micro: hover colors, opacity | ease-out |
| 200ms | Standard: button hover, focus | ease-out |
| 300ms | Complex: modal enter, slide | ease-in-out |
| 500ms | Page transitions | ease-in-out |
/* Default for all interactive elements */