Source Code

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 (<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 & 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

Web Design

Mobile Web & PWA

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.

ui-ux-master

UI/UX Master Skill

Design Philosophy

Core Principles

Platform-Specific Design

Apple Platforms (iOS, macOS, watchOS, tvOS, visionOS)

Modern Web Design

Design Systems

Color Theory

Typography

Spacing & Layout

Component Design

Buttons

Forms

Cards

Navigation

Animation & Motion

Modern Design Trends

Dark Mode

Glassmorphism

Neo-Brutalism

Responsive Design

Accessibility

WCAG Compliance

Screen Readers

Keyboard Navigation

Motion & Animation

Design Tools & Resources

Design Systems

Icon Libraries

Color Tools

Typography Tools

Component Libraries

Design Workflow

1. Research & Discovery

2. Wireframing

3. Visual Design

4. Prototyping

5. Implementation

Platform-Specific Resources

Apple Platforms

Web Design

Mobile Web & PWA

Quick Decision Guide

Design Checklist