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

# Apple — Apple Watch · Design System

> Quiet precision, with the product in focus.

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

An Apple Watch collection page that pairs restrained editorial typography with product-led imagery and clear paths to compare or shop. Alternating white and pale-gray sections organize model discovery, shopping benefits, accessories, ecosystem features, and detailed footer navigation.

## North star

Keep the interface quiet and spacious so crisp product imagery and concise model choices carry the page.

## Overview

The page uses a quiet neutral canvas, moving between white and pale cool gray bands to separate content without heavy dividers. Near-black headings provide strong contrast, while Apple blue is reserved for links and primary actions. SF Pro Display shapes large, compact headlines; SF Pro Text carries navigation, descriptions, and product details with restrained sizing and tracking. Product photography does most of the expressive work: isolated watch models and large lifestyle or detail images bring color, material, and screen content into the otherwise neutral interface. The layout is broad and editorial, with a centered content measure, generous section breaks, and left-aligned headings. Product models sit in a three-column comparison row, while service cards and ecosystem content use wider horizontal compositions. Rounded image and card corners soften the geometry. Borders are subtle, and elevation is minimal, keeping attention on products, concise copy, and clear shopping links.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f5f5f7` | `--color-gallery-mist` | surface | Pale cool-gray canvas for the lineup, shopping-benefit bands, and footer background. |
| Soft Graphite | `#6c6c6c` | `--color-soft-graphite` | neutral | Muted supporting text, especially footer copy and secondary headings. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Clean canvas for the product-category navigation and accessory and ecosystem sections; also used on cards. |
| Quiet Divider | `#cececf` | `--color-quiet-divider` | semantic | Subtle hairlines separating footer content and card boundaries. |
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | brand | Primary heading, body, and navigation text against light backgrounds. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Filled primary buttons and prominent interactive accents. |
| Muted Charcoal | `#444445` | `--color-muted-charcoal` | neutral | Secondary navigation and footer text with softer contrast than primary copy. |
| Deep Slate | `#333336` | `--color-deep-slate` | neutral | Occasional supporting text and navigation detail; secondary to the main ink color. |

### Semantic aliases

`--color-canvas` → `#f5f5f7` (Gallery Mist) · `--color-surface` → `#ffffff` (Studio White) · `--color-text` → `#1d1d1f` (Apple Ink) · `--color-text-muted` → `#6c6c6c` (Soft Graphite) · `--color-text-subtle` → `#444445` (Muted Charcoal) · `--color-border` → `#cececf` (Quiet Divider) · `--color-accent` → `#0071e3` (Action 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 |
| `#6c6c6c` | `#f5f5f7` | 4.82:1 | AA |
| `#6c6c6c` | `#ffffff` | 5.25:1 | AA |
| `#444445` | `#f5f5f7` | 8.93:1 | AAA |
| `#444445` | `#ffffff` | 9.73:1 | AAA |
| `#0071e3` | `#f5f5f7` | 4.31:1 | AA-large |
| `#0071e3` | `#ffffff` | 4.7:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Text | `--font-body` | webfont | 400, 600 | Navigation, body copy, links, product descriptions, and fine print. | Inter |
| SF Pro Display | `--font-display` | webfont | 600 | Large display headlines and section headings. | Inter |

- **SF Pro Text:** Mostly regular with selective semibold emphasis; compact tracking and sentence case keep interface copy quiet.
- **SF Pro Display:** Semibold headlines use tight, slightly negative tracking at display sizes; keep case natural and avoid decorative styling.

### Type scale — Perfect Fifth (ratio ≈ 1.473, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.05 | -0.015em | — | SF Pro Display | Oversized page or campaign headline when a section needs a strong opening. |
| h1 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Primary page title and prominent section headline. |
| h2 | 32px | 600 | 1.13 | 0.004em | — | SF Pro Display | Section titles such as lineup and shopping-benefit headings. |
| h3 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Product names and smaller feature-section headings. |
| body | 17px | 400 | 1.47 | -0.022em | — | SF Pro Text | Product summaries, service descriptions, and explanatory copy. |
| caption | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Compact labels, model notes, and fine-print details. |
| nav | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Global navigation and product-category navigation labels. |
| link | 14px | 400 | 1.29 | -0.016em | — | SF Pro Text | Inline actions and comparison or shopping links. |

OpenType features in use: `"numr"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 8, 9, 10, 11, 12, 14, 20, 21, 28, 32, 34 px.
- Section rhythm 144px · element gap 20px · card padding — · max content width 980px.

A spacious, mostly centered page with a measured content width around 980px and left-aligned section headings. The opening product-category rail spans horizontally, followed by a three-column model comparison and a wider row of shopping cards. White and pale-gray bands establish section boundaries. Large vertical pauses separate major topics, while compact product details and footer navigation create denser areas near the end.

## Shape & elevation

- Radius: button `9999px` · card `28px` · xs `28px` · pill `9999px`
- Shadow `md` (button): `rgb(210, 210, 215) -9px 0px 9px -13px`
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.5, 1)` on interactive elements.

The page is predominantly flat, using background bands rather than pronounced shadows to define sections. Product and benefit cards sit on clean surfaces with rounded corners; thin neutral borders provide occasional separation. Keep layering restrained, with only a subtle button shadow where needed and no dramatic floating panels.

## Imagery

Use crisp product photography as the primary visual language: watches appear isolated for model comparison, while larger accessory and ecosystem panels support feature storytelling. Preserve realistic materials, finishes, and screen details; let product colors provide contrast against neutral backgrounds. Avoid illustration-led decoration or heavy filters. Images feel carefully cropped and placed within soft rounded containers.

## Components

### Global navigation

A slim white top bar with compact dark labels, centered navigation, and small utility icons.

### Announcement strip

A light-gray horizontal notice beneath navigation, using compact copy and a blue inline link.

### Product category rail

A horizontal row of small product images and centered labels, with concise new-item notes and a next control.

### Model comparison cards

Three watch models in a row, each combining a large product image, brief model details, blue pill-shaped Learn more action, and a secondary purchase link.

### Shopping benefit cards

A horizontally arranged set of white cards on a pale-gray band, with compact headings, short explanatory copy, and simple circular affordances.

### Feature accordion

A broad, softly rounded light-gray panel with stacked ecosystem topics; one item expands to show descriptive copy.

### Footer link directory

A dense multi-column navigation and legal area, separated with subtle rules and set in small, muted type.

### Measured component styles

- **Primary button** (“Learn more”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 11px 21px · 400 17px SF Pro Text
- **Secondary button**: background #e8e8ed · text #000000 · radius 50% · padding 0px · 400 17px SF Pro Text
- **Link** (“Compare all models”): transparent background · text #0066cc · radius 0px · padding 0px · 400 17px SF Pro Text
- **Card** (“Apple Upgrade Love it. Lease it. Upgrade”): background #ffffff · text #000000 · radius 28px · 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

- Use pale neutral bands to organize long content.
- Keep primary headings large, dark, and left aligned.
- Let product photography carry the visual color.
- Use blue for key actions and useful links.
- Keep product comparisons concise and scannable.
- Preserve generous gaps between major sections.

## Don't

- Do not add decorative gradients or saturated background panels.
- Do not crowd product images with extra ornament.
- Do not use heavy shadows to separate ordinary cards.
- Do not turn every link into a filled button.
- Do not center every heading or paragraph.
- Do not introduce colors absent from the measured palette.

## Agent prompt

Build a new product page in Apple’s restrained Apple Watch style. Use Gallery Mist (#f5f5f7) and Studio White (#ffffff) as alternating section surfaces, with Apple Ink (#1d1d1f) for headings and primary copy. Reserve Action Blue (#0071e3) for primary actions and important links; use Soft Graphite (#6c6c6c) for supporting text and Quiet Divider (#cececf) for hairlines. Use SF Pro-like sans typography: compact navigation and readable body text, paired with bold, tightly tracked display headings. Keep a broad centered content measure, left-aligned section titles, generous vertical separation, and orderly product grids. Make realistic product photography the visual focus, placed in softly rounded frames. Prefer flat surfaces and subtle borders over shadows. Keep interactions clear, concise, and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | category-nav | White section with large left-aligned page title above a horizontal product and category rail. | horizontal category browsing, next-item control | small product thumbnails, centered labels, new-item notes |
| 2 | product-grid | Pale-gray band with a heading and comparison link above three side-by-side model cards. | compare models, learn more and buy actions | large product images, concise model details, blue pill CTA |
| 3 | feature-grid | Pale-gray section with a left-aligned heading and horizontally arranged service cards. | browse shopping benefits, card-level detail actions | white rounded cards, compact copy, simple circular controls |
| 4 | feature-split | White section with a heading and a wide rounded feature panel below. | shop accessories | editorial feature panel, short copy block, inline blue link |
| 5 | faq | White section with a section heading and a broad rounded accordion panel. | expand ecosystem topics, read supporting details | stacked accordion rows, chevron toggles, subtle separators |
| 6 | other | Pale near-white band with a page title and three compact columns of links. | browse topic links, jump to product destinations | small muted column labels, stacked text links |
| 7 | footer | Pale-gray footer with dense legal copy above a multi-column global link directory. | browse global navigation, review legal and regional details | fine-print paragraphs, columned link lists, thin separator 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);
--corner-radius: 28px;
```

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