open-design/design-systems/apple/DESIGN.md

Design System Inspired by Apple

Category: Media & Consumer Consumer electronics. Premium white space, SF Pro, cinematic imagery.

1. Visual Theme & Atmosphere

Apple's web language is a precision editorial system that alternates between gallery-like calm and retail-density information blocks. The visual tone stays restrained: broad neutral canvases, quiet chrome, and product imagery given almost all of the expressive weight. The interface is engineered to disappear so hardware, materials, and finish options become the narrative foreground.

Across the five analyzed pages, the rhythm is consistent but not monolithic. Marketing surfaces (homepage and Environment) use cinematic black-and-light chaptering, while commerce surfaces (Store and Shop flows) introduce tighter spacing, more utility controls, and denser card stacks without breaking the core brand grammar. The result is one system with two gears: showcase mode and transaction mode.

Typography is the stabilizer. SF Pro Display carries hero and merchandising hierarchy with compact line heights and controlled tracking, while SF Pro Text handles product metadata, navigation, filters, and dense selection UI. The typography stays understated, but the scale range is wide enough to support both billboard hero messaging and micro utility labels.

Key Characteristics:

• Binary section rhythm: deep black scenes (#000000) alternating with pale neutral fields (#f5f5f7)
• Single blue accent family for action and link semantics (#0071e3, #0066cc, #2997ff)
• Dual operating modes in one system: cinematic showcase modules and dense commerce configurators
• Heavy reliance on imagery and material finishes; UI chrome remains visually thin
• Tight headline metrics (SF Pro Display, semibold) paired with compact body/link typography (SF Pro Text)
• Pill and capsule geometry as signature action language (18px to 980px and circular controls)
• Depth used sparingly; contrast and surface separation do most of the layering work
• Multi-page color-block rhythm: black hero chapters -> pale neutral merchandising fields -> utility white retail surfaces -> dark micro-surfaces for controls

2. Color Palette & Roles

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

Primary

• Absolute Black (#000000): Immersive hero canvases, high-drama product chapters, deep UI anchors.
• Pale Apple Gray (#f5f5f7): Main light surface for feature bands, comparison blocks, and editorial transitions.
• Near-Black Ink (#1d1d1f): Primary text and dark-fill control color on light canvases.

Secondary & Accent

• Apple Action Blue (#0071e3): Primary action fill and focus-signaling brand accent.
• Body Link Blue (#0066cc): Inline link color optimized for long-form readability.
• High-Luminance Link Blue (#2997ff): Bright link treatment on darker scenes where stronger contrast is required.

Surface & Background

• Pure White Canvas (#ffffff): Retail/product-list backgrounds and dense transactional sections.
• Graphite Surface A (#272729): Dark card and media-control context layer.
• Graphite Surface B (#262629): Slightly deeper dark utility layer for control groupings.
• Graphite Surface C (#28282b): Elevated dark supporting surfaces.
• Graphite Surface D (#2a2a2c): Darkest elevated step used for separation in richer dark scenes.

Neutrals & Text

• Secondary Neutral Gray (#6e6e73): Body secondary copy, helper descriptions, tertiary metadata.
• Soft Border Gray (#d2d2d7): Dividers, subtle outlines, and muted utility containment.
• Mid Border Gray (#86868b): Stronger field outlines in product-configuration and filter contexts.
• Utility Dark Gray (#424245): Dark-neutral text/surface crossover in store contexts.

Semantic & Accent

• Selection/Focus Signal (#0071e3): Shared focus and selected-state signal across marketing and commerce contexts.
• Error/Warning/Success: No distinct semantic palette was consistently visible in the extracted surface set.

Gradient System

• The extracted pages are overwhelmingly solid-surface driven. Visual richness comes from photography and finish rendering rather than persistent UI gradients.

3. Typography Rules

Font Family

• Display Family: SF Pro Display, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Text Family: SF Pro Text, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Usage Split: Display family handles hero/product headlines and merchandising headings; Text family handles navigation, controls, labels, and dense commerce copy.

Hierarchy

Role	Size	Weight	Line Height	Letter Spacing	Notes
Hero Display XL	80px	600	1.00-1.05	-1.2px	Environment/store hero scale
Hero Display L	56px	600	1.07	-0.28px	Homepage hero moments
Section Display	48px	500-600	1.08	-0.144px	Major chapter headings
Product Heading	40px	600	1.10	normal	Product and campaign section titles
Feature Display	38px	600	1.21	0.152px	Device and merchandising callouts
Promo Display	32px	300-600	1.09-1.13	0.128px to 0.352px	Module-level sub-heroes
Card/Product Title	28px	600	1.14	0.196px	Tile-level naming and key copy
Utility Heading	24px	600	1.17	0.216px / -0.2px	Configurator and grouped content headers
Link/Action Heading	21px	600	1.14-1.38	0.231px	Larger promotional links
Subhead	19px	600	1.21	0.228px	Compact section intros
Body Primary	17px	400	1.47	-0.374px	Standard body and retail descriptions
Body Emphasis	17px	600	1.24	-0.374px	Emphasized labels and key values
Control Label	14px	400-600	1.29-1.47	-0.224px	Buttons, helper labels, compact nav text
Micro UI	12px	400-600	1.00-1.33	-0.12px	Fine print, micro labels
Legal/Meta	10px	400	1.30-1.47	-0.08px	Dense metadata and legal support text

Principles

• Continuity across page types: The same typographic DNA spans cinematic launches and product-purchase flows, preventing a brand split between marketing and commerce.
• Compression at scale: Display tiers use tight leading and controlled tracking to feel machined and product-first.
• Readable density at retail depth: SF Pro Text balances compactness with enough vertical rhythm for long product lists and option matrices.
• Measured weight ladder: 600 is the dominant emphasis weight; 700 appears selectively; 300 is used sparingly for contrast in larger lines.

Note on Font Substitutes

• Closest freely available substitutes: Inter for text-heavy implementation and SF Pro Display-like metrics approximated with Inter Tight for headings.
• When substituting, increase line-height slightly (+0.02 to +0.06) on body sizes and reduce negative tracking intensity to preserve readability.

4. Component Stylings

Buttons

• Primary Fill Action: #0071e3 background, #ffffff text, 8px radius, compact horizontal padding (commonly 8px 15px). Used for decisive purchase/progression actions.
• Dark Fill Action: #1d1d1f background, #ffffff text, 8px radius. Used when light surfaces need a restrained high-contrast primary.
• Pill/Capsule Action Family: large capsule actions at 18px-56px radii and extreme pill links at 980px. Establishes Apple’s soft but precise call-to-action silhouette.
• Utility Filter/Button Shells: light shells (#fafafc or translucent white) with subtle gray borders (#d2d2d7 / #86868b) for dense configuration contexts.
• Pressed Behavior: active controls commonly reduce scale or shift fill slightly to indicate physical press confirmation.

Cards & Containers

• Editorial/Product Cards: light cards on #f5f5f7 or white fields with minimal framing and image-first composition.
• Dark Utility Cards: graphite steps (#272729 to #2a2a2c) used for overlays, media controls, and dark-context modules.
• Configurator Panels: rounded containers (often 12px-18px) with clear but restrained border definition.
• Carousel/Spotlight Modules: larger rounded shells (28px-36px) for featured content lanes.

Inputs & Forms

• Retail Input Fields: translucent or white backgrounds, dark text (#1d1d1f), border-led containment (#86868b).
• Selection Controls: circular/toggle-like control geometry appears frequently in product selection interfaces.
• Density Strategy: form fields remain visually quiet to keep device imagery and pricing hierarchy dominant.

Navigation

• Global Marketing Nav: compact dark translucent bar with small-type links and restrained iconography.
• Store/Sub-shop Nav Layers: additional utility bars, chips, and segmented controls for category and product narrowing.
• Link Hierarchy: link blues remain the primary interactive signal while neutral text supports dense navigation sets.

Image Treatment

• Object-First Photography: hardware and accessories are foregrounded on controlled solid surfaces.
• High-fidelity finish rendering: reflective/material details are central to visual persuasion.
• Mixed framing: full-bleed hero scenes coexist with rounded retail cards and tightly cropped merchandising thumbnails.

Other Distinctive Components

• Product Configurator Matrix: option stacks and selectors combining chips, radio-style controls, and contextual pricing/summary blocks.
• Carousel Control Dots/Arrows: circular control vocabulary in muted overlays for gallery progression.
• Environment Story Panels: narrative chapters that blend editorial typography with cinematic product/environment visuals.

5. Layout Principles

Spacing System

• Base unit is effectively 8px, but the system supports dense micro-steps for precision alignment.
• Frequently reused spacing values across pages: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
• Universal rhythm constants visible across both marketing and retail flows: 8px unit scaffolding with 14-20px utility intervals for component padding and list spacing.

Grid & Container

• Showcase pages: large central columns with broad horizontal breathing room and full-width color chapters.
• Commerce pages: tighter multi-column product and control grids with frequent modular stacking.
• Container behavior: constrained readable core with generous outer margins at desktop widths.

Whitespace Philosophy

• Scene pacing: major visual chapters use broad top/bottom breathing room.
• Information compaction where needed: retail pages deliberately compress spacing to expose more actionable information per viewport.
• Contrast-led separation: section transitions rely more on surface changes than decorative separators.

Border Radius Scale

• 5px: tiny utility links/tags and minor small shells.
• 8px-12px: standard controls and compact fields.
• 16px-18px: cards, module frames, and commerce panels.
• 28px-36px: larger module and spotlight containers.
• 56px / 100px / 980px: capsules, large pills, and signature elongated CTA forms.
• 50%: circular media and selection controls.

6. Depth & Elevation

Level	Treatment	Use
Level 0	Flat neutral surfaces (#ffffff, #f5f5f7, #000000)	Main narrative and product stages
Level 1	Subtle border containment (#d2d2d7, #86868b)	Filters, input fields, utility cards
Level 2	Soft shadow (rgba(0,0,0,0.08) to rgba(0,0,0,0.22) where present)	Highlighted cards and elevated merchandise modules
Level 3	Dark-surface stepping (#272729 -> #2a2a2c)	Overlays, media controls, dark utility clusters
Accessibility	Blue focus signal (#0071e3)	Keyboard and selection emphasis

Depth is intentionally restrained. Apple favors tonal contrast, surface stepping, and compositional hierarchy over heavy shadow stacks.

Decorative Depth

• Decorative depth is primarily created by photographic realism and material rendering, not synthetic UI effects.
• Translucent overlays and glass-like utility bars provide mild atmospheric layering in navigation and controls.

7. Do's and Don'ts

Do

• Use the neutral triad (#000000, #f5f5f7, #ffffff) as the structural foundation.
• Reserve blue accents for genuine action and navigation semantics.
• Keep typography tight and deliberate, especially at display scales.
• Maintain the capsule/circle geometry language for controls and key actions.
• Let product imagery carry visual drama; keep chrome understated.
• Use border-led containment in dense retail contexts instead of heavy card ornamentation.
• Preserve clear separation between showcase modules and transactional modules while keeping core tokens shared.

Don't

• Don’t introduce broad secondary accent palettes that compete with Apple blue.
• Don’t overuse shadows, glow effects, or decorative gradients in core UI chrome.
• Don’t mix unrelated font families or loosen tracking indiscriminately.
• Don’t flatten all corners to a single radius; Apple uses purposeful radius tiers.
• Don’t overload commerce modules with thick borders or loud visual effects.
• Don’t remove neutral contrast cadence between dark and light chapters.
• Don’t treat marketing and purchase flows as separate design systems.

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Small Mobile	374px and below	Tightened retail controls, single-column product stacks
Mobile	375px-640px	One-column modules, compact action rows, condensed selectors
Tablet	641px-833px	Expanded cards and mixed 1-2 column transitions
Tablet Wide	834px-1023px	More stable multi-column merchandising, larger text blocks
Desktop	1024px-1240px	Full retail layouts and product comparison structures
Desktop Wide	1241px-1440px	Marketing hero expansion and broader section spacing
Large Desktop	1441px+	Maximum chapter breathing room and wide editorial composition

Touch Targets

• Primary and secondary actions are generally presented in tap-friendly pill/button geometries.
• Circular media and selection controls align with minimum touchable intent in mobile contexts.
• Dense commerce UI uses compact labels but maintains clear hit regions via surrounding shape padding.

Collapsing Strategy

• Marketing hero typography scales down in discrete tiers while preserving hierarchy contrast.
• Product and commerce grids collapse from multi-column to stacked cards with persistent selector visibility.
• Utility navigation compresses into simpler link/control groupings while preserving key actions.
• Option/configuration clusters become vertically sequenced to keep purchase flow linear on small screens.

Image Behavior

• Product imagery preserves aspect and centrality through breakpoints.
• Hero visuals remain dominant on mobile, with text repositioned around media priority.
• Retail thumbnails stay legible via tighter crop logic and denser card stacking.
• Image-led modules continue to anchor the rhythm as layout density increases.

9. Agent Prompt Guide

Quick Color Reference

• Primary action blue: Apple Action Blue (#0071e3)
• Inline link blue: Body Link Blue (#0066cc)
• Dark chapter canvas: Absolute Black (#000000)
• Light chapter canvas: Pale Apple Gray (#f5f5f7)
• Primary text on light: Near-Black Ink (#1d1d1f)
• Secondary text: Secondary Neutral Gray (#6e6e73)
• Retail border soft: Soft Border Gray (#d2d2d7)
• Retail border strong: Mid Border Gray (#86868b)

Example Component Prompts

• "Design an Apple-style product hero on a black canvas (#000000) with SF Pro Display semibold headline (48-56px), concise supporting copy, and two capsule CTAs using #0071e3 and #1d1d1f."
• "Create a commerce configuration panel on white (#ffffff) with 18px rounded cards, #86868b border fields, SF Pro Text 17px body copy, and compact option selectors."
• "Build a merchandising card grid alternating #f5f5f7 and white surfaces, with image-first cards, restrained shadows, and 14-17px SF Pro Text metadata."
• "Generate a carousel control cluster using circular buttons (50% radius), muted gray overlays, and clear active feedback for gallery navigation."
• "Compose a mixed marketing + retail page rhythm: dark showcase chapter -> light feature chapter -> dense product list module while keeping blue accents only for actions and links."

Iteration Guide

1. Lock the neutral foundation first (#000000, #f5f5f7, #ffffff) before tuning accents.
2. Keep blue accents scarce and purposeful; if everything is blue, hierarchy collapses.
3. Tune typography in this order: display scale, body readability, then micro labels.
4. Match radius by component class (field, card, capsule, circle) rather than one-size-fits-all rounding.
5. Increase density gradually when moving from showcase sections to commerce sections.
6. Validate that product imagery remains the strongest visual layer after each revision.

Known Gaps

• Distinct semantic status colors (error/warning/success) were not consistently visible in the extracted page set.
• Some interaction micro-states vary by module and are not represented as universal system tokens.
• A few retail modules expose context-specific typography overrides that do not appear across all five pages.