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

# Apple · Design System

> Quiet canvases, vivid products, effortless discovery

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

Apple’s homepage pairs alternating product-led hero bands with a restrained navigation and a dense entertainment gallery. Crisp typography and vivid media carry the page, while pale neutral panels and blue actions keep shopping paths clear.

## North star

Keep the interface quiet and spacious so each product’s media, headline, and single clear blue action lead the experience.

## Overview

The page uses a restrained palette of pure white, near-black, and soft cool gray, with saturated Apple blue reserved for primary actions and links. Large centered product headlines sit above concise supporting copy and paired pill-shaped actions. SF Pro Display lends the main product titles a crisp, confident presence; SF Pro Text handles navigation, body copy, and compact utility details. Full-width hero bands alternate black and pale gray, letting product imagery dominate without decorative framing. Below, a two-column product grid and entertainment gallery create a more varied rhythm, while the footer shifts to a dense, subdued information layout. Generous open space around each hero keeps attention on the featured device. Product photography, rendered device visuals, and video supply nearly all expressive color, so the interface itself stays deliberately quiet.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Link Blue | `#0066cc` | `--color-link-blue` | accent | Outlined Buy actions and secondary text links, including links in the footer. |
| Stage Black | `#000000` | `--color-stage-black` | surface | Full-width dark hero bands and entertainment media backgrounds; white text and device imagery sit above it. |
| Media Blue | `#2997ff` | `--color-media-blue` | accent | Links over dark entertainment panels and secondary blue accents. |
| Cloud Gray | `#f5f5f7` | `--color-cloud-gray` | surface | Pale product bands, light grid tiles, and the footer canvas. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Filled primary Learn more buttons and keyboard-focus emphasis. |
| Quiet Gray | `#6c6c6c` | `--color-quiet-gray` | semantic | Muted footer and secondary explanatory copy. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light-section background, and text on dark panels. |
| Graphite Text | `#444445` | `--color-graphite-text` | semantic | Navigation and footer text on light surfaces. |
| Rule Gray | `#cececf` | `--color-rule-gray` | semantic | Subtle footer dividers and hairline boundaries. |
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | neutral | Headlines and body text on pale product cards and light backgrounds. |
| Shadow Black | `#0c0c0c` | `--color-shadow-black` | neutral | Subtle edge of a measured dark gradient; not a defining interface color. |
| Nav Silver | `#dbdbdb` | `--color-nav-silver` | neutral | Small navigation and button details; a minor measured interface neutral. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Stage Black) · `--color-surface-2` → `#f5f5f7` (Cloud Gray) · `--color-text` → `#444445` (Graphite Text) · `--color-text-muted` → `#6c6c6c` (Quiet Gray) · `--color-text-subtle` → `#f5f5f7` (Cloud Gray) · `--color-border` → `#cececf` (Rule Gray) · `--color-accent` → `#0071e3` (Action Blue) · `--color-accent-2` → `#0066cc` (Link Blue) · `--color-accent-3` → `#2997ff` (Media Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#444445` | `#ffffff` | 9.73:1 | AAA |
| `#444445` | `#000000` | 2.16:1 | fail |
| `#444445` | `#f5f5f7` | 8.93:1 | AAA |
| `#6c6c6c` | `#ffffff` | 5.25:1 | AA |
| `#6c6c6c` | `#000000` | 4:1 | AA-large |
| `#6c6c6c` | `#f5f5f7` | 4.82:1 | AA |
| `#f5f5f7` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f7` | `#000000` | 19.29:1 | AAA |
| `#0071e3` | `#ffffff` | 4.7:1 | AA |
| `#0071e3` | `#000000` | 4.47:1 | AA-large |

### Gradients

- `radial-gradient(100% 33% at 0% 100%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0))`
- `linear-gradient(rgba(29, 29, 31, 0.4) 0%, rgba(29, 29, 31, 0) 70px, rgba(29, 29, 31, 0) calc(100% - 70px), rgba(29, 29, 31, 0.4) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Text | `--font-body` | webfont | 400, 600 | Navigation, body copy, buttons, captions, and most interface text. | Inter |
| SF Pro Display | `--font-display` | webfont | 400, 600, 700 | Large display headlines and prominent product titles. | Inter |

- **SF Pro Text:** Use compact sans-serif forms, mostly regular or semibold weights; keep tracking subtly tight and casing natural.
- **SF Pro Display:** Use semibold display weight with tight, clean line spacing; title case follows product naming.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 1.07 | -0.005em | — | SF Pro Display | Oversized headline for the leading product hero. |
| h1 | 40px | 600 | 1.1 | 0 | — | SF Pro Display | Primary title in prominent product and campaign bands. |
| h2 | 34px | 600 | 1.47 | -0.011em | — | SF Pro Text | Section headings, including the entertainment gallery title. |
| h3 | 28px | 400 | 1.14 | 0.007em | — | SF Pro Display | Product tile titles and secondary feature headings. |
| h4 | 25.5px | 600 | 1.47 | -0.015em | — | SF Pro Text | Supporting headings in lower-page content and footer groups. |
| body | 14px | 600 | 1.29 | -0.016em | — | SF Pro Text | Compact product descriptions and short supporting statements. |
| caption | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Footnotes, media labels, and small legal details. |
| button | 14px | 400 | 1.29 | -0.016em | — | SF Pro Text | Learn more, Buy, and media action labels. |
| nav | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Top-level product navigation and compact menu labels. |

OpenType features in use: `"numr"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 9, 10, 11, 12, 15, 17, 18, 19, 20, 21, 40, 48 px.
- Section rhythm 56px · element gap 14px · card padding 28px · max content width 980px.

A slim, full-width global navigation sits above vertically stacked, full-bleed campaign bands. Hero copy is centered and grouped near the top, with large product media below; black and pale-gray sections alternate to create a clear scroll rhythm. Later content shifts into a two-column product grid and an entertainment gallery, then a multi-column footer. The measured content max width is 980px, while major product bands extend across the viewport. Comfortable spacing leaves generous negative space around each featured device.

## Shape & elevation

- Radius: button `9999px` · media `8px` · xs `8px` · pill `9999px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`
- Motion: standard transition `0.32s cubic-bezier(0.4, 0, 0.6, 1)` on interactive elements.

The design is predominantly flat: full-width color fields and media carry hierarchy instead of layered card chrome. Hairline separators are most apparent in the footer. Buttons rely on pill silhouettes and color contrast, not shadows; measured media can have a soft black shadow, but it is not a defining page-wide effect.

## Imagery

Large, polished product photography and rendered device visuals anchor the hero bands, with video used in the upper sequence. Product images are centered, often shown at a dramatic scale against untextured black or light gray. The entertainment area uses a horizontal gallery of colorful show artwork, creating the page’s strongest color contrast. Media edges remain clean rather than enclosed in decorative cards.

## Components

### Global navigation

Compact, single-row product navigation over a dark translucent-looking strip, with small labels and utility icons.

### Product hero

Full-width black or pale-gray band with centered headline and short copy above large device media.

### Primary action

Filled #0071e3 pill button with white SF Pro Text label; used for Learn more.

### Secondary action

Outlined Buy pill with #0066cc text and border, visually quieter than the filled primary action.

### Product tile grid

Two-column run of spacious product panels, mixing black and #f5f5f7 backgrounds with centered copy and actions.

### Entertainment gallery

Centered section heading above a horizontal, image-led selection of colorful show and service artwork.

### Footer directory

Dense multi-column link lists on #f5f5f7, with small muted text and subtle horizontal rules.

### Measured component styles

- **Primary button** (“Learn more”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 8px 15px · 400 14px SF Pro Text
- **Secondary button** (“Buy”): transparent background · text #0066cc · border 1px solid #0066cc · radius 980px · padding 8px 15px · 400 14px SF Pro Text
- **Link** (“Stream now ActionSave the world, bring y”): background #000000 · text #2997ff · radius 0px · padding 0px · 400 17px SF Pro Text
- **Card** (“MacBook Air Now supercharged by M5. Lear”): background #f5f5f7 · text #1d1d1f · radius 0px · padding 53px 0px 60px 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

- Use full-width, calm color bands for major product stories.
- Center hero headlines and action groups above product media.
- Reserve filled blue for the primary action.
- Use outlined blue pills for secondary purchase actions.
- Let product imagery provide most of the page’s color.
- Keep footer information compact, organized, and muted.

## Don't

- Do not add decorative gradients to ordinary interface surfaces.
- Do not crowd the hero with extra copy or controls.
- Do not frame every product image in a bordered card.
- Do not use saturated colors for body text or large surfaces.
- Do not replace the clean product bands with dense dashboard layouts.
- Do not make secondary actions visually stronger than the primary action.

## Agent prompt

Build a polished consumer-electronics homepage with Apple’s restrained product-first visual language. Use Gallery White (#ffffff), Stage Black (#000000), and Cloud Gray (#f5f5f7) as broad, alternating surfaces; keep Apple Ink (#1d1d1f) text crisp and readable. Apply Action Blue (#0071e3) to filled primary pill buttons and Link Blue (#0066cc) to outlined purchase actions and secondary links. Use SF Pro-like sans-serif typography, centered hero copy, concise subheads, and generous open space around large product photography. Create full-width campaign bands, a spacious two-column product grid, an image-led entertainment gallery, and a compact multi-column footer. Keep borders and shadows subtle. Prioritize strong media framing, clear hierarchy, and a quiet interface over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width black campaign band with centered copy and large product media. | Primary and secondary actions, Product-led storytelling | Black background, Centered white headline, Blue pill actions |
| 2 | hero | Full-width pale-gray band with centered headline, copy, actions, and device imagery. | Learn-more and pricing paths, Single product focus | Pale-gray canvas, Centered copy, Large product image |
| 3 | product-showcase | Full-width black product band with centered copy and featured wearable imagery. | Learn-more and purchase actions, Benefit-led copy | Black background, Centered product story, Blue pill actions |
| 4 | product-grid | Two-column product panels followed by additional full-width product stories. | Repeated product discovery, Per-item learn-more and buy actions | Mixed black and pale-gray panels, Centered product copy, Blue action pills |
| 5 | gallery | Centered section heading above a wide, horizontal media carousel. | Browse across media items, Stream-now actions | Colorful artwork tiles, Wide image-led gallery, Centered heading |
| 6 | footer | Light-gray footer with legal notes above a multi-column link directory. | Category-based link browsing, Legal and regional links | Muted compact text, Multi-column lists, Subtle divider rules |

## 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-body-text-color: rgb(29, 29, 31);
--sk-headline-text-color: rgb(29, 29, 31);
--sk-body-background-color: rgb(255, 255, 255);
--sk-body-font-stack: text;
--sk-body-link-color: rgb(0, 102, 204);
```

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