| name | apple-design |
| description | Apply Apple's design system when building UI. Use this skill when the user asks to create Apple-inspired interfaces, wants the Apple aesthetic (clean, minimal, product-hero photography, SF Pro typography, cinematic black/white sections), or references Apple's website design language. Provides complete design tokens, component specs, typography rules, and layout principles. |
| metadata | {"author":"VoltAgent/awesome-design-md","version":"1.0.0"} |
Apple-Inspired Design System
This skill provides Apple's complete web design language — color palette, typography, components, layout principles, and responsive behavior. Use it to generate pixel-perfect Apple-style interfaces.
1. Visual Theme & Atmosphere
Apple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible.
Key Characteristics:
- SF Pro Display/Text with optical sizing — letterforms adapt automatically to size context
- Binary light/dark section rhythm: black (
#000000) alternating with light gray (#f5f5f7)
- Single accent color: Apple Blue (
#0071e3) reserved exclusively for interactive elements
- Product-as-hero photography on solid color fields — no gradients, no textures, no distractions
- Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact
- Full-width section layout with centered content — the viewport IS the canvas
- Pill-shaped CTAs (980px radius) creating soft, approachable action buttons
- Generous whitespace between sections allowing each product moment to breathe
2. Color Palette & Roles
Primary
- Pure Black (
#000000): Hero section backgrounds, immersive product showcases
- Light Gray (
#f5f5f7): Alternate section backgrounds, informational areas
- Near Black (
#1d1d1f): Primary text on light backgrounds, dark button fills
Interactive
- Apple Blue (
#0071e3): Primary CTA backgrounds, focus rings — the ONLY chromatic color
- Link Blue (
#0066cc): Inline text links on light backgrounds
- Bright Blue (
#2997ff): Links on dark backgrounds
Text
- White (
#ffffff): Text on dark backgrounds, button text on blue/dark CTAs
- Near Black (
#1d1d1f): Primary body text on light backgrounds
- Black 80% (
rgba(0, 0, 0, 0.8)): Secondary text, nav items on light backgrounds
- Black 48% (
rgba(0, 0, 0, 0.48)): Tertiary text, disabled states
Surface & Dark Variants
- Dark Surface 1 (
#272729): Card backgrounds in dark sections
- Dark Surface 2 (
#262628): Subtle surface variation
- Dark Surface 3 (
#28282a): Elevated cards on dark backgrounds
- Dark Surface 4 (
#2a2a2d): Highest dark surface elevation
- Dark Surface 5 (
#242426): Deepest dark surface tone
Button States
- Button Active (
#ededf2): Active/pressed state for light buttons
- Button Default Light (
#fafafc): Search/filter button backgrounds
- Overlay (
rgba(210, 210, 215, 0.64)): Media control scrims
- White 32% (
rgba(255, 255, 255, 0.32)): Hover state on dark modal close buttons
Shadows
- Card Shadow (
rgba(0, 0, 0, 0.22) 3px 5px 30px 0px): Soft, diffused elevation for product cards
3. Typography Rules
Font Family
- Display (≥20px):
SF Pro Display, fallbacks: SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
- Body (<20px):
SF Pro Text, fallbacks: SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|---|
| Display Hero | SF Pro Display | 56px | 600 | 1.07 | -0.28px |
| Section Heading | SF Pro Display | 40px | 600 | 1.10 | normal |
| Tile Heading | SF Pro Display | 28px | 400 | 1.14 | 0.196px |
| Card Title | SF Pro Display | 21px | 700 | 1.19 | 0.231px |
| Sub-heading | SF Pro Display | 21px | 400 | 1.19 | 0.231px |
| Nav Heading | SF Pro Text | 34px | 600 | 1.47 | -0.374px |
| Sub-nav | SF Pro Text | 24px | 300 | 1.50 | normal |
| Body | SF Pro Text | 17px | 400 | 1.47 | -0.374px |
| Body Emphasis | SF Pro Text | 17px | 600 | 1.24 | -0.374px |
| Button Large | SF Pro Text | 18px | 300 | 1.00 | normal |
| Button | SF Pro Text | 17px | 400 | 2.41 | normal |
| Link | SF Pro Text | 14px | 400 | 1.43 | -0.224px |
| Caption | SF Pro Text | 14px | 400 | 1.29 | -0.224px |
| Caption Bold | SF Pro Text | 14px | 600 | 1.29 | -0.224px |
| Micro | SF Pro Text | 12px | 400 | 1.33 | -0.12px |
| Nano | SF Pro Text | 10px | 400 | 1.47 | -0.08px |
Principles
- Optical sizing: SF Pro switches between Display (≥20px) and Text (<20px) automatically
- Weight restraint: 300-700 range, mostly 400 and 600. Weight 700 is rare, 300 only for large decorative text
- Negative tracking at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px
- Extreme line-height range: Headlines compress to 1.07, body opens to 1.47
4. Component Stylings
Buttons
Primary Blue (CTA)
- Background:
#0071e3 | Text: #ffffff | Padding: 8px 15px | Radius: 8px
- Font: SF Pro Text, 17px, weight 400
- Focus:
2px solid #0071E3 outline
Primary Dark
- Background:
#1d1d1f | Text: #ffffff | Padding: 8px 15px | Radius: 8px
Pill Link (Learn More / Shop)
- Background: transparent | Text:
#0066cc (light) / #2997ff (dark)
- Radius: 980px | Border: 1px solid
#0066cc
- Font: SF Pro Text, 14-17px | Hover: underline
Filter / Search Button
- Background:
#fafafc | Text: rgba(0, 0, 0, 0.8) | Padding: 0px 14px | Radius: 11px
- Border: 3px solid
rgba(0, 0, 0, 0.04)
Media Control
- Background:
rgba(210, 210, 215, 0.64) | Radius: 50% | Active: scale(0.9)
Cards & Containers
- Background:
#f5f5f7 (light) or #272729-#2a2a2d (dark)
- Border: none | Radius: 5-8px
- Shadow:
rgba(0, 0, 0, 0.22) 3px 5px 30px 0px for elevated cards
- Hover: no standard hover — cards are static, links within them are interactive
Navigation
- Background:
rgba(0, 0, 0, 0.8) with backdrop-filter: saturate(180%) blur(20px)
- Height: 48px | Text:
#ffffff at 12px, weight 400
- The nav floats above content with dark translucent glass regardless of section background
Distinctive Components
Product Hero Module
- Full-viewport-width section, solid background (black or
#f5f5f7)
- Product name: SF Pro Display, 56px, weight 600
- Two pill CTAs: "Learn more" (outline) + "Buy" (filled)
Product Grid Tile
- Square card, product image 60-70% of tile
- Product name + description + "Learn more" / "Shop" links
Feature Comparison Strip
- Horizontal scroll of product variant cards with image, name, key specs
5. Layout Principles
Spacing System
- Base unit: 8px
- Scale: 2, 4, 5, 6, 7, 8, 9, 10, 11, 14, 15, 17, 20, 24px
Grid & Container
- Max content width: ~980px
- Hero: full-viewport-width with centered content
- Product grids: 2-3 columns within centered container
- Single-column for hero moments
Whitespace Philosophy
- Each product section occupies near full-viewport height
- Alternating background colors (black,
#f5f5f7) signal new "scenes"
- Tight text (negative letter-spacing) surrounded by vast space creates tension
Border Radius Scale
- Micro (5px): Small containers | Standard (8px): Buttons, cards
- Comfortable (11px): Search inputs | Large (12px): Feature panels
- Full Pill (980px): CTA links | Circle (50%): Media controls
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat | No shadow | Standard content sections |
| Navigation Glass | backdrop-filter: saturate(180%) blur(20px) on rgba(0,0,0,0.8) | Sticky nav bar |
| Subtle Lift | rgba(0, 0, 0, 0.22) 3px 5px 30px 0px | Product cards |
| Media Control | rgba(210, 210, 215, 0.64) bg + scale transforms | Play/pause buttons |
| Focus | 2px solid #0071e3 outline | Keyboard focus states |
Shadow is extremely rare. The one shadow (3px 5px 30px, 0.22 opacity) is soft and diffused. Most elevation comes from background color contrast.
7. Do's and Don'ts
Do
- Use SF Pro Display at 20px+ and SF Pro Text below 20px
- Apply negative letter-spacing at all text sizes
- Use Apple Blue (
#0071e3) ONLY for interactive elements
- Alternate black and
#f5f5f7 section backgrounds
- Use 980px pill radius for CTA links
- Keep product imagery on solid-color fields
- Use translucent dark glass (
rgba(0,0,0,0.8) + blur) for navigation
- Compress headline line-heights to 1.07-1.14
Don't
- Don't introduce additional accent colors
- Don't use heavy shadows or multiple shadow layers
- Don't use borders on cards or containers
- Don't apply wide letter-spacing to SF Pro
- Don't use weight 800 or 900
- Don't add textures, patterns, or gradients to backgrounds
- Don't make navigation opaque
- Don't center-align body text — only headlines center
- Don't use rounded corners larger than 12px on rectangles (980px is for pills only)
8. Responsive Behavior
| Breakpoint | Width | Key Changes |
|---|
| Small Mobile | <360px | Single column minimum |
| Mobile | 360-480px | Standard mobile |
| Mobile Large | 480-640px | Wider single column |
| Tablet Small | 640-834px | 2-column grids begin |
| Tablet | 834-1024px | Full tablet, expanded nav |
| Desktop Small | 1024-1070px | Standard desktop begins |
| Desktop | 1070-1440px | Full layout, max width |
| Large Desktop | >1440px | Centered, generous margins |
- Touch targets: minimum 44x44px
- Headlines: 56px → 40px → 28px on mobile
- Grids: 3-col → 2-col → single stack
- Nav: horizontal → hamburger menu
- Section color blocks persist at all breakpoints
9. Quick Reference for Agents
Color Cheat Sheet
- CTA:
#0071e3 | Light bg: #f5f5f7 | Dark bg: #000000
- Text (light):
#1d1d1f | Text (dark): #ffffff
- Links (light):
#0066cc | Links (dark): #2997ff
- Shadow:
rgba(0, 0, 0, 0.22) 3px 5px 30px 0px
Example Prompts
- "Hero section: black bg, 56px SF Pro Display weight 600, line-height 1.07, -0.28px spacing, white text. Two CTAs: outline pill + filled blue button."
- "Product card:
#f5f5f7 bg, 8px radius, no border/shadow. Image top 60%, title 28px weight 400, description 14px rgba(0,0,0,0.8)."
- "Navigation: sticky 48px,
rgba(0,0,0,0.8) + backdrop-filter: saturate(180%) blur(20px), 12px white links."
- "Alternating sections: black bg with white text →
#f5f5f7 bg with #1d1d1f text, each near full-viewport height."
