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

# Apple — AirPods 5 · Design System

> Quietly precise product storytelling, brought to life with cinematic colour.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.apple.com/airpods-5/ · **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._

AirPods 5 is introduced through cinematic full-bleed media, restrained typography, and spacious white product sections. Deep, image-led colour moments give way to clean feature carousels and a vivid charging gradient.

## North star

Let cinematic product media create emotion, then use calm typography, white space, and precise interface accents to make every feature easy to scan.

## Overview

The page balances a bright editorial canvas with cinematic, edge-to-edge media. White and near-white sections frame product photography and feature carousels, while dark navy-blue imagery and a deep aubergine band create immersive pauses. Saturated purple and green gradients are concentrated in specific storytelling moments rather than used as general decoration; the blue purchase button is the clearest interface accent. SF Pro Display carries large, tightly tracked headlines, while SF Pro Text handles navigation, captions, and supporting copy in a compact, controlled voice. The layout moves between centered statement-led sections and horizontally browsable card rows, with generous vertical breathing room and large media areas. Cards use soft corners, but the overall interface stays flat, with minimal borders and no prominent shadow system. Product renders, people in motion, and interface imagery provide the colour and narrative, while text remains clear and understated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white product-story sections, and reversed text over dark imagery. |
| Soft Graphite | `#5b5b61` | `--color-soft-graphite` | neutral | Muted links and secondary text where a readable mid-tone is needed. |
| Aubergine Night | `#100322` | `--color-aubergine-night` | surface | Deep audio-story section background and the lower edge of its cinematic image treatment. |
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | neutral | Primary dark headings, body copy, navigation text, and dark feature-card surfaces. |
| Mist Surface | `#f5f5f7` | `--color-mist-surface` | surface | Pale neutral cards and low-contrast surface details; also used for light text on dark cards. |
| Quiet Gray | `#86868b` | `--color-quiet-gray` | neutral | Secondary copy, subdued links, and understated interface labels. |
| Slate Copy | `#6e6e73` | `--color-slate-copy` | neutral | Supporting text and links with more contrast than the lightest muted gray. |
| Apple Blue | `#0071e3` | `--color-apple-blue` | accent | Primary Buy button and high-priority interface actions. |
| Soft Alloy | `#a7a7a7` | `--color-soft-alloy` | surface | Measured supporting section tone; secondary neutral rather than a defining page colour. |
| Muted Plum | `#4c4259` | `--color-muted-plum` | surface | Background of Personalized Spatial Audio feature cards. |
| Deep Violet | `#561f75` | `--color-deep-violet` | accent | Purple storytelling gradient accent within the audio feature imagery. |
| Orchid Glow | `#844492` | `--color-orchid-glow` | accent | Lighter purple gradient stop used in a cinematic section treatment. |
| Mint Light | `#a4f7cd` | `--color-mint-light` | accent | Upper highlight in the green charging gradient, not a general interface colour. |
| Charging Green | `#2cc677` | `--color-charging-green` | accent | Vivid middle stop in the charging feature background gradient. |
| Emerald Depth | `#10845b` | `--color-emerald-depth` | accent | Lower-middle green stop in the charging gradient behind product imagery. |
| Forest Green | `#014a34` | `--color-forest-green` | accent | Deep green gradient stop in the charging story; used as image-section atmosphere. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#100322` (Aubergine Night) · `--color-surface-2` → `#f5f5f7` (Mist Surface) · `--color-surface-3` → `#1d1d1f` (Apple Ink) · `--color-surface-4` → `#a7a7a7` (Soft Alloy) · `--color-text` → `#1d1d1f` (Apple Ink) · `--color-text-muted` → `#5b5b61` (Soft Graphite) · `--color-text-subtle` → `#86868b` (Quiet Gray) · `--color-accent` → `#0071e3` (Apple Blue) · `--color-accent-2` → `#561f75` (Deep Violet) · `--color-accent-3` → `#844492` (Orchid Glow) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1f` | `#ffffff` | 16.83:1 | AAA |
| `#1d1d1f` | `#100322` | 1.18:1 | fail |
| `#1d1d1f` | `#f5f5f7` | 15.46:1 | AAA |
| `#5b5b61` | `#ffffff` | 6.74:1 | AA |
| `#5b5b61` | `#100322` | 2.94:1 | fail |
| `#5b5b61` | `#f5f5f7` | 6.19:1 | AA |
| `#5b5b61` | `#1d1d1f` | 2.5:1 | fail |
| `#86868b` | `#ffffff` | 3.62:1 | AA-large |
| `#86868b` | `#100322` | 5.48:1 | AA |
| `#86868b` | `#f5f5f7` | 3.33:1 | AA-large |

### Gradients

- `linear-gradient(0deg, rgb(16, 3, 34), rgba(16, 3, 34, 0) 18%), url("https://www.apple.com/v/airpods-5/b/images/overview/stories/audio_noise__eyjpb90hu4qe_large.png"), linear-gradient(rgba(16, 3, 34, 0) 1191.19px, 1551.02`
- `linear-gradient(rgb(255, 255, 255), rgb(164, 247, 205) 10%, rgb(44, 198, 119) 22%, rgb(16, 132, 91) 38%, rgb(1, 74, 52) 59%, rgb(0, 47, 38) 73%, rgb(1, 22, 21) 94%)`
- `linear-gradient(rgb(243, 242, 241) 20%, rgba(243, 242, 241, 0)), linear-gradient(90deg, rgb(203, 160, 152) 0%, rgb(189, 143, 101) 21%, rgb(177, 153, 93) 41%, rgb(129, 159, 117) 54%, rgb(120, 155, 194) 78%, rgb(153, 161, `
- `linear-gradient(330deg, rgb(24, 152, 94), rgb(0, 190, 104))`

## Typography

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

- **SF Pro Text:** Use regular and semibold weights; keep interface copy compact, with restrained negative tracking and natural sentence case.
- **SF Pro Display:** Semibold display style with tight line spacing and subtle negative tracking; use sentence case rather than all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.363, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.05 | -0.015em | — | SF Pro Display | Oversized campaign statement where the hero needs maximum emphasis. |
| h1 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Primary product-story headline and major page-level statement. |
| h2 | 56px | 600 | 1.07 | -0.005em | — | SF Pro Display | Large feature-section headline, often centered over media. |
| h3 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Secondary feature or product-story heading. |
| h4 | 32px | 600 | 1.13 | 0.004em | — | SF Pro Display | Card and subsection headings in the editorial feature sequence. |
| body | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Prominent supporting copy and feature descriptions. |
| caption | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Compact card captions, footnotes, and media labels. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Purchase and compact media-related actions. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global Apple navigation and local product navigation. |
| link | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Inline feature links and secondary calls to action. |

OpenType features in use: `"numr"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 7, 8, 10, 11, 12, 14, 18, 20, 21, 22, 25, 30, 40 px.
- Section rhythm 160px · element gap 20px · card padding — · max content width 1260px.

Use a spacious, vertically sequenced page with a measured 1260px maximum content width and full-bleed media where the story calls for it. Alternate centered, single-column statements with multi-column or horizontally browsable product-card sections. The measured density is spacious, with large section gaps and moderate element gaps; preserve generous breathing room around headlines and product renders. Align feature copy centrally in immersive sections, but keep gallery headings and card content readable and editorial rather than forcing every block into a uniform grid.

## Shape & elevation

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

Keep the interface predominantly flat: no prominent drop shadows or decorative borders. Separate sections with white space, surface contrast, and large image fields rather than hairlines. Use measured rounded card corners for feature tiles, and allow media to sit as the main visual layer against simple backgrounds.

## Imagery

Use cinematic video and photography of people listening or moving, interspersed with crisp white product renders and device-interface visuals. Full-bleed hero and feature scenes use dark gradients and strong blue or purple light, with subjects often silhouetted. Product and feature cards use rounded image windows and clean, uncluttered framing. Let image colour carry dramatic section identity while keeping surrounding interface chrome restrained.

## Components

### Global navigation

A slim, unobtrusive Apple navigation row over the hero media; use compact SF Pro Text labels and subdued contrast.

### Hero media and purchase pill

Full-bleed cinematic background with a white product label and large campaign headline; place starting-price copy beside a rounded blue Buy action.

### Feature carousel

Horizontally browsable cards pairing product or lifestyle imagery with short headings and compact explanatory copy.

### Closer-look gallery

Large product images presented as a swipeable gallery on a white canvas, with a left-aligned section heading and small navigation controls.

### Dark audio story

Deep aubergine surface, centered light headline, cinematic media, and a row of rounded feature cards.

### Charging story

Centered white heading over a mint-to-deep-green image gradient, followed by a clean white battery-life information area.

### Measured component styles

- **Primary button** (“Buy , AirPods 5”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button**: background #e2e2e5 · text #000000 · radius 36px · padding 0px · 400 17px SF Pro Text
- **Link** (“8”): transparent background · text #5b5b61 · radius 0px · padding 0px · 600 24px SF Pro Display
- **Card** (“Personalized Spatial Audio”): background #4c4259 · text #f5f5f7 · radius 20px · padding 0px · 400 17px 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

- Lead with cinematic media and a clear product statement.
- Keep product-detail sections bright, spacious, and easy to scan.
- Use Apple Blue (#0071e3) for high-priority purchase actions.
- Reserve deep aubergine and vivid gradients for feature storytelling.
- Pair SF Pro Display headlines with compact SF Pro Text support copy.
- Use rounded image cards for browsable feature collections.

## Don't

- Do not spread the vivid gradients across routine interface surfaces.
- Do not add heavy shadows, borders, or ornamental UI chrome.
- Do not crowd product images with long blocks of supporting text.
- Do not use all-caps headlines or decorative type treatments.
- Do not make every section a card grid; vary full-bleed and open layouts.
- Do not treat illustration-only palette colours as global brand colours.

## Agent prompt

Build a product page in Apple’s restrained, cinematic style. Use Gallery White (#ffffff) for the main canvas, Apple Ink (#1d1d1f) for primary copy, and muted grays for secondary text. Set large, tightly tracked headlines in an SF Pro Display-like sans, with SF Pro Text-like navigation and supporting copy. Start with immersive full-bleed media, then alternate spacious white product galleries with dark Aubergine Night (#100322) feature storytelling. Keep purple and green gradients localized to narrative image sections; use Apple Blue (#0071e3) for the primary purchase action. Favor generous vertical breathing room, centered statements, image-led feature cards, and restrained rounded corners. Keep borders and shadows minimal, and ensure every media section has a clear headline and readable supporting text.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero with overlaid product title, campaign headline, and purchase pill. | Autoplay cinematic media, Prominent purchase action | Edge-to-edge video, White overlay typography, Rounded blue Buy button |
| 2 | feature-grid | Open white product-story section with concise feature links and supporting highlights. | Feature scanning, Inline detail links | White canvas, Compact text, Simple icon or media accents |
| 3 | gallery | Left-aligned gallery heading above a wide, horizontally browsable product image row. | Swipeable gallery, Previous and next controls | Pale product-image panels, Rounded media corners, Small captions |
| 4 | video | Centered headline over a full-width cinematic noise-cancellation scene. | Immersive feature storytelling | Light centered typography, Blue-toned full-bleed media |
| 5 | video | Tall, full-width dark story band built around immersive media and centered copy. | Long-form scroll narrative | Aubergine surface, Cinematic image treatment, Light text |
| 6 | feature-grid | Centered section title above a horizontally browsable row of four feature cards. | Horizontal card browsing, Feature comparison | Rounded image cards, Dark background, Compact descriptions |
| 7 | feature-grid | White feature section with a centered headline and a multi-column carousel of experience cards. | Feature discovery, Horizontal carousel | Mixed light and dark cards, Device imagery, Small carousel controls |
| 8 | product-showcase | Two-column charging feature with centered heading and large product imagery. | Battery benefit overview | Green gradient media field, White headline, Case render |
| 9 | stats | White information panel with centered supporting copy and three battery-life figures. | At-a-glance specification comparison | Three-column stat row, Large green numerals, Compact explanatory text |

## 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-5