UI Design
Overview
Modern component library and design system engineering. Enforces design token hierarchies (spacing, radii, elevation), accessible component primitives (shadcn/ui, Radix), and responsive layout constraints.
When to Use
Activate when designing design systems, reusable UI component libraries, navigation bars, modals, data tables, and interactive dashboards.
Rules & Patterns
UI Design — Best Practices
Design System Foundations
Color
- Never use generic colors — curate a harmonious palette
- Always tint — no pure black (#000), no pure gray. Add a subtle warm or cool tint
- Color roles: primary (action), secondary (accent), neutral (text, borders), semantic (error, success, warning, info)
- Dark mode: design intentionally, not just invert. Surface hierarchy: background < surface < elevated
- Contrast: 4.5:1 minimum for body text, 3:1 for large text
Typography
- Never use browser defaults — choose a curated font (Inter, Outfit, Geist, Sora)
- Type scale: use a modular scale (1.25 ratio) — 12, 14, 16, 20, 24, 32, 40, 48
- Font weights: Regular (400), Medium (500), Semibold (600), Bold (700). Don't use all of them — pick 2-3
- Line height: 1.5 for body, 1.2 for headings, 1.6 for long-form text
- Max line width: 65-75 characters for readability
Spacing
- Use a 4px grid — all spacing should be multiples of 4
- Spacing scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
- Consistency — same spacing between similar elements
- Whitespace is design — don't fill every pixel
Layout
- Grid system: 12-column grid for desktop, 4-column for mobile
- Visual hierarchy: size, weight, color, spacing, position
- F-pattern/Z-pattern — for content-heavy pages
- Group related items — use proximity and boundaries
Component Patterns
Buttons
- Clear hierarchy: Primary > Secondary > Ghost/Text
- Consistent sizing: sm (32px), md (40px), lg (48px)
- States: default, hover, active, disabled, loading
- Always accessible: sufficient contrast, focus indicator
Forms
- Labels above inputs (not floating labels for critical forms)
- Clear error states with inline messages
- Logical tab order
- Progressive disclosure — don't show all fields at once
Cards
- Don't nest cards inside cards
- Clear visual hierarchy within the card
- Consistent padding and spacing
- Interactive cards need hover state
Navigation
- Maximum 7±2 items in primary nav
- Clear active state
- Mobile: bottom nav or hamburger (not both)
- Breadcrumbs for deep hierarchies
Animation Principles
- Purpose: guide attention, show relationships, provide feedback
- Duration: 150-300ms for micro-interactions, 300-500ms for transitions
- Easing:
ease-out for entrances, ease-in for exits. Never bounce or elastic
- Reduce motion: respect
prefers-reduced-motion
Anti-Patterns (from Impeccable)
- [FAIL] Gray text on colored backgrounds — destroys readability
- [FAIL] Pure black text on white (#000 on #fff) — too harsh, tint the black
- [FAIL] Cards nested inside cards — visual noise
- [FAIL] Bounce/elastic easing — feels dated
- [FAIL] Icon tile above every heading — SaaS template tell
- [FAIL] Purple-to-blue gradient on everything — overused
- [FAIL] Using Inter for everything — pick a font that matches your brand
- [FAIL] Rounded-square icons everywhere — lack of visual variety
Dark Mode
- Surface elevation through subtle lightening (not colored backgrounds)
- Reduce white contrast — use #E0E0E0, not #FFFFFF
- Shadows become less visible — use subtle borders or elevation changes
- Test all states in both modes
Code Examples
See EXAMPLES.md for detailed code examples.
Validation Checklist
What to verify during the review phase before completing the task.
Common Mistakes
Anti-patterns and things to explicitly avoid. See TROUBLESHOOTING.md.
Integration Notes
How this skill interacts with other skills.
1---2name: ui-design-23description: ContextOS skill for UI Design4---56# UI Design78## Overview910Modern component library and design system engineering. Enforces design token hierarchies (spacing, radii, elevation), accessible component primitives (shadcn/ui, Radix), and responsive layout constraints.1112## When to Use1314Activate when designing design systems, reusable UI component libraries, navigation bars, modals, data tables, and interactive dashboards.1516## Rules & Patterns17<!-- Source: ui.md -->1819## UI Design — Best Practices2021## Design System Foundations2223### Color2425- **Never use generic colors** — curate a harmonious palette26- **Always tint** — no pure black (#000), no pure gray. Add a subtle warm or cool tint27- **Color roles**: primary (action), secondary (accent), neutral (text, borders), semantic (error, success, warning, info)28- **Dark mode**: design intentionally, not just invert. Surface hierarchy: background < surface < elevated29- **Contrast**: 4.5:1 minimum for body text, 3:1 for large text3031### Typography3233- **Never use browser defaults** — choose a curated font (Inter, Outfit, Geist, Sora)34- **Type scale**: use a modular scale (1.25 ratio) — 12, 14, 16, 20, 24, 32, 40, 4835- **Font weights**: Regular (400), Medium (500), Semibold (600), Bold (700). Don't use all of them — pick 2-336- **Line height**: 1.5 for body, 1.2 for headings, 1.6 for long-form text37- **Max line width**: 65-75 characters for readability3839### Spacing4041- **Use a 4px grid** — all spacing should be multiples of 442- **Spacing scale**: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 9643- **Consistency** — same spacing between similar elements44- **Whitespace is design** — don't fill every pixel4546### Layout4748- **Grid system**: 12-column grid for desktop, 4-column for mobile49- **Visual hierarchy**: size, weight, color, spacing, position50- **F-pattern/Z-pattern** — for content-heavy pages51- **Group related items** — use proximity and boundaries5253## Component Patterns5455### Buttons5657- Clear hierarchy: Primary > Secondary > Ghost/Text58- Consistent sizing: sm (32px), md (40px), lg (48px)59- States: default, hover, active, disabled, loading60- Always accessible: sufficient contrast, focus indicator6162### Forms6364- Labels above inputs (not floating labels for critical forms)65- Clear error states with inline messages66- Logical tab order67- Progressive disclosure — don't show all fields at once6869### Cards7071- Don't nest cards inside cards72- Clear visual hierarchy within the card73- Consistent padding and spacing74- Interactive cards need hover state7576### Navigation7778- Maximum 7±2 items in primary nav79- Clear active state80- Mobile: bottom nav or hamburger (not both)81- Breadcrumbs for deep hierarchies8283## Animation Principles8485- **Purpose**: guide attention, show relationships, provide feedback86- **Duration**: 150-300ms for micro-interactions, 300-500ms for transitions87- **Easing**: `ease-out` for entrances, `ease-in` for exits. Never `bounce` or `elastic`88- **Reduce motion**: respect `prefers-reduced-motion`8990## Anti-Patterns (from Impeccable)9192- [FAIL] Gray text on colored backgrounds — destroys readability93- [FAIL] Pure black text on white (#000 on #fff) — too harsh, tint the black94- [FAIL] Cards nested inside cards — visual noise95- [FAIL] Bounce/elastic easing — feels dated96- [FAIL] Icon tile above every heading — SaaS template tell97- [FAIL] Purple-to-blue gradient on everything — overused98- [FAIL] Using Inter for everything — pick a font that matches your brand99- [FAIL] Rounded-square icons everywhere — lack of visual variety100101## Dark Mode102103- Surface elevation through subtle lightening (not colored backgrounds)104- Reduce white contrast — use #E0E0E0, not #FFFFFF105- Shadows become less visible — use subtle borders or elevation changes106- Test all states in both modes107108109## Code Examples110111See `EXAMPLES.md` for detailed code examples.112113## Validation Checklist114115What to verify during the review phase before completing the task.116117## Common Mistakes118119Anti-patterns and things to explicitly avoid. See `TROUBLESHOOTING.md`.120121## Integration Notes122123How this skill interacts with other skills.
kok-o