---
title: "Apple — AirPods Pro 3 design system"
variant: extended
source: https://www.apple.com/airpods-pro/
captured_at: 2026-10-12
theme: light
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/apple-com-airpods-pro)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Apple — AirPods Pro 3 · Design System

> Quiet surfaces, cinematic sound in motion

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.apple.com/airpods-pro/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious product story pairs a restrained neutral palette with oversized typography and immersive video. Alternating pale and white sections keep the narrative calm while vivid product and lifestyle imagery supplies the drama.

## North star

Keep the interface quiet and neutral so oversized type and cinematic product imagery carry the story.

## Overview

The page builds its identity from a near-white foundation: #f5f5f7 creates the opening canvas and selected feature bands, while #ffffff gives long-form product sections a clean reset. Headings and primary copy use deep #1d1d1f; muted grays carry secondary descriptions and utility text. Blue is reserved for actionable links and purchase buttons rather than broad decoration. SF Pro Display gives headlines a bold, tightly tracked editorial presence, while SF Pro Text handles navigation, body copy, and controls. The layout alternates expansive full-bleed media with centered copy, feature cards, and product-focused panels. Generous vertical pauses make each feature feel like a new chapter. High-contrast, carefully art-directed video and photography provide most of the color and emotional movement; the interface itself remains quiet, flat, and precise.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f5f5f7` | `--color-gallery-mist` | surface | Primary canvas and recurring pale-gray bands behind product stories and centered feature introductions. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Clean section surface for feature descriptions, cards, and the top navigation. |
| Quiet Graphite | `#6e6e73` | `--color-quiet-graphite` | neutral | Main muted-text tone for secondary copy, utility links, and supporting labels. |
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | brand | Primary headings, body text, navigation, and measured card outlines. |
| Soft Alloy | `#86868b` | `--color-soft-alloy` | neutral | Subdued secondary text and navigation or search placeholders. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Filled purchase buttons and focus emphasis; keep it limited to key actions. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Small navigation details and dark media or image regions, not a broad page surface. |
| Link Blue | `#0066cc` | `--color-link-blue` | accent | Inline links and secondary interactive text. |
| Navigation Charcoal | `#333333` | `--color-navigation-charcoal` | neutral | Minor navigation detail; present in measured navigation, not a defining page color. |

### Semantic aliases

`--color-canvas` → `#f5f5f7` (Gallery Mist) · `--color-surface` → `#ffffff` (Studio White) · `--color-text` → `#1d1d1f` (Apple Ink) · `--color-text-muted` → `#6e6e73` (Quiet Graphite) · `--color-text-subtle` → `#86868b` (Soft Alloy) · `--color-border` → `#1d1d1f` (Apple Ink) · `--color-accent` → `#0071e3` (Action Blue) · `--color-accent-2` → `#0066cc` (Link Blue) · `--color-on-accent` → `#ffffff` (Studio White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1f` | `#f5f5f7` | 15.46:1 | AAA |
| `#1d1d1f` | `#ffffff` | 16.83:1 | AAA |
| `#6e6e73` | `#f5f5f7` | 4.66:1 | AA |
| `#6e6e73` | `#ffffff` | 5.07:1 | AA |
| `#86868b` | `#f5f5f7` | 3.33:1 | AA-large |
| `#86868b` | `#ffffff` | 3.62:1 | AA-large |
| `#0071e3` | `#f5f5f7` | 4.31:1 | AA-large |
| `#0071e3` | `#ffffff` | 4.7:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(245, 245, 247))`
- `linear-gradient(rgb(245, 245, 247) 85%, rgb(0, 0, 0) 0px)`
- `linear-gradient(rgb(245, 245, 247), rgb(225, 225, 227))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Display | `--font-display` | webfont | 600 | Display headlines and prominent feature titles | Inter |
| SF Pro Text | `--font-body` | webfont | 600, 400 | Body copy, navigation, captions, and buttons | Inter |

- **SF Pro Display:** Semibold display voice; large headings use tight negative tracking and sentence-case wording.
- **SF Pro Text:** Compact utility and reading text; regular and semibold weights, generally sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 600 | 1.04 | -0.015em | — | SF Pro Display | Oversized campaign headline in the hero and major story moments. |
| h1 | 80px | 600 | 1 | -0.015em | — | SF Pro Display | Primary product-story headline. |
| h2 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Large chapter headlines and centered feature statements. |
| h3 | 56px | 600 | 1.07 | -0.005em | — | SF Pro Display | Secondary feature and section headlines. |
| h4 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Compact feature headings and prominent links. |
| body | 17px | 600 | 1.47 | -0.022em | — | SF Pro Text | Product descriptions and key supporting copy. |
| caption | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Small labels, footnotes, and supporting details. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Purchase and compact action labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global navigation labels and utility items. |
| link | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Prominent text links within product content. |

OpenType features in use: `"numr"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 28, 30 px.
- Section rhythm 160px · element gap 20px · card padding 10px · max content width 1260px.

Use a broad centered content frame with the measured 1260px page maximum, while allowing campaign media to run full bleed. The measured grid ranges from single-column editorial sections to four-column feature areas and two-column copy blocks. Alternate white and #f5f5f7 bands to establish chapter boundaries. Center major story introductions; align feature headings and detail copy to the start of their grids. Preserve the measured spacious rhythm, including the large section gap, and avoid crowding the media with interface elements.

## Shape & elevation

- Radius: button `50%` · xs `28px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.11) 0px 0px 0.5px 0px inset`
- Motion: standard transition `0.32s cubic-bezier(0.4, 0, 0.6, 1)` on interactive elements.

The page is predominantly flat: rely on alternating surface colors and full-bleed media rather than raised cards. Measured card outlines are dark and restrained; avoid adding pervasive borders or shadows. The button is a bright blue pill with a clean white label and no measured shadow.

## Imagery

Lead with full-bleed campaign video and high-resolution product imagery, then mix in lifestyle scenes, close-up acoustic details, and large isolated product views. Use strong silhouette contrast against bright, pale environments. Keep imagery carefully art-directed and spacious, with occasional prismatic color appearing as part of the campaign visuals rather than as interface decoration.

## Components

### Global navigation

A slim white header with compact SF Pro Text navigation, dark labels, and utility icons; keep it visually quiet above the hero.

### Hero purchase action

Set the product message over immersive media and pair the price with a blue, white-text pill purchase button.

### Feature highlights

Present a white section with a heading, compact links, and large feature media that reads as a sequence of editorial highlights.

### Product detail showcase

Use a pale-gray field, isolated earbud imagery, and a compact list of selectable feature topics.

### Feature cards

Arrange product and lifestyle imagery with concise supporting copy in a multi-column feature area.

### Story introduction

Center a small category label and an oversized SF Pro Display headline, followed by restrained explanatory text.

### Pill CTA

Use #0071e3 with a white label, rounded pill silhouette, and compact SF Pro Text treatment for primary purchase actions.

### Measured component styles

- **Primary button** (“Buy AirPods Pro 3”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button** (“High definition spacial listening”): background #777779 · text #0066cc · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“15”): transparent background · text #6e6e73 · radius 0px · padding 0px · 600 17px SF Pro Text
- **Card** (“Removes up to 2x more unwanted noise tha”): transparent background · text #1d1d1f · border 1px solid #1d1d1f · radius 0px · padding 38px 0px 0px 0px · 400 20px SF Pro Text
- **Navigation item** (“Apple Store Mac iPad iPhone Watch Vision”): transparent background · text #1d1d1f · radius 0px · padding 0px · 400 17px SF Pro Text

## Do

- Use the pale neutral and white bands as the main section structure.
- Reserve blue for purchase actions and meaningful links.
- Let large product imagery and video dominate feature storytelling.
- Use tight, bold display typography for major headings.
- Keep secondary copy muted and concise.
- Leave generous vertical breathing room between story chapters.

## Don't

- Do not add decorative colors across the interface.
- Do not turn every feature into a raised card.
- Do not crowd full-bleed imagery with overlays and controls.
- Do not use heavy shadows as a substitute for section structure.
- Do not make body copy compete with display headlines.
- Do not introduce gradients or prismatic effects outside the imagery.

## Agent prompt

Build a new product storytelling page in Apple’s restrained AirPods Pro 3 style. Use Gallery Mist (#f5f5f7) and Studio White (#ffffff) for alternating sections, Apple Ink (#1d1d1f) for headlines, and Quiet Graphite (#6e6e73) or Soft Alloy (#86868b) for secondary copy. Reserve Action Blue (#0071e3) and Link Blue (#0066cc) for interactions. Set large, tightly tracked headlines in an SF Pro Display-like face and supporting text in an SF Pro Text-like face. Compose a spacious centered content frame with occasional full-bleed campaign media, varied column layouts, and clear chapter breaks. Let polished product and lifestyle imagery bring contrast and color. Keep surfaces flat, buttons pill-shaped, and controls minimal; do not add ornamental shadows or unmeasured decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign media with product statement and purchase controls near the lower edge. | Product purchase CTA, Media playback control | Pale gradient canvas, Oversized headline, Blue pill button |
| 2 | feature-grid | Single-column white section with a heading, compact feature links, and highlight media. | Feature jump links, Watch film link | Editorial heading, Carousel-style media, Muted links |
| 3 | product-showcase | Pale full-bleed product stage with selectable feature list and large product imagery. | Feature selection, Product exploration | Pale-gray canvas, Isolated product image, Compact topic list |
| 4 | video | Full-bleed video section with minimal interface. | Video playback | Edge-to-edge media, Minimal controls |
| 5 | stats | White two-column editorial block with explanatory copy and paired numeric comparisons. | Performance comparison, Supporting product detail | Large numerals, Thin divider rules, Muted body copy |
| 6 | feature-grid | Multi-column card sequence with image-led features and short descriptions. | Swipeable feature cards, Carousel navigation | Image cards, Concise captions, Subtle arrows |
| 7 | other | Centered heading and supporting copy on a pale-gray band. | Story transition | Centered typography, Pale neutral background |
| 8 | product-showcase | Full-width pale media stage with a large isolated product visual. | Product-focused storytelling | Full-bleed video, Oversized product imagery |
| 9 | feature-split | Long-form immersive visual story with centered introduction and lower feature details. | Scroll-led story, Feature explanation | Lifestyle photography, Dark media region, Layered text over imagery |
| 10 | other | Centered fitness introduction on a pale-gray band. | Feature chapter transition | Centered title, Pale-gray canvas |

## Source CSS custom properties (selected)

```css
--r-globalnav-background-opened: #fafafc;
--r-globalnav-background-opened-dark: #161617;
--r-globalnav-color: rgba(255, 255, 255, .8);
--r-globalnav-color-secondary: #E8E8ED;
--r-globalnav-color-hover: #FFFFFF;
--r-globalnav-submenu-header-color: rgb(134, 134, 139);
--r-globalnav-search-input-placeholder-color: rgb(134, 134, 139);
--r-globalnav-search-input-value-color: #E8E8ED;
--r-globalnav-search-list-header-color: rgb(134, 134, 139);
--r-globalnav-search-list-item-color: #E8E8ED;
--r-globalnav-search-list-item-hover-background: rgb(29, 29, 31);
--r-globalnav-search-list-item-hover-color: #FFFFFF;
--r-globalnav-search-list-item-nonsearchterm-color: rgb(134, 134, 139);
--r-globalnav-search-list-item-searchterm-color: #E8E8ED;
--globalmessage-segment-background: rgb(22, 22, 23);
--globalmessage-segment-scrim-background: rgba(255, 255, 255, .08);
--globalmessage-segment-text-color: rgba(255, 255, 255, .92);
--globalmessage-segment-border-color: rgba(255, 255, 255, .4);
--globalnav-badge-background: rgb(255, 255, 255);
--globalnav-badge-text-color: rgb(0, 0, 0);
--progress-indicator-color: rgba(255, 255, 255, .8);
--sk-focus-color: #0071e3;
--sk-focus-color-alt: rgb(0,0,0);
--localnav-curtain-background: rgba(51, 51, 54, 0.4);
--localnav-background: rgba(22, 22, 23, 0.88);
--localnav-keyline-color: rgba(255, 255, 255, 0.24);
--r-localnav-menu-link-color: rgb(255, 255, 255);
--localnav-menucta-color: rgb(255, 255, 255);
--r-localnav-title-link-color: rgb(255, 255, 255);
--r-localnav-title-subhead-color: rgb(255, 255, 255);
--r-localnav-text-zoom-factor: 1;
--sk-button-background: rgb(245, 245, 247);
--sk-button-background-hover: rgb(255, 255, 255);
--sk-button-background-active: #EDEDF2;
--sk-button-color: rgb(0, 0, 0);
--sk-stat-value-color: rgb(245,245,247);
--sk-stat-caption-color: rgb(245,245,247);
--sk-body-text-color: rgb(29,29,31);
--sk-headline-text-color: rgb(29,29,31);
--sk-body-background-color: rgb(255,255,255);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/apple-com-airpods-pro