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

# Apple — Apple Watch SE 3 · Design System

> Quiet canvas, vivid product, confident clarity.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.apple.com/apple-watch-se-3/ · **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 product page pairs a bright, restrained interface with immersive product imagery and vivid feature accents. Oversized typography, rounded content panels, and generous whitespace carry visitors from the hero through health and fitness stories.

## North star

Keep the interface quiet and spacious so product imagery and a few precise colour accents carry the story.

## Overview

The page uses white as its dominant canvas, with soft light-gray bands separating product exploration from long-form storytelling. Near-black headings provide crisp contrast, while muted gray supports utility copy and restrained blue marks purchase actions and links. Green and multicolour gradients are used selectively for feature messaging and watch-related visuals rather than as broad interface fills. SF Pro Display gives headlines a compact, assertive presence; SF Pro Text keeps navigation, captions, and controls readable and understated. The centered opening hero lets product imagery and a colourful campaign headline command attention, then transitions into left-aligned feature stories, horizontal card rails, and image-led sections. Generous vertical gaps keep the unusually long page calm and scannable. Rounded panels and pill-shaped buttons soften the otherwise precise, minimal interface; depth comes chiefly from imagery rather than borders or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Graphite | `#6e6e73` | `--color-soft-graphite` | neutral | Muted body copy, secondary information, and some text links. |
| Cloud Gray | `#f5f5f7` | `--color-cloud-gray` | surface | Light gray canvas and rounded product-exploration card backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, hero background, and clean content sections. |
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | brand | Primary headings, body text, and navigation on light backgrounds. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Primary purchase buttons and focus or action emphasis. |
| Motion Green | `#03873a` | `--color-motion-green` | semantic | Occasional green feature text and links; complements fitness messaging. |
| Violet Glow | `#915cf0` | `--color-violet-glow` | accent | Gradient endpoint and selective colourful feature emphasis. |
| Pulse Red | `#ff3434` | `--color-pulse-red` | semantic | Gradient endpoint and watch-display or health-visual accents. |
| Berry Violet | `#7932a9` | `--color-berry-violet` | accent | Illustrative gradient colour, not a broad interface surface. |
| Sky Signal | `#558fff` | `--color-sky-signal` | accent | Illustrative gradient colour and feature artwork. |
| Vital Teal | `#05a39f` | `--color-vital-teal` | semantic | Gradient and campaign lettering accents, especially health or fitness stories. |
| Leaf Green | `#71a412` | `--color-leaf-green` | semantic | Gradient and feature-art colour; primarily illustrative. |
| Navigation Charcoal | `#333333` | `--color-navigation-charcoal` | neutral | Small navigation text and dark interface details. |
| Link Blue | `#0066cc` | `--color-link-blue` | accent | Inline links and selected text-link treatments. |

### Semantic aliases

`--color-canvas` → `#f5f5f7` (Cloud Gray) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#1d1d1f` (Apple Ink) · `--color-text-muted` → `#6e6e73` (Soft Graphite) · `--color-accent` → `#0071e3` (Action Blue) · `--color-accent-2` → `#03873a` (Motion Green) · `--color-accent-3` → `#915cf0` (Violet Glow) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1f` | `#f5f5f7` | 15.46:1 | AAA |
| `#1d1d1f` | `#ffffff` | 16.83:1 | AAA |
| `#6e6e73` | `#f5f5f7` | 4.66:1 | AA |
| `#6e6e73` | `#ffffff` | 5.07:1 | AA |
| `#0071e3` | `#f5f5f7` | 4.31:1 | AA-large |
| `#0071e3` | `#ffffff` | 4.7:1 | AA |

### Gradients

- `linear-gradient(135deg, rgb(145, 92, 240), rgb(255, 52, 52))`
- `linear-gradient(135deg, rgb(121, 50, 169), rgb(85, 143, 255))`
- `linear-gradient(135deg, rgb(5, 163, 159), rgb(113, 164, 18))`
- `linear-gradient(110deg, oklab(0.652 -0.1245 0.0216), oklab(0.66464 -0.065 -0.174) 25%, oklab(0.5925 0.0439 -0.2239) 75%, oklab(0.62947 0.2406 -0.15))`

## Typography

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

- **SF Pro Text:** Use regular text for utility and caption roles; compact tracking keeps small UI crisp.
- **SF Pro Display:** Semibold display faces, tight tracking, and compact line height; sentence case, not all caps.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 600 | 1.04 | -0.015em | — | SF Pro Display | Oversized campaign headline in the product hero. |
| h1 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Primary product or major section headline. |
| h2 | 56px | 600 | 1.07 | -0.005em | — | SF Pro Display | Large feature-story and editorial section headings. |
| h3 | 48px | 600 | 1 | -0.003em | — | SF Pro Display | Subsection headings within feature narratives. |
| h4 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Compact feature-card and story titles. |
| body | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Prominent supporting copy and linked feature text. |
| caption | 14px | 400 | 1.43 | -0.016em | — | SF Pro Text | Descriptions, footnotes, and secondary explanatory copy. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Compact purchase controls and small action labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global navigation and product-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 **2px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 8, 10, 14, 15, 16, 18, 19, 20, 22, 24, 28, 30, 32 px.
- Section rhythm 160px · element gap 20px · card padding — · max content width 1260px.

The measured page max width is 1260px, with a spacious density and a large 160px section gap. The opening hero is centered, while subsequent editorial headings and feature content generally align left. Full-width imagery and color bands punctuate a sequence of single-column stories, card rails, and multi-column feature areas. Keep text blocks short beside large product visuals and allow substantial breathing room between story groups. The page’s long scroll is organized as distinct visual chapters rather than a dense catalogue.

## Shape & elevation

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

The interface is predominantly flat, relying on white space, subtle background shifts, and imagery rather than visible outlines or drop shadows. Rounded light-gray cards provide separation without heavy borders. Buttons use pill silhouettes; product imagery and coloured section bands create the main sense of depth and layering.

## Imagery

Large, polished product renders and close-up watch photography lead the page, often set against clean white or pale tinted backgrounds. Feature cards combine watch-face visuals, interface screens, and lifestyle photography. The hero groups several watch finishes with floating, colourful app and feature symbols. Bright fitness graphics and gradient headlines appear as campaign artwork; preserve them as image-led accents rather than turning the entire UI into illustration.

## Components

### Global navigation

A slim, centered Apple navigation row with small SF Pro Text labels and simple utility icons.

### Announcement strip

A narrow pale-gray message band below the global navigation, with centered copy and a blue inline link.

### Product hero

Centered product imagery, a large gradient campaign headline, concise price information, and a blue pill-shaped Buy action.

### Feature carousel

Wide rounded feature panels pairing watch imagery with concise explanatory text and small carousel controls.

### Product explorer

A pale-gray, image-led product area with finish and feature selectors beside a large watch render.

### Story cards

Rounded visual cards with short titles and supporting copy, arranged in horizontal feature rails.

### Editorial feature section

A spacious narrative block pairing prominent colored headlines and copy with large watch or lifestyle imagery.

### Measured component styles

- **Primary button** (“Buy Apple Watch SE 3”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button** (“Sleep Score”): background #777779 · text #0066cc · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“10”): transparent background · text #6e6e73 · radius 0px · padding 0px · 600 17px SF Pro Text
- **Card**: background #f5f5f7 · text #1d1d1f · 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 white as the default canvas and reserve pale gray for distinct content zones.
- Keep primary text near-black and secondary copy muted.
- Use blue for purchase actions and functional links.
- Give product imagery generous space and visual priority.
- Break long product stories into clearly separated chapters.
- Use gradients as selective campaign or feature accents.
- Prefer pill buttons and softly rounded image panels.

## Don't

- Do not fill large interface areas with saturated accent colors.
- Do not crowd product images with dense explanatory text.
- Do not use heavy borders or prominent drop shadows.
- Do not make every section a uniform card grid.
- Do not treat illustration-only palette colours as core UI colours.
- Do not use all-caps display headings or decorative typefaces.
- Do not compress the page’s vertical rhythm into a dense layout.

## Agent prompt

Build a new Apple-style product page with a calm, long-form editorial rhythm. Use Gallery White (#ffffff) for the main canvas, Cloud Gray (#f5f5f7) for selected panels, Apple Ink (#1d1d1f) for headings, and Soft Graphite (#6e6e73) for supporting copy. Reserve Action Blue (#0071e3) for purchase actions and Link Blue (#0066cc) for inline links. Set large headlines in a tight, semibold display style and utility text in a clean sans serif. Lead with centered, generous product imagery, then alternate spacious feature stories, rounded visual cards, and occasional full-width tinted sections. Use gradients and vivid colours as restrained campaign artwork, not as default surfaces. Keep the layout precise, lightly layered, and free of heavy borders or shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Full-width white hero media area with a centered composition. | Product-first introduction, Visual feature cues | Bright canvas, Floating product imagery |
| 2 | hero | Centered product name, gradient campaign headline, price, and purchase action. | Primary purchase action, Concise product proposition | Centered typography, Blue pill button, Gradient headline |
| 3 | feature-grid | Left-aligned section heading above a horizontally browsable feature showcase. | Carousel browsing, Feature-led discovery | Rounded feature panel, Product imagery, Carousel controls |
| 4 | product-showcase | Broad pale-gray panel with selector list and a large watch render. | Finish selection, Expandable product details | Soft-gray background, Large product render, Rounded selectors |
| 5 | product-showcase | Full-width pale lavender campaign visual with large product imagery. | Narrative transition, Health feature introduction | Tinted background, Gradient headline, Immersive imagery |
| 6 | feature-grid | Multi-column story cards below a health-focused visual section. | Health feature exploration, Horizontal card browsing | Watch-face imagery, Short story copy, Carousel controls |
| 7 | product-showcase | Large fitness feature area with headline, supporting copy, and prominent visuals. | Fitness feature discovery, Editorial storytelling | Large image-led composition, Green fitness artwork, Open white canvas |
| 8 | feature-grid | A row of image-led workout and activity feature cards. | Feature-card browsing, Workout benefit discovery | Rounded imagery, Compact descriptions, Carousel controls |
| 9 | feature-split | Alternating two-column stories pairing watch visuals with text. | Progressive feature reveal, Story-led product education | Image-and-copy pairing, Large whitespace, Feature headings |
| 10 | other | Short full-width pale-blue visual band. | Visual close, Transition to following content | Pale-blue background, Edge-to-edge media |

## 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-se-3