Apple Design System

Overview

Apple's digital presence is an exercise in disciplined restraint—a design philosophy where every pixel serves either content or commerce, never ornament. The canvas is a distinctive cool-gray {colors.canvas} that reads as white but carries subtle warmth, distinguishing it from sterile #fff backgrounds. Against this field, near-black {colors.ink} type renders with crystalline clarity while {colors.primary} blue—Apple's singular brand voltage—reserves itself for moments of conversion intent: primary CTAs, active links, and accent typography within product bands.

The typographic voice is defined by SF Pro, a proprietary typeface family engineered specifically for screens. The system trusts size over weight for hierarchy: headlines scale dramatically from 56px ({typography.display-xl}) down through 40px and 34px tiers, while weights remain restrained between 400 and 600—never venturing into bold territory. Body copy at {typography.body-lg} (28px) feels almost headline-like by conventional web standards, reflecting Apple's editorial confidence that product storytelling deserves reading-room proportions. Navigation and utility type shrinks to {typography.title-md} (12px) with precise negative letter-spacing, creating an information-density inversion where chrome is microscopically tight and content is expansively open.

Shape language centers on the pill: {rounded.pill} (effectively infinite radius) governs all interactive surfaces—buttons, input fields, tag containers—creating a friendly, approachable geometry that softens the precision of the grid. Cards employ {rounded.lg} (16px), balancing softness with structural clarity. Photography dominates composition: product imagery bleeds edge-to-edge within bands, often overlapping text zones with no container boundary, relying on the image's own silhouette rather than a frame.

Sub-systems are evident in the alternating band architecture: neutral {colors.canvas} hero sections give way to tinted product bands (the sky-blue {colors.surface-sky} iPad air band is canonical) before returning to dark {colors.surface-dark} footers. Each band operates as a self-contained theatrical stage where one product takes focus, surrounded by breathing room measured in {spacing.section} (100px) increments vertically.

Key Characteristics

• Cool gray canvas {colors.canvas} (#f5f5f7) replaces pure white across all content surfaces
• Electric blue {colors.primary} (#2997ff) appears only on primary actions and inline links—never as decorative fill
• SF Pro Display handles headlines and body copy; SF Pro Text manages navigation and metadata (12px and below)
• Pill-shaped {rounded.pill} interactive elements with 17px internal type sizing via {typography.button}
• 100px vertical rhythm {spacing.section} separates major product bands
• Near-black ink {colors.ink} (#1d1d1f) provides 12:1+ contrast ratios against canvas
• Muted grays form a four-step opacity/saturation ladder: {colors.muted}, {colors.muted-medium}, {colors.muted-soft}
• Product photography receives {extensions.shadows.product-card} elevation shadowing when composited over backgrounds
• Global nav uses frosted-glass {colors.surface-soft} at ~80% opacity white

Colors

Brand & Accent

• Primary ({colors.primary} — #2997ff): Apple's signature electric blue. Used exclusively on {component.button-primary} fills, selected states, and inline hyperlinks. Never deployed as a background wash or decorative element.
• Primary Hover ({colors.primary-hover} — #0071e3): Darkened blue state for hover interactions on primary buttons and links. Provides clear affordance feedback without shifting hue.
• Primary Active ({colors.primary-active} — #0066cc): Pressed/depressed state further deepening toward navy. Maintains brand recognition even under interaction pressure.
• Accent ({colors.accent} — #2997ff): Synonymous with primary in current usage. Reserved for future differentiation if secondary brand voltage is introduced (e.g., green for environmental messaging).

Surface

• Canvas ({colors.canvas} — #f5f5f7): The dominant background across all editorial and product showcase sections. This cool gray is Apple's most recognizable surface token—it reads as "white" perceptually but carries warmth that reduces eye strain during extended browsing sessions.
• Surface Soft ({colors.surface-soft} — #fbfbfd): Slightly warmer off-white used for elevated chrome like the global navigation bar. Often rendered with translucency (rgba(250, 250, 252, 0.8)) for backdrop-filter glass effects.
• Surface Strong ({colors.surface-strong} — #e8e8ed): Medium gray for disabled surfaces, inset panels, or secondary background regions requiring visual separation from canvas.
• Surface Dark ({colors.surface-dark} — #000000): Pure black reserved for footer bands and inverted product showcases. All text here switches to {colors.on-dark} (#ffffff).
• Surface Elevated ({colors.surface-elevated} — #ffffff): Pure white used sparingly for flyout menus, modal cards, and dropdown panels that must "float" above canvas content.
• Surface Sky ({colors.surface-sky} — #bfe8fc): Tinted pastel blue for thematic product bands (iPad air section). Demonstrates how individual product lines can claim chromatic territory while staying within the overall neutral palette.

Text / Ink

• Ink ({colors.ink} — #1d1d1f): Near-black default for headlines and primary body copy. This is not pure black (#000)—it's softened by ~10% luminance to reduce harshness against {colors.canvas}.
• Body ({colors.body} — #1d1d1f): Identical to ink in current deployment; maintained as separate token for potential divergence in dark mode or high-accessibility themes.
• Muted ({colors.muted} — #6e6e73): Medium gray for secondary text—navigation labels, captions, timestamps. Provides ~4.5:1 contrast against canvas meeting WCAG AA for normal text.
• Muted Medium ({colors.muted-medium} — #86868b): Lighter gray for tertiary/dismissible information—placeholder text, helper descriptions.
• Muted Soft ({colors.muted-soft} — #aeaeb2): Very light gray for footer legal text, copyright lines, and truly optional metadata. Falls below AA threshold; acceptable only for large text (>18px) or decorative use.
• On Primary ({colors.on-primary} — #ffffff): Pure white text atop {colors.primary} blue backgrounds. Achieves ~4.6:1 contrast ratio meeting AA standards for normal text.
• On Dark ({colors.on-dark} — #ffffff): White text for any {colors.surface-dark} context—footers, dark product bands, inverted hero sections.
• On Surface ({colors.on-surface} — #1d1d1f): Default readable text color for any light-surface context. Mirrors {colors.ink}.

Hairlines & Borders

• Hairline ({colors.hairline} — #d2d2d7): Standard border/divider color for separating list items, delineating card edges (when borders are used instead of shadows), and form field outlines.
• Hairline Soft ({colors.hairline-soft} — #e8e8ed): Very subtle separator for low-emphasis divisions—between repeated items in a grid, or as inactive input borders.
• Border Strong ({colors.border-strong} — #c4c4c8): Visible border for focus rings, active tab indicators, and drag-region boundaries. Used when a line must be unmissable but not aggressive.

Semantic

• Error ({colors.error} — #ff3b30): Apple's standard red for validation failures, destructive action warnings, and system alerts. High saturation, warm-leaning hue.
• Success ({colors.success} — #30d158): Green for confirmation states, completed operations, and positive status indicators.
• Warning ({colors.warning} — #ff9f0a): Amber/orange for cautionary messages, pending states, and attention-required notices.
• Info ({colors.info} — #2997ff): Blue informational callouts, distinct from actionable primary links.
• Link ({colors.link} — #0071e3): Standard hyperlink blue, slightly darker than {colors.primary} to indicate navigational (vs. action) intent.
• Link Active ({colors.link-active} — #005bb5): Visited or pressed link state, deepening toward traditional web-safe blue.

Typography

Font Family

The system employs SF Pro, Apple's proprietary typeface family designed explicitly for legibility across Retina displays. Two sub-families handle distinct roles:

• SF Pro Display (optical size Large) manages all headline and body-copy duties above 17px. It features slightly expanded letterforms, optimized x-height ratios for paragraph readability, and carefully tuned hinting for crisp rendering at sizes 21–56px. This face powers {typography.display-xl}, {typography.display-md}, {typography.body-lg}, and {typography.body-md}.

• SF Pro Text (optical size Regular/Small) handles navigation, UI chrome, metadata, and anything 17px or below. Its tighter spacing and slightly condensed proportions suit dense information environments. This face drives {typography.display-lg}, {typography.title-lg}, {typography.title-md}, {typography.body-sm}, {typography.caption}, and {typography.button}.

A legacy fallback stack includes "Helvetica Neue", Helvetica, Arial, sans-serif ensuring graceful degradation on non-Apple devices. Specialized faces "SF Pro Icons" and "Apple Legacy Chevron" are embedded for symbol/glyph rendering (navigation chevrons, bag icons).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 600 | 1.0714 | -0.02em | Major product headlines ("iPhone") in hero bands | | {typography.display-md} | 40px | 600 | 1.1 | 0 | Section-level product names ("iPad air") | | {typography.display-lg} | 34px | 600 | 1.4706 | -0.374px | Sub-headlines, feature titles | | {typography.title-lg} | 21px | 400 | 1.381 | -0.01em | Card titles, feature subtitles | | {typography.body-lg} | 28px | 400 | 1.1429 | 0.196px | Hero sub-headlines ("Meet the latest iPhone lineup.") | | {typography.body-md} | 17px | 400 | 1.4706 | -0.22px | Paragraph body copy, product descriptions | | {typography.body-sm} | 14px | 400 | 1.4286 | -0.08px | Secondary descriptive text, fine print | | {typography.button} | 17px | 400 | 1.2941 | -0.41px | Button labels, CTA text | | {typography.nav-link} | 12px | 400 | 1.3334 | 0 | Top navigation menu items | | {typography.title-md} | 12px | 400 | 1.3334 | -0.12px | Metadata, category labels, breadcrumbs | | {typography.caption} | 11px | 400 | 1.4545 | -0.04px | Legal lines, timestamps, disclaimers | | {typography.label} | 10px | 500 | 1.3 | 0.05em | Status badges, NEW/SALE tags | | {typography.search-input} | 24px | 400 | 1.25 | 0 | Global nav search field placeholder |

Principles

Apple's typographic system is defined by confidence in scale rather than weight manipulation. Where typical web systems might bolden a headline to 700 or 800 weight, Apple caps at {typography.display-lg}'s 600—even its largest 56px display text never exceeds semi-bold. Hierarchy is achieved through dramatic size steps (56→40→34→28→17→12), each roughly 70% of the previous, creating a clear visual staircase without resorting to weight extremes.

Letter-spacing plays a subtle but critical role. Headlines receive slight tightening (-0.02em to -0.374px depending on size) to optically group letterforms as unified word-shapes at large sizes. Conversely, the {typography.label} token at 10px actually expands spacing (+0.05em) because tiny caps require breathing room for character recognition. The {typography.body-lg} token uniquely applies positive tracking (+0.196px), giving hero subheadlines an airy, premium feel that differentiates them from standard paragraphs.

Color-as-hierarchy is used sparingly: only {colors.primary} blue ever interrupts the monochromatic ink/muted ladder, and it does so exclusively on interactive elements (links, buttons). Accent coloring within body copy (like "air" in "iPad air") represents the rare exception where a word inherits product-line identity through color alone.

Note on Font Substitutes

SF Pro is Apple-proprietary and not available via Google Fonts or open-source channels. For non-Apple implementations, the closest visual match is Inter (Google Fonts: family=Inter:wght@400;600), which shares similar optical sizing behavior, x-height proportions, and hinting philosophy. For the Text sub-family (smaller sizes), Roboto or **system-ui` can substitute acceptably.

Define these CSS variables for substitution:

--font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
--font-text: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;

Layout

Spacing System

• Base unit: 8px (with frequent use of 15px as a "plus-one" variant for optical centering in odd-pixel contexts).
• Tokens: {spacing.xxs} (2px) for micro-adjustments; {spacing.xs} (4px) for icon gaps; {spacing.sm} (8px) standard minor unit; {spacing.md} (15px) internal component padding; {spacing.lg} (20px) element-to-element gaps; {spacing.xl} (40px) block-level separation; {spacing.xxl} (48px) section-internal breathing room; {spacing.section} (100px) major vertical band transitions.
• Section padding (vertical): {spacing.section} (100px) — applied to {component.hero-band}, {component.product-band}, and all full-width showcase sections.
• Card internal padding: {spacing.xl} (40px) per {component.card-product}; tighter {spacing.lg} (20px) for compact utility cards.
• Gutters: Content maxes at 1440px width centered; inner content gutters range from {spacing.xl} (40px) at desktop down to {spacing.md} (15px) at mobile breakpoints.

Grid & Container

• Max content width: 1440px (hard constraint on main content column); viewport extends to 2560px for ultra-wide displays with centered content well.
• Editorial density: Low. Single-column narrative flow dominates hero sections; text occupies roughly 50% of viewport width with the remainder left for imagery or whitespace.
• Desktop grid behavior: No multi-column text grid is visible in the screenshot; layout follows a single-column asymmetric split: headline/subtext/CTAs stacked left-center (or fully centered), product imagery occupying the remaining horizontal space with generous margins.
• Hero column splits: Text block (headline + subheadline + CTA pair) is centered horizontally; product imagery sits below text with ~80–120px vertical offset, creating layered depth.

Whitespace Philosophy

The system practices aggressive generosity with vertical whitespace. A typical hero band contains only three text elements and two buttons, yet commands 100px of padding above and below. This is not empty space—it's compositional space that allows product photography to breathe and prevents the page from feeling like a dense catalog. Horizontal whitespace is similarly expansive: text columns rarely exceed 600px wide, leaving substantial margins even on laptop viewports.

Header Architecture

[Logo] [Store][Mac][iPad][iPhone][Watch][Vision][AirPods][TV&Home][Entertainment][Accessories][Support] ... [Search🔍][Bag🛒]
|<------------------------------------------- 1024px max-content -------------------------------------------->|

• Flush-left Apple logo (17px icon)
• Center-weighted navigation links (12px {typography.nav-link}, ~10px horizontal spacing)
• Flush-right utilities: Search icon, Bag icon (each 17×17px in 44px touch targets)
• Background: {colors.surface-soft} with translucency; fixed position with height {spacing.nav-height} (44px)
• Full-width underline/shadow appears on scroll (via {component.globalnav-scrim} overlay)

Hero Section (iPhone)

+----------------------------------------------------------------------------------+
|                                                                                  |
|                              [iPhone]                                            |
|                        Meet the latest iPhone lineup.                            |
|                                                                              |
|                    [Learn more]      [Shop iPhone]                               |
|                                                                                  |
|                                                                                  |
|            [iPhone Black]   [iPhone White]   [iPhone Pink]   [iPhone Side]       |
|                                                                                  |
+----------------------------------------------------------------------------------+

• Centered text column: headline ({typography.display-lg}, 34px), subheadline ({typography.body-lg}, 28px), then CTA pair with 8–12px gap
• CTA pair: solid blue {component.button-primary} left, outlined {component.button-secondary} right
• Product image row below: 4 device renderings (back-black, back-white, side-pink, profile-stainless) displayed edge-to-edge across content width
• Background: {colors.canvas}
• No card/container wrapping the product images—they sit directly on canvas

Product Band (iPad air)

+==================================================================================+
||                                                                                ||
||                           [iPad] [air (blue)]                                  ||
||                      Now supercharged by M4.                                   ||
||                                                                                ||
++=================================================================================++

• Background shifts to {colors.surface-sky} (light blue tint) creating visual rhythm after the neutral iPhone hero
• Headline uses mixed-color treatment: "iPad" in {colors.ink}, "air" in {colors.primary} (accent color injection identifying product sub-line)
• Same typographic scale as hero but with {typography.display-xl} (56px) for maximum impact
• Content remains center-aligned; likely contains product imagery below the fold (not visible in screenshot)

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat baseline | No shadow, direct-on-canvas placement | Hero text, navigation bar, footer text blocks | | 1 – Hairline outline | 1px {colors.hairline} border | Input fields, button secondary borders, list dividers | | 2 – Soft drop | {extensions.shadows.sm} (0 1px 3px rgba(0,0,0,0.08)) | Subtle lift on hover states, tooltip containers | | 3 – Modal/dropdown elevation | {extensions.shadows.md} (0 4px 16px rgba(0,0,0,0.12)) | Global nav flyout menus, search suggestions panel | | 4 – Featured product | {extensions.shadows.product-card} (rgba(0,0,0,0.22) 3px 5px 30px) | Product image composites floating above background | | 5 – Scrim/overlay | Semi-transparent black layer ({component.globalnav-scrim}) | Nav menu backdrop, modal dimming |

Philosophy: Apple's depth system is predominantly flat with targeted exceptions. Most UI lives at Level 0—buttons, text, and navigation have no intrinsic shadow, relying on color contrast and typography for hierarchy. Elevation is introduced deliberately: product photography receives dramatic drop shadows to separate it from flat canvas backgrounds, creating a "object floating above surface" illusion. Modal and flyout surfaces use gentle diffusion shadows that suggest physical distance without heavy-handedness. The system avoids hard-edged box shadows entirely; all elevation uses soft-radius Gaussian blur approximations.

Decorative Depth: Beyond functional elevation, Apple employs color-block banding as atmospheric depth. Alternating between {colors.canvas}, {colors.surface-sky}, and {colors.surface-dark} creates sectional rhythm that guides the eye downward. These are not gradients or textured treatments—flat color fields that function as "stages" for each product act.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Small contained areas, tag badges, thumbnail corners | | {rounded.DEFAULT} | 980px | Default interactive radius (functionally = pill) | | {rounded.md} | 12px | Flyout panels, dropdown menus, notification toasts | | {rounded.lg} | 16px | Product cards, feature containers, media frames | | {rounded.xl} | 20px | Large presentation cards, hero image masks | | {rounded.pill} | 9999px | Explicit pill shape for buttons, search bars, pills/tags | | {rounded.full} | 50% | Circular elements (avatar placeholders, loading spinners) |

Photography Geometry

Product imagery follows full-bleed, aspect-ratio-native principles. iPhone device renders appear at approximately 3:4 or 9:16 portrait orientation, photographed at slight angles (showing back + partial side profile) to convey three-dimensionality. Images have no corner rounding—they're rectangular silhouettes whose natural shape defines the composition. When multiple products array horizontally (as in the 4-iPhone lineup), inter-product spacing is approximately 20–40px with consistent baselines. Shadows beneath products use {extensions.shadows.product-card} (deep, diffuse, 30px spread) suggesting the devices rest physically just above the canvas surface.

Avatars and user-generated content (not present in this screenshot but part of the broader system) would use {rounded.full} (50%) circular crops.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.button-secondary-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — Solid blue filled button used for primary conversion actions ("Learn more", "Buy"). Background {colors.primary} (#2997ff), text {colors.on-primary} (#ffffff), type {typography.button} (17px/400), rounded {rounded.pill}, padding 10px 21px. No border; relies on background color alone for visibility. Hover state documented as {component.button-primary-hover} which darkens to {colors.primary-hover} (#0071e3). Transition timing extracted from CSS: background-color 0.1s linear.

{component.button-secondary} — Outlined/ghost button for secondary or less-committed actions ("Shop iPhone", "Compare"). Background transparent, text {colors.link} (#0071e3), same type and geometry as primary. Features a subtle 1px border in {colors.border-strong} (#c4c4c8) providing definition without heaviness. Hover variant {component.button-secondary-hover} deepens text to {colors.link-active} (#005bb5).

{component.button-primary-hover} — Active/hover state for {component.button-primary}. Shifts background to {colors.primary-hover} (#0071e3) providing ~8% darkness increase as press feedback.

{component.button-secondary-hover} — Active/hover state for {component.button-secondary}. Text color intensifies to {colors.link-active} (#005bb5); border may darken (implementation-dependent).

Cards & Containers

{component.hero-band} — Full-width vertical band serving as the primary showcase stage. Background {colors.canvas}, text color defaults to {colors.ink}, headline type {typography.display-lg} (34px/600). Padding {spacing.section} (100px) top/bottom. Contains centered text column plus product imagery zone. No border, no shadow, no rounded corners—it is the foundational surface upon which other components rest.

{component.product-band} — Thematic variation of hero band for secondary product reveals (e.g., iPad air). Background shifts to {colors.surface-sky} (light blue tint), headline scales up to {typography.display-xl} (56px), enabling mixed-color accent text (see {component.product-band-accent-text}). Same 100px vertical padding.

{component.product-band-accent-text} — Inline text span within product-band headlines that adopts {colors.primary} blue. Used to highlight product sub-names ("air", "Pro", "Max") within otherwise black headlines. No background change—pure text color override.

{component.card-product} — General-purpose product feature card. Background {colors.canvas}, text {colors.ink}, rounded {rounded.lg} (16px), internal padding {spacing.xl} (40px). Would house product name, brief description, price, and CTA. Not visible in screenshot but inferred from system patterns.

{component.card-footer} — Site-wide footer region spanning full width. Background {colors.surface-dark} (#000000), text {colors.muted-soft} (#aeaeb2), type {typography.caption} (11px). No rounding (full-width strip), padding {spacing.xl} (40px) vertical. Contains legal links, copyright, country selector.

{component.globalnav-flyout} — Dropdown menu panel triggered by top-nav item hover/focus. Background {colors.surface-elevated} (#ffffff), text {colors.ink}, rounded {rounded.md} (12px), padding {spacing.lg} (20px). Receives {extensions.shadows.md} elevation shadow. Contains categorized link lists per product line.

{component.globalnav-scrim} — Semi-transparent overlay appearing behind open nav flyouts. Background rgba(0, 0, 0, 0.4), covering full viewport. Creates depth separation between nav layer and underlying content.

Inputs & Forms

{component.text-input-search} — Global navigation search field. Background transparent, text color rgb(51, 51, 54) (slightly lighter than ink for placeholder appearance), type {typography.search-input} (24px/400). Unconventional padding 1px 34px 0 accommodating leading search icon and trailing dismiss control. Appears as an overlay panel expanding from nav bar, not an inline field.

Navigation

{component.top-nav} — Fixed-position global navigation header. Background {colors.surface-soft} (translucent white at 0.8 opacity), text {colors.muted} (#6e6e73), type {typography.nav-link} (12px/400), fixed height {spacing.nav-height} (44px). Spans full viewport width; content constrained to 1440px centered. Contains logo, 11 product-category links, and utility icons.

{component.top-nav-link} — Individual navigation menu item. Transparent background, text color rgba(0, 0, 0, 0.8) (~80% black for reduced emphasis vs. active state), type {typography.nav-link}. Horizontal padding {spacing.sm} (8px). On hover, triggers {component.globalnav-flyout} panel below. Includes animated chevron indicator (see {component.icon-chevron}).

{component.top-nav-icon-btn} — Utility button for Search and Bag functions. Transparent background, text/icon color {colors.ink}, square dimensions 44×44px (meeting WCAG AAA touch target minimums). Centers 17px icon within touch area.

{component.globalnav-menu-item} — Link entry inside flyout dropdown panel. Transparent background, text rgba(0, 0, 0, 0.88) (slightly darker than nav-link for improved contrast on white flyout surface), type {typography.nav-link}, vertical padding {spacing.md} (15px). Stacked list format with optional subsection headers.

Signature Components

{component.product-hero-image} — Large-scale product photograph positioned within hero/product bands. Transparent background (images are opaque PNGs or JPEGs), text color irrelevant (image-only). Receives {extensions.shadows.product-card} for depth separation from canvas. No border, no rounding. Typically positioned below headline text with 60–100px offset.

{component.icon-chevron} — Small directional indicator (▸) appended to {component.top-nav-link} items signaling expandable submenu. Color {colors.muted} (#6e6e73), size 8px×8px. Animated on hover via keyframe globalnav-chevron-slide-in-hover (slides right 2px while fading).

{component.icon-apple-logo} — Apple logomark ( glyph) at far-left of {component.top-nav}. Color {colors.ink}, size 17px. Uses "Apple Legacy Chevron" or "SF Pro Icons" font-family for glyph rendering (not SVG).

{component.icon-search} — Magnifying glass icon in top-right nav utility area. Color {colors.ink}, size 17px, housed within {component.top-nav-icon-btn} (44px touch target).

{component.icon-bag} — Shopping bag icon in top-right nav utility area. Color {colors.ink}, size 17px, also in 44px touch target. May include badge counter (red dot) when cart has items.

{component.divider-horizontal} — 1px horizontal rule using {colors.hairline} (#d2d2d7) as text-decoration-like separator. Used between footer link groups and within flyout menus.

{component.label-small} — Compact uppercase label badge. Color {colors.muted}, type {typography.label} (10px/500 with 0.05em expanded tracking). Used for "NEW", "SALE", "PRE-ORDER" tags on product cards.

{component.link-inline} — Hyperlink within body copy or standalone context. Transparent background, text {colors.link} (#0071e3), type {typography.body-sm} (14px). Underline appears on hover (per convention, not in static spec).

{component.link-inline-active} — Hover/visited state for inline links. Text color {colors.link-active} (#005bb5).

{component.hero-subheadline} — Descriptive text immediately below hero headline. Transparent background, text {colors.body} (same as ink), type {typography.body-lg} (28px/400). Provides context ("Meet the latest iPhone lineup.") without competing visually with the display headline above.

Do's and Don'ts

Do

• Use {colors.canvas} (#f5f5f7) as your default page background—never pure white (#ffffff) for content surfaces unless it's an elevated flyout ({component.globalnav-flyout}).
• Reserve {colors.primary} (#2997ff) exclusively for interactive elements: {component.button-primary} fills, {component.link-inline} text, and {component.product-band-accent-text} word-level highlights.
• Let size carry hierarchy before weight: your largest headline should be {typography.display-xl} (56px) at weight 600, never exceeding that weight regardless of scale.
• Apply {rounded.pill} (9999px) to all button-shaped interactive elements—this is the single most recognizable shape signature of Apple's UI.
• Use 100px ({spacing.section}) vertical padding between major product bands to create the characteristic "breathing room" rhythm.
• Render body copy at {typography.body-lg} (28px) for hero-adjacent paragraphs—this is intentionally oversized compared to industry norms (typically 16–18px).
• Set product photography shadows to {extensions.shadows.product-card} (30px blur spread) to create the "floating device" illusion against flat backgrounds.
• Employ the alternating band pattern: neutral {colors.canvas} hero → tinted {colors.surface-sky} secondary product → dark {colors.surface-dark} footer.
• Use rgba(0, 0, 0, 0.8) text color for {component.top-nav-link} items (not full black) to create visual hierarchy between chrome and content.
• Keep the global nav at exactly 44px ({spacing.nav-height}) height—this matches iOS toolbar conventions and ensures consistent touch target geometry.

Don't

• Don't apply {colors.primary} as a background fill for cards, banners, or decorative blocks—blue backgrounds don't exist in this system except on buttons.
• Don't bold headlines beyond weight 600—Apple's display type never exceeds semi-bold; if you need more emphasis, increase size instead.
• Don't add gradient overlays or texture to hero backgrounds—the canvas is a flat, solid {colors.canvas} color field.
• Don't use sharp-cornered rectangles for buttons or inputs—every interactive surface must have {rounded.pill} or significant rounding (≥8px).
• Don't crowd text columns beyond 680px width—editorial content should breathe with 40%+ horizontal whitespace on laptop viewports.
• Don't mix SF Pro Display and SF Pro Text roles arbitrarily—Display for ≥17px body/headlines, Text for ≤17px chrome/navigation.
• Don't invent new color tokens outside the muted ladder (muted → muted-medium → muted-soft) for text hierarchy—opacity/saturation changes are preferred over new hues.
• Don't apply shadows to the global navigation bar—it rests flat on the content with only translucent background differentiation.
• Don't use serif or decorative typefaces anywhere in the system—SF Pro is the sole typeface (with system fallbacks).
• Don't reduce vertical band padding below 80px even on smaller screens—the spacious rhythm is core to the brand identity.

Motion & Animation

Transition Tokens

--transition-color: color 0.32s cubic-bezier(0.4, 0, 0.6, 1), background-color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
--transition-opacity: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 0.08s, visibility 0.24s steps(1, start) 0.08s;
--transition-width: width 0.25s linear;
--transition-layout: width 1s ease-in-out, height 1s ease-in-out, padding-block 1s ease-in-out, padding-inline 1s ease-in-out, padding 1s ease-in-out;
--transition-bg-instant: background-color 0.1s linear;
--transition-opacity-simple: opacity 0.4s;

Keyframe Animations

• globalnav-chevron-slide-in-hover — Nav menu chevron slides 2px rightward and fades slightly on parent link hover, indicating expandability.
• globalnav-chevron-hover-off — Reverse of above: chevron returns to resting position when hover exits.
• globalnav-flyout-slide-forward-next — Flyout menu panel slides in from right (or fades up) with subtle translate transform when opening forward in navigation sequence.
• globalnav-flyout-slide-forward-previous — Complementary animation for backward navigation state within flyout.
• globalnav-flyout-slide-back-previous / globalnav-flyout-slide-back-next — Closing animations for flyout panels, sliding opposite direction from open.
• globalnav-scrim-height-change — Scrim overlay animates height (from 0 to 100vh) with easing when nav opens.
• globalnav-fade-in — Generic fade-from-zero for nav elements appearing after load.
• globalnav-search-fade — Search overlay fades in/out.
• globalnav-search-fade-and-slide — Combined fade + vertical slide for search panel entrance.
• progress-indicator-animating — Loading spinner or progress bar continuous animation (likely rotation or indeterminate width pulse).
• dotnav-shift-start-1 / dotnav-shift-end-1 — Gallery dot-navigation indicator slides between positions when user or auto-advance changes active slide.

Interaction Patterns

• Nav flyout reveal: Hovering a top-nav item ({component.top-nav-link}) triggers {component.globalnav-flyout} panel with 240–320ms fade + slide animation; scrim ({component.globalnav-scrim}) fades underneath simultaneously.
• Chevron micro-motion: Each {component.icon-chevron} translates ~2px on hover via globalnav-chevron-slide-in-hover, providing tactile feedback that the parent item is interactive.
• Search expansion: Clicking {component.icon-search} expands a full-width search overlay from the nav bar, animating width from 0 to viewport width over 250ms linear (--transition-width).
• Button state shift: {component.button-primary} backgrounds transition via background-color 0.1s linear (--transition-bg-instant)—noticeably faster than general color changes to feel "snappy."
• Gallery auto-advance: Product showcase carousels (inferred from dotnav-shift-* keyframes) automatically cycle with dot-indicator position animations; manual override resets timer.
• Scroll-linked opacity: Hero text may fade subtly on scroll (common Apple pattern), though explicit extraction shows only nav-related scroll behavior (scrim appearance).

Imagery Style

• Photography style: Ultra-high-fidelity product photography with studio lighting emphasizing material honesty—matte aluminum, gloss glass, anodized finishes are rendered with zero compression artifacts.
• Subject matter: Isolated product devices (iPhones, iPads) photographed at 3/4 angle showing both back panel and side profile simultaneously; no lifestyle/human imagery in hero contexts.
• Color treatment: Products photograph against seamless white/light-gray backgrounds that composite cleanly onto {colors.canvas} or tinted band surfaces; no color grading or filters applied—what you see is literal device coloration.
• Role in composition: Imagery is dominant—text occupies upper 40% of viewport, product imagery lower 60%; images bleed edge-to-edge without containment frames or rounded corners.
• Depth integration: Product photos receive {extensions.shadows.product-card} (diffuse, 30px spread, 22% opacity black) creating realistic sense that devices hover millimeters above the background surface.
• Multi-product arrays: Shown in horizontal rows with consistent baseline alignment and ~20–40px inter-device spacing (4 iPhones in the screenshot example: Black → White → Pink → Stainless side-profile).
• Aspect ratios: Device portraits typically 3:4 or 9:16; side-profile shots are narrow strips (~1:4); always maintaining real-world proportion (no stretching).
• File format: Inferred as PNG with transparency (for shadow compositing) or high-quality JPEG (for photographic fidelity); retina/2x density assumed throughout.
• No illustration/3D/abstract: Apple's site photography is strictly representational—no stylized illustrations, 3D renders, or abstract gradient graphics in the product showcase system.

Icon System

• Library: Custom SVG/glyph-based system using "SF Pro Icons" and "Apple Legacy Chevron" font-face files (WOFF/TTF formats loaded from /wss/fonts and local paths). Not reliant on third-party icon libraries (no Lucide, Heroicons, Material, etc.).
• Specific icons observed:
  • Apple logomark () — 17px, {component.icon-apple-logo}
  • Magnifying glass (search) — 17px, {component.icon-search}
  • Shopping bag — 17px, {component.icon-bag}
  • Right chevron (▸) — 8px, {component.icon-chevron} (used on nav items)
• Treatment: Predominantly outline/stroke-style glyphs rendered via font-file (not SVG path) at currentColor; the Apple logomark is a filled glyph. All icons inherit parent text color.
• Size discipline: Strictly 17px for utility icons (search, bag, logo), 8px for UI micro-icons (chevrons), scaling to 24px only within expanded search or specialized contexts.
• Alignment: Vertically centered within 44px touch targets ({component.top-nav-icon-btn}); horizontally adjacent to text labels with 8px gap; chevrons append after nav-link text with ~4px left margin.
• Fallback strategy: Font-icon system degrades gracefully—if WOFF files fail to load, Unicode fallback characters or simple CSS geometric stand-ins (circles, squares) would render.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro (static-first, ideal for marketing pages)
- Styling:        Vanilla CSS Modules or Tailwind CSS (with custom theme extension for Apple tokens)
- Fonts:          Self-hosted SF Pro (licensed via Apple Developer Program) or Inter substitute from Google Fonts
- Animation:      CSS transitions/keyframes primarily (as extracted); Framer Motion for complex scroll-linked sequences
- Icons:          Custom SF Pro Icon font-files (/wss/fonts path) or custom SVG set matching 17px/8px size discipline
- Component lib:  None (fully custom atomic components matching this spec)

Note on framework choice: Apple's actual implementation uses a custom-built static-site pipeline with hand-authored CSS. For re-implementation, Next.js provides optimal image optimization (critical for product photography) and font loading strategies, while keeping bundle size minimal for a marketing-focused site. Avoid heavy component libraries (Material, Chakra, etc.) as they introduce design-system conflicts.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column everything; nav collapses to hamburger; product arrays stack vertically | | Tablet | 768–1024px | Two-column product grids possible; nav shows abbreviated link set; text scales down ~10% | | Desktop | 1025–1439px | Full nav visible; hero text + image side-by-side; 1440px max content width active | | Wide | ≥ 1440px | Content centers in 1440px well; excess becomes horizontal margin; no layout stretching |

Touch Targets

• {component.button-primary}: ~41px height × variable width (min 84px with padding) — exceeds 44px WCAG AAA minimum ✓
• {component.button-secondary}: Identical dimensions to primary — meets requirements ✓
• {component.top-nav-icon-btn}: 44×44px square — exactly at AAA threshold ✓
• {component.top-nav-link}: ~44px height (inherits nav bar height) × variable width — meets requirement ✓
• {component.text-input-search}: 48px+ height (24px type + padding) — exceeds minimum ✓

Collapsing Strategy

• Navigation: At <1024px, the 11-item horizontal nav collapses to a hamburger menu icon; flyout behavior moves to a full-screen overlay panel with vertical stacking of product categories.
• Hero columns: Text headline and product imagery switch from side-by-side to stacked (text top, image below) at tablet breakpoint; text remains centered.
• Product arrays: The 4-iPhone horizontal row stacks into a 2×2 grid on tablet, then single-column on mobile with swipe/carousel pattern likely activated.
• CTA pairs: {component.button-primary} and {component.button-secondary} remain side-by-side on mobile but may shrink internal padding from 21px to 15px horizontal.
• Typography scaling: {typography.display-xl} drops from 56px to ~40–48px on mobile; {typography.body-lg} drops from 28px to 21px to prevent overflow.
• Vertical padding: {spacing.section} (100px) compresses to ~60px on mobile, maintaining proportional rhythm at reduced viewport height.

Image Behavior

• Hero product images: Scale down proportionally maintaining aspect ratio; on mobile, switch from horizontal array to single featured device (likely first item in array) with carousel dots for additional views.
• Device detail shots: Side-profile/narrow images may hide on smallest screens to prioritize front/back views.
• Shadow adjustment: {extensions.shadows.product-card} spread reduces from 30px to ~16px on mobile to prevent shadow extending beyond image bounds at smaller sizes.
• Loading strategy: Likely implements lazy-loading below-fold; hero images are critical-path and preload/LCP-optimized.

Iteration Guide

1. Build a landing page closely mirroring this design system using Next.js with CSS Modules (or Tailwind with a custom theme extending these exact tokens). Start with the HTML semantic structure: <header> (nav), <main> (hero + product bands), <footer>.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} reference paths. Define these as CSS custom properties in :root (e.g., --color-canvas: #f5f5f7;). Never hard-code a hex value or pixel measurement that has a corresponding token—this ensures global consistency and enables theme switching later.

3. Implement state variants (-hover, -active, -disabled) as separate component classes per your stack's conventions. This spec documents Default and Active/Pressed states explicitly; add hover transitions matching the extracted timings: background-color 0.1s linear for buttons, color 0.32s cubic-bezier(0.4, 0, 0.6, 1) for general color changes.

4. When introducing a new component, determine which sub-system it belongs to: Editorial (hero bands, text-heavy sections), Product Showcase (tinted bands, product imagery), Chrome (nav, footer, flyouts), or Utility (inputs, modals, toasts). Each sub-system has distinct background/color rules.

5. Maintain the alternating band pattern as a architectural constant: neutral canvas hero → optionally tinted product band(s) → dark footer. Don't break this rhythm with mid-page white sections unless they're elevated flyouts/modals.

6. Variants of existing components live as separate frontmatter entries (e.g., button-primary, button-primary-hover)—never nest variants inside a single object. This flat structure maps 1:1 to CSS classes and enables clean TypeScript union types.

7. Run npx @google/design.md lint DESIGN.md after any edits. Watch for broken-ref (token references that don't resolve), contrast-ratio (on-primary vs. primary fails if wrong), and orphaned-tokens (defined but never referenced in components).

8. When in doubt about visual emphasis: scale up before weighting up. If a heading needs more presence, try increasing size one step (28→34→40→56px) before bumping from weight 400 to 600. Apple's system maxes at 600 weight even for its largest text.

9. Font setup for development: Since SF Pro requires licensing, define this substitution in your globals:

   :root {
     --font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-text: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
   }
   

   Import Inter from Google Fonts with weights 400 and 600. For production deployments targeting Apple ecosystems, swap in self-hosted SF Pro WOFF2 files.

10. Test touch target compliance early: every clickable element must meet 44×44px minimum. The {component.top-nav-icon-btn} at 44px is your floor—nothing should be smaller.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover color values for {component.button-primary-hover} and link underlining behavior are inferred from the primary→primary-hover token relationship but not visually verified from the static screenshot.
• Loading skeletons/pending states: No spinner, skeleton screen, or shimmer extraction was possible from the static DOM snapshot. Refer to {extensions.motion} keyframe progress-indicator-animating for timing guidance.
• Form validation states: Only {component.text-input-search} (the global nav search) was extractable; error/warning/success input states (red/green borders, helper text) follow semantic color tokens ({colors.error}, {colors.success}) but lack explicit component definitions.
• Dark mode: This specification captures the light theme exclusively ({extensions.mode}: light). Apple does implement dark mode on apple.com (inverting canvas to near-black, ink to white), but those token mappings were not extractable from the provided screenshot/CSS data.
• Authenticated/store flows: Shopping cart, account login, purchase funnel, and Apple ID surfaces were not visible in this landing-page screenshot and likely introduce additional component types (form cards, address selectors, payment method lists) not covered here.
• Sub-brand palettes: Individual product lines (iPhone, Mac, Vision Pro, Services) sometimes deploy unique accent colors (green for environment initiatives, orange for special events) that exist outside the core palette. These were not observed in the provided viewport.
• Carousel/gallery system: The presence of dotnav-shift-* keyframes strongly implies an image carousel component (for rotating product shots or promotional banners), but the carousel container, pagination controls, and auto-play logic weren't structurally present in the static HTML.
• Internationalization/localization layouts: RTL (right-to-left) adaptations for Arabic/Hebrew locales, font substitutions for CJK characters, and locale-specific pricing formatting are out of scope for this visual-specification document.
• Accessibility announcements: ARIA live regions, screen-reader-only text, focus-management order, and keyboard navigation patterns (arrow-key nav traversal) aren't captureable from CSS/visual inspection alone—implement per WCAG 2.2 AA guidelines independently.
• Pixel-exact values for pastel surfaces: {colors.surface-sky} (#bfe8fc) was sampled from the visible iPad air band background; other potential tinted surfaces (green for environmental, warm beige for home/TV) would need additional screenshots to confirm exact hex values.