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

# Apple — Apple Watch Series 12 · Design System

> A cinematic dark stage for product and health storytelling

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://www.apple.com/apple-watch-series-12/ · **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 long-form Apple Watch launch page built around a near-black canvas, oversized product imagery, and crisp editorial typography. Alternating dark section bands, restrained accent colors, and generous pauses guide visitors from the product reveal through health and fitness features.

## North star

Keep the canvas quiet and dark so oversized product media and precise white typography lead each story beat.

## Overview

The page uses a near-black canvas as a cinematic stage, letting the watch, screen graphics, and white headlines carry attention. A subtly lighter charcoal band distinguishes the highlights and product-viewer areas; the rest of the long-form story returns to black. SF Pro Display gives headlines a compact, confident shape, while SF Pro Text handles navigation, supporting copy, and controls. Large centered statements alternate with left-aligned feature details and split content, creating editorial variety without breaking the visual system. Full-bleed product media and dark, rounded feature panels provide visual pauses between expansive stretches of black. White and muted gray establish hierarchy; green appears as a health-story accent, while blue is reserved for the purchase action and selected links. Broad section spacing makes the page feel deliberate and premium rather than crowded.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stage Black | `#000000` | `--color-stage-black` | brand | Primary canvas and the dominant background for the hero and most health and fitness story sections. |
| Quiet Gray | `#86868b` | `--color-quiet-gray` | neutral | Muted supporting copy, secondary navigation details, and subdued links against dark backgrounds. |
| Graphite Band | `#111111` | `--color-graphite-band` | surface | Contrasting charcoal section band behind highlights and the closer-look product area. |
| Soft Spotlight | `#f5f5f7` | `--color-soft-spotlight` | neutral | Primary headlines and body text; also part of the measured green-to-white radial effect. |
| Vital Green | `#00d959` | `--color-vital-green` | accent | Small health-story emphasis and the measured radial effect; vivid green also appears in watch imagery. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Primary Buy button background and the measured focus color. |
| Mist White | `#ececec` | `--color-mist-white` | neutral | Occasional light navigation or supporting text; secondary to the main soft-white type. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Text and the foreground of the blue purchase button, with limited bright navigation use. |
| Link Blue | `#2997ff` | `--color-link-blue` | accent | Bright blue feature links and emphasized product-related text. |
| Silver Detail | `#d0d0d0` | `--color-silver-detail` | neutral | Sparse navigation detail; a minor measured color rather than a defining page surface. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-surface` → `#111111` (Graphite Band) · `--color-text` → `#f5f5f7` (Soft Spotlight) · `--color-text-muted` → `#86868b` (Quiet Gray) · `--color-accent` → `#0071e3` (Action Blue) · `--color-accent-2` → `#00d959` (Vital Green) · `--color-accent-3` → `#2997ff` (Link Blue) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f5f5f7` | `#000000` | 19.29:1 | AAA |
| `#f5f5f7` | `#111111` | 17.34:1 | AAA |
| `#86868b` | `#000000` | 5.8:1 | AA |
| `#86868b` | `#111111` | 5.21:1 | AA |
| `#0071e3` | `#000000` | 4.47:1 | AA-large |
| `#0071e3` | `#111111` | 4.02:1 | AA-large |

### Gradients

- `radial-gradient(rgb(0, 217, 89) 22%, rgb(245, 245, 247) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Text | `--font-body` | webfont | 600, 400 | Navigation, body and caption copy, purchase controls, and links. | Inter |
| SF Pro Display | `--font-display` | webfont | 600 | Display headlines and the page's main heading hierarchy. | Inter |

- **SF Pro Text:** Use clean sans-serif forms; measured text weights are mostly 400 and 600, with compact tracking and no forced uppercase.
- **SF Pro Display:** Semibold display faces with tight negative tracking at the largest headline levels; keep case natural and line breaks deliberate.

### 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 hero or campaign headline. |
| h1 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Primary product-story headline. |
| h2 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Major section headline, including health and fitness chapters. |
| h3 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Feature-card or subfeature headline. |
| h4 | 21px | 600 | 1.38 | 0.011em | — | SF Pro Display | Compact feature title and supporting section label. |
| body | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Emphasized introductory and feature body copy. |
| caption | 14px | 400 | 1.29 | -0.016em | — | SF Pro Text | Small explanatory copy and legal details. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Compact purchase and interface button labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global and local navigation labels. |
| link | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Inline calls to action and feature links. |

OpenType features in use: `"numr"`.

## Spacing & layout

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

The measured content reaches a 1260px maximum width, with broad desktop compositions and full-bleed media. A spacious section rhythm, measured 144px section gap, separates major story beats; local elements use a measured 20px gap. Alternate centered headline-and-copy blocks with left-aligned feature details, split columns, and media grids. The page remains intentionally sparse, often placing a small text group within a large dark field rather than filling every viewport.

## Shape & elevation

- Radius: button `9999px` · xs `28px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.32s cubic-bezier(0.4, 0, 0.6, 1)` on interactive elements.

The design is predominantly flat: large black and charcoal planes define the page rather than shadows. Measured data reports no shadow system and no general border color. Use subtle separation through background changes and spacing; reserve rounded treatment for pill-shaped purchase controls and rounded feature panels visible in the screenshots.

## Imagery

Product photography and video provide the central visual narrative, including a large watch reveal and close-up health sensing imagery. Media is often full bleed or isolated against black, with device screens supplying vivid green and other illustrative color. Later feature modules use dark rounded panels with watch screens, interface examples, and explanatory copy; treat color inside device screens as illustrative rather than page-wide brand color.

## Components

### Global navigation

Compact Apple navigation sits on a dark top band, with muted light labels and small utility icons; keep it visually quiet above the hero.

### Purchase pill

A charcoal pricing capsule pairs compact white financing copy with a bright blue rounded Buy button; another measured Buy control uses the same blue and white contrast.

### Hero story

Full-bleed watch media shares the black canvas with a lower-positioned product mark and oversized white campaign headline.

### Feature chapter

Large section heading and concise supporting copy sit in spacious black fields, centered for chapter introductions or aligned to feature content.

### Health feature panel

Dark rounded image panels combine watch-screen imagery, short explanatory titles, and compact muted supporting text.

### Highlight band

A #111111 section surface groups the highlights and closer-look content, providing tonal separation without a visible outline.

### Measured component styles

- **Primary button** (“Buy Apple Watch Series 12”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button** (“Health Sensing System”): background #676767 · text #2997ff · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“18”): transparent background · text #86868b · radius 0px · padding 0px · 600 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 #000000 as the dominant page canvas.
- Reserve #111111 for distinct feature or product-viewer bands.
- Set major headlines in SF Pro Display or a close substitute.
- Keep body copy compact, readable, and secondary to imagery.
- Use #0071e3 for primary purchase actions.
- Use #00d959 sparingly for health-story emphasis.
- Give major sections generous vertical breathing room.

## Don't

- Don't introduce bright page-wide color blocks.
- Don't crowd the dark canvas with decorative UI.
- Don't use shadows to create a heavy card system.
- Don't treat colors inside device imagery as interface colors.
- Don't make all story headings the same alignment.
- Don't add unmeasured border, spacing, or radius values.

## Agent prompt

Build a new long-form product page in Apple's cinematic, dark editorial style. Use Stage Black (#000000) for the main canvas and Graphite Band (#111111) for occasional section changes. Set display headlines in a close SF Pro Display alternative and supporting text in a close SF Pro Text alternative; keep typography crisp, compact, and high contrast. Let large product imagery and video occupy broad, sometimes full-bleed areas, with generous dark pauses between chapters. Use Soft Spotlight (#f5f5f7) for primary text and Quiet Gray (#86868b) for secondary copy. Apply Vital Green (#00d959) sparingly to health-related emphasis and Action Blue (#0071e3) to the main purchase action. Alternate centered chapter introductions with split feature layouts, and keep cards flat, dark, and subordinate to the product.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed watch video on black, with product headline and purchase details anchored low in the viewport. | Product reveal, Purchase action, Financing details | Full-bleed media, Oversized headline, Blue pill button |
| 2 | feature-grid | Charcoal full-bleed highlight band with a heading and distributed media-led feature content. | Feature overview, Scroll-led discovery | Dark section band, Media grid, White section heading |
| 3 | product-showcase | Charcoal product viewer arranged as a broad interactive area beneath a left-aligned title. | Inspect product, Interactive controls | Product viewer, Selector controls, Dark background |
| 4 | video | Full-bleed black chapter with a centered green kicker and large white headline. | Brand storytelling, Video-led transition | Centered composition, Green accent label, Large headline |
| 5 | other | Short, centered explanatory text block on black. | Technical explanation | Small text column, Dark canvas |
| 6 | product-showcase | Large isolated watch imagery on black with minimal surrounding interface. | Product demonstration | Sparse composition, Watch imagery |
| 7 | stats | Two-column black section with explanatory copy alongside prominent numerical comparisons. | Feature proof, Metric comparison | Split layout, Large numeric callouts, Muted copy |
| 8 | feature-split | Centered headline and supporting paragraph within a spacious black feature chapter. | Explain readiness, Daily use case | Centered text, Generous negative space |
| 9 | feature-grid | Two-column feature-card row with dark rounded media panels and copy underneath. | Compare features, Read supporting details | Two-column cards, Rounded dark panels, Small captions |
| 10 | video | Full-bleed three-column media chapter on black. | Showcase fitness, Video-led storytelling | Full-bleed media, Multi-column imagery |
| 11 | feature-split | Centered headline and short explanatory paragraph on a black field. | Introduce fitness benefits | Centered copy, Large headline |
| 12 | feature-grid | Multi-column app feature area with selectable tabs, media, and a centered title. | Switch workout views, Explore app capabilities | Tabbed selector, Media grid, Centered heading |
| 13 | feature-split | Centered chapter headline and copy above the following feature panels. | Introduce health insights | Centered typography, Dark canvas |
| 14 | feature-grid | Multi-column feature cards with watch and app imagery, headings, and compact descriptions. | Browse health features, Read feature details | Rounded media panels, Multi-column grid, Inline links |

## 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-apple-watch-series-12