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

# Apple — Apple Watch Ultra 4 · Design System

> A cinematic product story in black and light.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://www.apple.com/apple-watch-ultra-4/ · **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 dark, cinematic launch page pairs oversized product imagery with concise running and health stories. Restrained typography and vivid interface-green accents make the watch and its capabilities the focus.

## North star

Let oversized product imagery and restrained white-on-black typography carry the story, using color only to clarify actions and feature signals.

## Overview

The page is built on a near-black canvas, alternating with deep charcoal bands to separate long-form product chapters without adding visual clutter. Bright white headlines carry the main hierarchy, while muted gray supports explanatory copy and footnote-like details. Electric blue marks purchase and navigation actions; vivid green appears as a feature cue for battery and health metrics, including in watch-screen imagery. SF Pro Display shapes the large, tightly tracked headlines, while SF Pro Text handles compact supporting copy and controls. The layout moves from a centered, full-bleed hero into editorial feature panels, open black interludes, and charcoal card galleries. Large product renders and monochrome runner photography establish a cinematic, premium tone; selective color remains concentrated in interface graphics. Generous vertical pauses give each chapter room, while rounded image panels and pill-shaped CTAs provide the few soft edges in an otherwise flat, high-contrast composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | surface | Primary page canvas and expansive hero or feature backgrounds; preserves a cinematic field around product imagery. |
| Quiet Gray | `#86868b` | `--color-quiet-gray` | neutral | Muted supporting copy, secondary links, and low-emphasis labels against dark sections. |
| Charcoal Band | `#111111` | `--color-charcoal-band` | surface | Alternating dark section background for highlights, galleries, and feature-card groupings. |
| Soft White | `#f5f5f7` | `--color-soft-white` | neutral | Primary headings and body text on dark backgrounds, with crisp contrast without stark pure white. |
| Pure Light | `#ffffff` | `--color-pure-light` | neutral | Inverse surfaces and high-contrast button text; also appears in light portions of imagery. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Primary purchase buttons and key interaction cues. |
| Navigation Ink | `#1d1d1f` | `--color-navigation-ink` | neutral | Measured global navigation text color; treat as a compact navigation detail rather than a page-wide dark text color. |
| Pale Silver | `#ececec` | `--color-pale-silver` | neutral | Secondary light text and link details, including contrast over dark areas. |
| Link Azure | `#2997ff` | `--color-link-azure` | accent | Secondary blue link text and small interface highlights. |
| Vital Green | `#00d959` | `--color-vital-green` | semantic | Battery and health feature highlights; also visible inside watch-screen graphics. |

### Semantic aliases

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

### Contrast (WCAG 2.x)

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

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgb(17, 17, 17))`
- `radial-gradient(160% 100%, rgb(0, 217, 89) 0px, rgb(255, 255, 255) 36%, rgb(255, 255, 255) 100%)`

## Typography

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

- **SF Pro Text:** Use compact sans-serif text with measured medium-to-semibold body and link weights; controls and navigation stay small and regular.
- **SF Pro Display:** Measured headlines are semibold, large, and slightly negatively tracked; use sentence case for sections and uppercase only where the hero artwork calls for it.

### 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 headline treatment in the hero. |
| h1 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Primary hero title and major feature-story headline. |
| h2 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Large chapter headings such as highlights and data stories. |
| h3 | 32px | 600 | 1.13 | 0.004em | — | SF Pro Display | Subheadings in feature cards and editorial modules. |
| h4 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Smaller card or metric headings. |
| body | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Feature explanations and supporting product copy. |
| caption | 14px | 600 | 1.29 | -0.016em | — | SF Pro Text | Compact image, metric, and footnote-adjacent labels. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Purchase CTA and compact control labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global Apple navigation labels. |
| link | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Inline feature links and secondary actions. |

OpenType features in use: `"numr"`.

## Spacing & layout

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

A spacious, long-scroll editorial layout uses a measured page maximum width of 1260px, with full-bleed media in the hero and selected story sections. Centered hero and introductory chapters contrast with left-aligned feature galleries and card rows. Sections alternate between black and #111111, with measured section gaps reaching 144px and a 4px base spacing unit. Density stays low around large imagery, then rises in charcoal feature grids where several compact stories share a row.

## Shape & elevation

- Radius: button `50%` · 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 measured design has no prominent shadows. Surfaces feel mostly flat, with section background changes providing separation instead of borders. Use rounded image and content panels where shown, and keep layering limited to media over the dark canvas, overlay text, and pill-shaped controls.

## Imagery

Use large, cinematic product renders against black, with the watch often isolated and its screen details sharply visible. Supporting runner photography is frequently monochrome, while watch-interface artwork carries vivid green, blue, and other metric colors. Mix full-bleed video or image moments with contained rounded product cards; keep the visual treatment crisp, dramatic, and product-led.

## Components

### Global navigation

Compact horizontal Apple navigation across the top, set against a dark bar with small, muted labels and simple icon actions.

### Hero purchase CTA

Centered electric-blue pill button with white text, followed by compact pricing and financing details.

### Full-bleed product hero

Large isolated watch render beneath a bold centered headline on the black canvas; media dominates the opening view.

### Highlight carousel

Charcoal section with a left-aligned chapter title and wide image-led feature panels, with concise overlaid copy.

### Feature card gallery

Rows of dark, rounded image cards combine watch-interface visuals, short headings, and compact explanatory text.

### Battery metrics panel

Dark rounded panel centers a green feature heading and separates everyday and workout battery figures into two columns.

### Measured component styles

- **Primary button** (“Buy Apple Watch Ultra 4”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button** (“Battery”): background #676767 · text #2997ff · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“13”): 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 black and charcoal as the dominant section surfaces.
- Keep hero headlines large, concise, and high contrast.
- Let the product render occupy the visual center of the hero.
- Reserve blue for actions and green for feature signals.
- Alternate open cinematic chapters with compact card galleries.
- Use generous vertical pauses between major stories.

## Don't

- Don't add decorative shadows or heavy borders.
- Don't introduce unmeasured colors into the core palette.
- Don't let explanatory text compete with product imagery.
- Don't use dense grids throughout the entire page.
- Don't apply feature green as a general-purpose background.
- Don't replace the dark canvas with broad light panels.

## Agent prompt

Build a new product-story page in Apple’s dark editorial style. Use Deep Canvas (#000000) as the main background, alternating with Charcoal Band (#111111) to mark chapters. Set major headings in a close SF Pro Display substitute such as Inter, with Soft White (#f5f5f7) text and restrained negative tracking; keep body copy smaller and muted in Quiet Gray (#86868b). Lead with a full-bleed, isolated product image and a centered headline. Use generous vertical pauses, then alternate concise feature stories with rounded media cards and occasional two-column metrics panels. Apply Action Blue (#0071e3) only to clear CTAs and Link Azure (#2997ff) to secondary links. Use Vital Green (#00d959) sparingly for health or performance metrics, especially where it reflects product-interface graphics. Keep surfaces flat, borders minimal, and imagery dominant.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and product render on black, with purchase details beneath. | primary purchase CTA, pricing and financing details | full-bleed product media, centered display headline, blue pill button |
| 2 | gallery | Charcoal band with left-aligned title and wide, image-led highlights. | browse feature highlights, carousel-style content | dark feature panels, overlaid copy, wide photography |
| 3 | product-showcase | Dark, image-focused product viewer with a compact section heading. | inspect product views, image selection controls | product imagery, viewer controls, dark canvas |
| 4 | feature-split | Centered section label, headline, and compact explanatory copy. | introduce a feature chapter | green eyebrow label, white heading, muted body text |
| 5 | feature-split | Centered editorial heading and copy above expansive supporting media. | explain sensor improvements | large chapter title, centered copy, full-bleed media |
| 6 | feature-split | Open black section with compact copy and a single large visual. | explain readiness insights | minimal copy block, isolated watch imagery |
| 7 | product-showcase | Large centered watch visual on black, with minimal surrounding copy. | show a health metric in context | isolated product render, dark interface screen |
| 8 | stats | Two-column explanatory text and large numeric callouts. | compare measured metrics, support claims with figures | large white numerals, muted explanatory copy |
| 9 | feature-split | Charcoal-backed full-bleed runner image with left-aligned story text. | connect product features to training | monochrome action photography, overlay headline and copy |
| 10 | feature-grid | Dense row of compact feature cards on charcoal. | scan multiple running features, browse card gallery | watch-screen images, short card headings, carousel controls |
| 11 | stats | Centered rounded panel with explanatory text and two metric columns. | compare everyday and workout use, link to battery details | green feature heading, paired metric columns, blue inline link |
| 12 | feature-split | Left-aligned chapter heading and short explanatory copy. | introduce health-data benefits | large white heading, muted supporting paragraph |
| 13 | feature-grid | Charcoal feature gallery with multiple watch-interface cards. | scan health features, browse multiple topics | rounded image cards, interface-led imagery, compact descriptions |

## 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-ultra-4