apple-ui-designlisted

# Apple UI Design Apple-inspired clean, minimal, premium UI design system. ## When to Use - Building modern interfaces requiring exceptional UX - Creating clean, minimal aesthetics - Implementing Apple-like polish and animations - Designing premium user experiences - Reviewing UI/UX for design quality ## Workflow ### Step 1: Apply Typography System Use SF Pro Display with proper hierarchy (hero, title, body, caption). ### Step 2: Apply Color Philosophy Use light/dark mode variables with proper contrast. ### Step 3: Apply Spacing System Follow 4/8/16/24/48/96px spacing rhythm. ### Step 4: Verify Checklist Ensure touch targets, contrast, and animations meet standards. --- ## Core Principles 1. **Clarity** - Content is king, UI disappears 2. **Deference** - UI serves content, never competes 3. **Depth** - Layering creates hierarchy ## Typography ```css font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; /* Hierarchy */ --text-hero: 600 48px/1.1; /* Bold statements */ --text-title: 600 32px/1.2; /* Section headers */ --text-body: 400 17px/1.5; /* Readable content */ --text-caption: 400 13px/1.4; /* Secondary info */ ``` ## Color Philosophy ```css /* Light mode */ --bg-primary: #ffffff; --bg-secondary: #f5f5f7; --text-primary: #1d1d1f; --text-secondary: #86868b; --accent: #0071e3; /* Dark mode */ --bg-primary: #000000; --bg-secondary: #1d1d1f; --text-primary: #f5f5f7; ``` ## Spacing System ```css --space-xs: