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:

Primary: Filled, accent color, main action

Secondary: Outlined or tinted, supporting action

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:

Anticipation: Hint at upcoming change

Follow-through: Motion completes naturally

Continuity: Elements smoothly transition

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 (, , )


• 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 & Animation

• Respect prefers-reduced-motion
• Provide static alternatives
• No auto-playing videos
• Pause/stop controls available

See references/accessibility.md for complete WCAG checklist

Design Tools & Resources

Design Systems

• Material Design (Google)
• Human Interface Guidelines (Apple)
• Fluent Design (Microsoft)
• Lightning Design (Salesforce)
• Carbon (IBM)

Icon Libraries

• SF Symbols (Apple, 6000+ icons)
• Lucide (Open source, clean)
• Heroicons (Tailwind team)
• Phosphor (Flexible weights)
• Feather (Simple, minimal)

Color Tools

• oklch.com - Modern color picker
• coolors.co - Palette generator
• contrast-ratio.com - WCAG checker
• color.adobe.com - Adobe Color

Typography Tools

• Google Fonts - Free web fonts
• fonts.google.com - Browse and pair
• fontpair.co - Pairing suggestions
• typ.io - Typography inspiration

Component Libraries

• Tailwind CSS (utility-first)
• shadcn/ui (copy-paste components)
• Flowbite (Tailwind components)
• Radix UI (headless primitives)
• Chakra UI (accessible React)

See references/tools-resources.md for comprehensive list

Design Workflow

1. Research & Discovery

• Understand user needs
• Study competitors
• Define core user flows
• Identify constraints

2. Wireframing

ASCII Wireframes:

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

3. Visual Design

• Define theme (colors, fonts, spacing)
• Design key screens
• Create component library
• Build design system

4. Prototyping

• Interactive mockups
• User testing
• Iterate based on feedback

5. Implementation

• Responsive development
• Accessibility testing
• Performance optimization
• Cross-browser testing

See references/design-workflow.md for detailed process

Platform-Specific Resources

Apple Platforms

• Apple HIG Complete Guide
• iOS Patterns
• macOS Patterns
• watchOS Patterns
• SF Symbols Guide

Web Design

• Modern Web Patterns
• CSS Architecture
• JavaScript Interactions
• Performance Optimization

Mobile Web & PWA

• Responsive Patterns
• Touch Interactions
• PWA Best Practices

Quick Decision Guide

Choosing Colors?
→ references/color-systems.md

Designing Forms?
→ references/forms.md

Need Navigation Pattern?
→ references/navigation-patterns.md

Building for iOS?
→ references/apple-platforms.md

Creating Animations?
→ references/animation-guide.md

Accessibility Questions?
→ references/accessibility.md

Responsive Layout?
→ references/responsive-design.md

---

Design Checklist

✅ Visual Hierarchy

• Most important elements are prominent


• Related items are grouped


• White space creates breathing room

✅ Consistency

• Components look and behave similarly


• Terminology is uniform throughout


• Visual language is coherent

✅ Feedback

• Actions have immediate response


• Loading states are clear


• Errors are helpful and actionable

✅ Accessibility

• Keyboard navigable


• Screen reader friendly


• Sufficient color contrast


• Respects user preferences

✅ Performance

• Fast load times (<3s)


• Smooth animations (60fps)


• Optimized images


• Minimal layout shifts

✅ Responsive

• Works on all screen sizes


• Touch-friendly (44px targets)


• Adapts content intelligently

✅ Platform Native

• Follows platform conventions


• Uses native components when possible


• Respects system settings

---

The ultimate UI/UX design reference combining Apple HIG, modern web design, and universal UX principles.