Switch between the rendered Visual preview and the Raw DESIGN.md.
Apple's design system embodies minimalist elegance paired with sophisticated restraint. The aesthetic prioritizes clarity and intuitive navigation through generous whitespace, refined typography, and a carefully orchestrated color palette dominated by deep neutrals and vibrant accents. The system exudes premium quality through precise spacing, deliberate hierarchy, and subtle depth—creating an atmosphere of innovation tempered by accessibility. Every interface element serves a purpose, with ornamental design eliminated in favor of functional beauty. The visual language conveys confidence and approachability simultaneously, making complex technology feel intuitive and welcoming.
Key Characteristics
#0071E3): Used for primary call-to-action buttons, active states, and critical interactive elements requiring immediate user attention#006EDB): Interactive state for primary blue elements when hovered or focused#0076DF): Pressed/active state for primary blue interactive elements#0077ED): Specialized accent for specific interactive contexts and secondary prominence elements#1D1D1F): Primary text color for all body copy, headings, and standard text content—used most frequently throughout the system#333336): Secondary text for less emphasized content, subheadings, and supporting information#6E6E73): Tertiary text for captions, timestamps, and minimal-emphasis supporting text#000000): Pure black for maximum contrast scenarios and critical emphasis#FFFFFF): Pure white for backgrounds and content surfaces#272729): Dark neutral for subtle backgrounds and card bases#18181A): Deep neutral for premium dark mode or high-contrast backgrounds#EDEDF2): Subtle background for bordered containers, dividers, and light surface differentationrgba(255, 255, 255, 0.8)): Semi-transparent white surface for floating navigation bars with frosted-glass effectrgba(0, 0, 0, 0.56)): Soft implicit border color for subtle visual separationrgba(0, 0, 0, 0.8)): Semi-transparent dark overlay for secondary text and muted contextsPrimary: SF Pro Text, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Secondary: SF Pro Display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | SF Pro Display | 40px | 600 | 44px | 0px | Large hero headlines on landing pages and feature sections |
| Heading Large | SF Pro Display | 28px | 400 | 32px | 0px | Major section headings and primary card titles |
| Heading Primary | SF Pro Display | 24px | 600 | 28px | 0px | Card headlines and prominent content headers |
| Heading Secondary | SF Pro Text | 34px | 600 | 50px | 0px | Large subheadings and prominent titles |
| Body Default | SF Pro Text | 17px | 400 | 25px | 0px | Standard paragraph text and body content |
| Body Compact | SF Pro Text | 17px | 400 | 21px | 0px | Navigation links and compact text elements |
| Small Label | SF Pro Text | 12px | 400 | 16px | 0px | Caption, meta information, and supporting labels |
| Eyebrow | SF Pro Text | 12px | 400 | 16px | 0px | Descriptive labels above headings |
| Button | SF Pro Text | 17px | 400 | 25px | 0px | Primary and secondary button text |
| Link | SF Pro Text | 17px | 600 | 21px | 0px | Interactive link text with weight emphasis |
| Code | SF Pro Text | 13px | 400 | 20px | 0px | Monospaced code blocks and technical content |
#0071E3#FFFFFF12px 24px50%#006EDB#0076DF#0071E312px 24px50%2px solid #0071E3rgba(0, 113, 227, 0.05), Border Color #006EDB2px solid #0076DF#1D1D1F12px 8pxrgba(0, 0, 0, 0.05)rgba(0, 0, 0, 0.08)#FFFFFF#1D1D1F48pxrgba(0, 0, 0, 0)#1D1D1F32px 40px1px solid #EDEDF2rgba(0, 0, 0, 0.56)8px 0pxrgba(255, 255, 255, 0.8)#1D1D1F0px 20px1px solid rgba(0, 0, 0, 0.1)0px 8px#0071E3rgba(0, 0, 0, 0.8)0px 8px#0071E3#0071E3#FFFFFF#1D1D1F#6E6E7312px 16px1px solid #D5D5D7#0071E3, Box Shadow 0 0 0 3px rgba(0, 113, 227, 0.1)#1D1D1F#0071E3#006EDB, Text Decoration underline#0076DFrgba(0, 0, 0, 0.8)#0071E3Base Unit: 4px
Scale:
8px — Compact padding for inline elements and tight spacing12px — Small margin between related components16px — Standard padding for content containers20px — Default margin between sections24px — Comfortable padding for card interiors28px — Large spacing for major section separation32px — Premium padding for feature cards40px — Extra-large padding for hero sections44px — Vertical rhythm base and touch target height48px — Hero section internal spacing52px — Extra-large gaps between major sections56px — Maximum section separationUsage Context:
Apple's design prioritizes negative space as an active design element. Whitespace reduces cognitive load, emphasizes content, and creates visual hierarchy without additional visual decoration. The system uses generous padding and margins to ensure components never feel cramped. Empty space is intentional and contributes to perceived premium quality.
0px — Cards, containers, and large surfaces maintain sharp corners for clarity8px — Input fields and form elements for approachability50% — Buttons for iconic, contained interaction targets| Level | Treatment | Use |
|---|---|---|
| Flat (None) | No shadow, solid backgrounds | Standard cards, text, and primary content surfaces |
| Subtle (Raised) | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) | Floating buttons and secondary surfaces |
| Medium (Floating) | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) | Modals, popovers, and prominent overlays |
| Deep (Emphasis) | box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16) | High-priority modals and critical overlays |
Shadow Philosophy:
Apple's elevation system uses minimal shadows to maintain clarity. Shadows are achieved through subtle blur and opacity rather than hard offsets, creating soft depth perception. Semi-transparent navigation bars use frosted-glass effects (background blur with slight transparency) to establish layering without heavy shadows. Depth is primarily conveyed through color, positioning, and scale rather than dramatic shadows.
#0071E3 exclusively for primary interactive elements requiring user attention1px solid #EDEDF2) rather than heavy shadows#0071E3 and its states suffice for all interactive elements| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column, full-width containers, increased padding, large touch targets |
| Tablet | 768px–1023px | Two-column layouts, reduced padding (24px–32px), optimized for portrait/landscape |
| Desktop | 1024px–1440px | Three-column layouts, max-width 1262px container, standard padding |
| Large Desktop | 1441px+ | Three-column layouts maintained, centered container with symmetric margins |
#0071E3)#006EDB)#0076DF)#1D1D1F)#333336)#6E6E73)#FFFFFF)#EDEDF2)rgba(255, 255, 255, 0.8))rgba(0, 0, 0, 0.8))#272729)All interactive elements use #0071E3 for primary actions. Hover states transition to #006EDB, active states to #0076DF. No other accent colors exist in the primary palette.
Button minimum height is 44px. All buttons use 50% border radius. Primary buttons are filled blue; secondary buttons have blue borders with transparent background; ghost buttons have no border and neutral text.
Maintain spacing hierarchy: 24px–32px internal padding for cards, 40px–56px between sections. Minimum 12px margins between adjacent components. Never use padding smaller than 8px except for inline spacing.
Typography uses two font families: SF Pro Display for headlines (24px–40px, weight 600) and SF Pro Text for body (12px–17px, weight 400–600). Line height scales proportionally; larger text uses proportionally larger line height.
Cards and containers use sharp corners (0px radius) except buttons (50% radius) and inputs (8px radius). Borders on cards are optional; use 1px solid #EDEDF2 only for secondary grouping.
Navigation bars use semi-transparent white (rgba(255, 255, 255, 0.8)) with frosted-glass effect. Standard cards use solid white (#FFFFFF). No drop shadows on primary surfaces; reserve subtle shadows for floating modals only.
Text hierarchy prioritizes weight escalation over size growth. Body text is 17px weight 400; headlines increase to weight 600–700 before increasing size. Captions and labels are 12px weight 400.
Neutral palette dominates: #1D1D1F for primary text (used 563+ times), #333336 for secondary, #6E6E73 for captions. These colors paired with generous whitespace create the system's premium aesthetic.
Responsive collapsing: Mobile uses single columns with increased padding (24px–32px). Tablet uses two columns with moderate padding (32px). Desktop uses three columns with standard max-width 1262px container. All text sizes reduce proportionally on mobile by 12–16px.
Every interactive element respects 44px touch minimum. Navigation items, buttons, and links all maintain 44px height. Input fields are 44px tall with 16px horizontal padding. Spacing between touch targets is minimum 8px on mobile, 12px on desktop.