ui-ux-master

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

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

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:

/* 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 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 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 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 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

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 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:

/* 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

Glassmorphism

Recipe:

.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 for more trends

Responsive Design

Breakpoints:

Mobile:    < 640px
Tablet:    640px - 1024px
Desktop:   1024px - 1440px
Wide:      > 1440px

Mobile-First Strategy:

/* 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

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 (<nav>, <main>, <article>)
• ARIA labels when needed (aria-label, aria-labelledby)
• Logical heading hierarchy (h1 → h2 → h3)
• Skip navigation links
• Announce dynamic content (aria-live)

Keyboard Navigation

Essential:

• Tab order is logical
• Focus visible (outline or custom)
• Enter activates buttons/links
• Escape closes modals
• Arrow keys for lists/menus

Motion & An

---

Content truncated.