--- name: ui-ux-master description: Master UI/UX design skill combining Apple HIG, modern web design, SuperDesign patterns, and universal design principles. Use for any UI/UX design task including iOS/macOS/web apps, landing pages, dashboards, design systems, accessibility, responsive layouts, animation, and creating beautiful, functional interfaces across all platforms and frameworks. --- # UI/UX Master Skill The ultimate design skill combining Apple Human Interface Guidelines, modern web design patterns, SuperDesign principles, and universal UX best practices for creating exceptional user experiences across all platforms. ## Design Philosophy ### Core Principles **1. Clarity Over Cleverness** - Information hierarchy is obvious - Actions are predictable - Feedback is immediate - Complexity is hidden when not needed **2. Consistency Breeds Familiarity** - Patterns repeat across the interface - Terminology is uniform - Visual language is coherent - Platform conventions are respected **3. Beauty Through Simplicity** - Every element serves a purpose - White space creates breathing room - Visual noise is minimized - Details are refined **4. Accessibility is Non-Negotiable** - Works for everyone, regardless of ability - Keyboard navigable - Screen reader friendly - High contrast options available ## Platform-Specific Design ### Apple Platforms (iOS, macOS, watchOS, tvOS, visionOS) For complete Apple HIG patterns, see [references/apple-platforms.md](references/apple-platforms.md) **Key Apple Principles:** - **Clarity:** Legible text, precise icons, subtle adornments - **Deference:** Content-first, UI stays out of the way - **Depth:** Visual layers, realistic motion, spatial awareness **When to use:** Native iOS, macOS, watchOS, tvOS, or visionOS apps ### Modern Web Design For complete web design patterns, see [references/web-design.md](references/web-design.md) **Key Web Principles:** - **Responsive:** Mobile-first, adapts to all screens - **Performant:** Fast load times, optimized assets - **Progressive:** Works everywhere, enhanced where possible - **Semantic:** Proper HTML structure, accessible markup **When to use:** Websites, web apps, PWAs, landing pages, dashboards ## Design Systems ### Color Theory **Modern Color Systems:** - **oklch()** color space (perceptually uniform, modern) - **HSL** for quick adjustments - **RGB/Hex** for legacy compatibility **Semantic Colors:** ```css /* Light/Dark mode compatible */ --primary: oklch(0.649 0.237 267); --secondary: oklch(0.556 0 0); --background: oklch(0.145 0 0); /* dark */ --foreground: oklch(0.985 0 0); /* light text */ --muted: oklch(0.556 0 0 / 0.5); --border: oklch(0.922 0 0 / 0.15); ``` **Avoid:** - Generic bootstrap blue (#007bff) - dated - Pure black (#000000) - use dark grays - Low contrast text (<4.5:1 ratio) **Color Guidelines:** See [references/color-systems.md](references/color-systems.md) for palettes, contrast ratios, and color psychology ### Typography **System Fonts (Recommended):** - **Apple:** SF Pro (iOS/macOS), SF Compact (watchOS) - **Web:** Inter, Outfit, DM Sans, Plus Jakarta Sans - **Monospace:** JetBrains Mono, Fira Code, Geist Mono - **Fallback:** -apple-system, system-ui, sans-serif **Type Scale:** ``` Display: 72px / 4.5rem Heading 1: 48px / 3rem Heading 2: 36px / 2.25rem Heading 3: 24px / 1.5rem Body: 16px / 1rem Small: 14px / 0.875rem Caption: 12px / 0.75rem ``` **Line Height:** - Headings: 1.2 - 1.3 - Body: 1.5 - 1.6 - Small text: 1.4 - 1.5 **Font Pairing:** See [references/typography.md](references/typography.md) for pairing rules and examples ### Spacing & Layout **8-Point Grid System:** - Base unit: 8px (0.5rem) - Spacing scale: 8, 16, 24, 32, 40, 48, 56, 64, 80, 96 - Use multiples of 4px for fine-tuning (4, 12, 20, 28, etc.) **Standard Margins:** - Mobile: 16px - Tablet: 24px - Desktop: 32-48px - Max width: 1200-1400px **Component Spacing:** ``` XS: 4px - Tight groups (icon + text) S: 8px - Related items M: 16px - Standard spacing L: 24px - Section spacing XL: 32px - Major sections 2XL: 48px - Page sections ``` **Layout Patterns:** See [references/layout-patterns.md](references/layout-patterns.md) for grids, flexbox, and responsive patterns ## Component Design ### Buttons **Hierarchy:** 1. **Primary:** Filled, accent color, main action 2. **Secondary:** Outlined or tinted, supporting action 3. **Tertiary:** Ghost/text-only, least prominent **States:** - Default - Hover (lift or color shift) - Active (pressed, scale down) - Disabled (reduced opacity, no interaction) - Loading (spinner, disabled) **Sizes:** - Small: 32-36px height - Medium: 40-44px height (default) - Large: 48-56px height **Best Practices:** - Minimum 44×44px touch target (mobile) - Clear, action-oriented labels ("Save Changes" not "OK") - Loading state for async actions - Icon + text for clarity ### Forms **Input Fields:** - Clear labels above fields - Placeholders as hints, not labels - Visible focus states - Inline validation - Error messages near field - Success states **Field Sizing:** - Single line: 40-48px height - Text area: 80-120px min height - Width matches expected input length **Form Layout:** - Single column for simplicity - Group related fields - Progressive disclosure (show complexity as needed) - Save button at bottom, clear/cancel secondary **Best Practices:** See [references/forms.md](references/forms.md) for validation patterns and accessibility ### Cards **Anatomy:** - Border radius: 8-12px (modern), 0px (brutalist) - Padding: 16-24px - Shadow: Subtle, 1-2 layers max - Background: Slightly elevated from page **Types:** - **Flat:** No shadow, border only - **Elevated:** Subtle shadow - **Interactive:** Hover lift, clickable - **Glassmorphic:** Blur + transparency **Content:** - Image/icon at top (optional) - Title (heading level) - Description/body - Actions at bottom ### Navigation **Patterns:** - **Top Nav:** Global, persistent (web) - **Tab Bar:** 3-5 primary sections (mobile) - **Sidebar:** Complex apps, collapsible (desktop) - **Hamburger:** Mobile fallback, avoid if possible - **Breadcrumbs:** Hierarchical location **Mobile Navigation:** - Bottom tab bar (thumb-friendly) - Burger menu for overflow - Sticky header with back button **Desktop Navigation:** - Top bar or sidebar - Dropdown menus for hierarchy - Search prominent See [references/navigation-patterns.md](references/navigation-patterns.md) ## Animation & Motion **Durations:** - **Quick:** 100-200ms (button press, hover) - **Standard:** 200-400ms (transitions, sheets) - **Slow:** 400-600ms (page transitions, complex) **Easing Functions:** - **ease-out:** Most animations (starts fast, ends slow) - **ease-in:** Exits (starts slow, accelerates) - **ease-in-out:** Balanced (smooth start and end) - **spring:** Natural, playful (CSS or JS springs) **Animation Principles:** 1. **Anticipation:** Hint at upcoming change 2. **Follow-through:** Motion completes naturally 3. **Continuity:** Elements smoothly transition 4. **Responsive:** Immediate feedback to interaction **Micro-interactions:** ``` button: 150ms [scale: 1→0.95→1] (press) hover: 200ms [translateY: 0→-2px] + shadow↗ fadeIn: 400ms [opacity: 0→1, translateY: 20→0] slideIn: 300ms [translateX: -100%→0] ``` **Reduce Motion:** - Provide crossfade alternative - Respect `prefers-reduced-motion` - Essential animations only See [references/animation-guide.md](references/animation-guide.md) for complete animation patterns ## Modern Design Trends ### Dark Mode **Design Strategy:** - Test both modes simultaneously - Use semantic colors (auto-adapt) - Elevate surfaces with subtle lightening - Avoid pure black (#000), use dark grays **Color Mapping:** ```css /* Light mode */ --background: oklch(1 0 0); --surface: oklch(0.98 0 0); --text: oklch(0.15 0 0); /* Dark mode */ --background: oklch(0.145 0 0); --surface: oklch(0.205 0 0); --text: oklch(0.985 0 0); ``` See [references/dark-mode.md](references/dark-mode.md) ### Glassmorphism **Recipe:** ```css .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37); } ``` **When to use:** - Overlays (modals, tooltips) - Navigation bars - Cards on rich backgrounds - Modern, premium feel **Avoid:** - Overuse (becomes gimmicky) - Performance-sensitive contexts - Insufficient browser support ### Neo-Brutalism **Characteristics:** - Harsh shadows (4px 4px 0 black) - Bold, saturated colors - Black borders (2-3px) - Zero border radius - Raw, unpolished aesthetic **When to use:** - Playful, creative brands - Youth-targeted products - Art/design portfolios - Standing out from "clean" minimalism See [references/design-trends.md](references/design-trends.md) for more trends ## Responsive Design **Breakpoints:** ``` Mobile: < 640px Tablet: 640px - 1024px Desktop: 1024px - 1440px Wide: > 1440px ``` **Mobile-First Strategy:** ```css /* Base: Mobile */ .container { padding: 16px; } /* Tablet */ @media (min-width: 640px) { .container { padding: 24px; } } /* Desktop */ @media (min-width: 1024px) { .container { padding: 32px; max-width: 1200px; margin: 0 auto; } } ``` **Responsive Patterns:** - **Stack → Sidebar:** Single column mobile, sidebar desktop - **Grid Columns:** 1 → 2 → 3 → 4 columns - **Hide/Show:** Progressive disclosure - **Reorder:** Priority changes by screen size See [references/responsive-design.md](references/responsive-design.md) ## Accessibility ### WCAG Compliance **Level AA (Minimum):** - ✅ 4.5:1 contrast for normal text - ✅ 3:1 contrast for large text (18pt+) - ✅ Keyboard navigable - ✅ Focus indicators visible - ✅ Alt text for images - ✅ Form labels present **Level AAA (Ideal):** - ✅ 7:1 contrast for normal text - ✅ 4.5:1 contrast for large text - ✅ No audio-only content - ✅ Enhanced focus indicators ### Screen Readers **Best Practices:** - Semantic HTML (`