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

# Apple — iPhone 18 Pro · Design System

> A cinematic stage for precision hardware.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://www.apple.com/iphone-18-pro/ · **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 built around oversized product imagery, confident typography, and immersive feature storytelling. Alternating black and charcoal sections keep attention on the burgundy iPhone while restrained blue links and purchase buttons guide action.

## North star

Keep the interface nearly invisible so oversized product imagery and crisp, restrained type carry the story.

## Overview

The page uses pure black as its dominant canvas, giving full-bleed product renders and video room to command attention. Charcoal bands distinguish selected moments, especially the highlights and design sections, without breaking the continuous dark experience. Bright near-white headlines sit against muted gray supporting copy; Apple blue appears sparingly on links and the rounded Buy CTA. SF Pro Display carries large, tightly tracked headlines, while SF Pro Text handles navigation, body copy, captions, and controls. The layout alternates expansive centered storytelling with carefully aligned product and feature compositions. Oversized imagery, close-up camera details, and cinematic video make the hardware the primary visual voice. Generous vertical pauses separate feature chapters, while cards and controls stay restrained: rounded media frames, dark surfaces, and thin borders rather than decorative shadows. Burgundy product photography supplies the strongest non-interface color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stage Black | `#000000` | `--color-stage-black` | brand | Dominant page canvas and the continuous backdrop for most product and feature storytelling. |
| Soft Graphite | `#86868b` | `--color-soft-graphite` | neutral | Muted navigation, captions, and supporting copy that should recede beneath headlines. |
| Charcoal Band | `#1d1d1f` | `--color-charcoal-band` | surface | Alternating dark section surface, notably the highlights band and design introduction. |
| Quiet Divider | `#333336` | `--color-quiet-divider` | neutral | Subtle outlines and hairlines for controls, cards, and navigation details. |
| Headline White | `#f5f5f7` | `--color-headline-white` | neutral | Primary headings, body text, navigation, and button labels on dark backgrounds. |
| Muted Slate | `#6e6e73` | `--color-muted-slate` | neutral | Secondary copy, subdued card text, and understated control or input borders. |
| Apple Blue | `#0071e3` | `--color-apple-blue` | accent | Purchase CTA fill and key interactive accent. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | High-contrast button labels and occasional emphasized text. |
| Pale Mist | `#ededee` | `--color-pale-mist` | neutral | Sparingly used secondary link and text highlight; not a major surface color. |
| Link Blue | `#2997ff` | `--color-link-blue` | accent | Learn-more and inline link text against black or charcoal. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-surface` → `#1d1d1f` (Charcoal Band) · `--color-text` → `#f5f5f7` (Headline White) · `--color-text-muted` → `#86868b` (Soft Graphite) · `--color-text-subtle` → `#6e6e73` (Muted Slate) · `--color-border` → `#333336` (Quiet Divider) · `--color-accent` → `#0071e3` (Apple Blue) · `--color-accent-2` → `#2997ff` (Link Blue) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f5f5f7` | `#000000` | 19.29:1 | AAA |
| `#f5f5f7` | `#1d1d1f` | 15.46:1 | AAA |
| `#86868b` | `#000000` | 5.8:1 | AA |
| `#86868b` | `#1d1d1f` | 4.65:1 | AA |
| `#6e6e73` | `#000000` | 4.14:1 | AA-large |
| `#6e6e73` | `#1d1d1f` | 3.32:1 | AA-large |
| `#0071e3` | `#000000` | 4.47:1 | AA-large |
| `#0071e3` | `#1d1d1f` | 3.58:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Text | `--font-body` | webfont | 600, 400, 500 | Navigation, body copy, captions, buttons, links, and compact interface labels. | Inter |
| SF Pro Display | `--font-display` | webfont | 600, 500 | Large display headlines and section titles. | Inter |

- **SF Pro Text:** Use restrained sans-serif forms; measured weights span regular to semibold, with tight tracking in text roles.
- **SF Pro Display:** Semibold display styling, close tracking, compact leading, and sentence case rather than 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 and major product statement. |
| h1 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Primary section headlines, such as the highlights and feature introductions. |
| h2 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Secondary feature titles and large editorial statements. |
| h3 | 28px | 600 | 1 | 0.007em | — | SF Pro Display | Compact feature headings and prominent product claims. |
| h4 | 21px | 600 | 1.38 | 0.011em | — | SF Pro Display | Supporting feature headings and smaller subsection titles. |
| body | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Emphasized body copy and key product descriptions. |
| caption | 12px | 600 | 1.33 | -0.01em | — | SF Pro Text | Small captions, footnotes, labels, and media annotations. |
| button | 17px | 500 | 1.47 | -0.022em | — | SF Pro Text | Purchase and interactive control labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global navigation labels. |
| link | 12px | 600 | 1.33 | -0.01em | — | SF Pro Text | Compact Learn more and inline navigation links. |

OpenType features in use: `"numr"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 12, 14, 15, 16, 20, 24, 28, 32, 48, 64 px.
- Section rhythm 144px · element gap 48px · card padding 6px · max content width 1260px.

A measured maximum content width of 1260px supports broad media and carefully composed feature layouts. The page moves between full-bleed imagery, centered editorial statements, and split or multicolumn product details; individual sections use differing column counts rather than one fixed grid. Heading alignment shifts with the story, from left-aligned introductions to centered feature claims. Section spacing is spacious, with long vertical pauses between chapters and tighter groupings within cards, controls, and specifications.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `28px` · nav `20px` · xs `20px` · sm `28px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.11) 0px 0px 0.5px 0px inset`
- Shadow `hairline` (nav): `rgb(40, 40, 40) 0px 0px 0px 1px`
- Shadow `hairline-2` (button): `rgb(110, 110, 115) 0px 0px 0px 1px`
- Motion: standard transition `0.32s cubic-bezier(0.4, 0, 0.6, 1)` on interactive elements.

The visual system is mostly flat, relying on alternating dark section surfaces and media layering rather than prominent shadows. Hairline borders define selected cards, controls, and navigation elements; dark outlines remain intentionally subtle. Rounded pills mark actions and compact controls, while large product imagery supplies depth through lighting, reflections, and overlap.

## Imagery

Product renders and cinematic video dominate: close camera details, side profiles, and full-device views are framed against near-black backgrounds. Feature imagery ranges from full-bleed hero compositions to rounded media panels and paired editorial cards. The hardware’s burgundy finish provides a warm visual counterpoint; other saturated colors mostly belong to video scenes, not the interface palette.

## Components

### Global navigation

Compact horizontal navigation over a black backdrop, with subdued labels and utility icons.

### Announcement strip

A charcoal horizontal band with centered small copy and a blue inline link.

### Purchase pill

Rounded dark pricing container paired with a bright blue Buy button and white label.

### Feature media card

Large product or video image framed by a dark section; selected cards use rounded corners.

### Inline link

Small semibold blue Learn more or feature link, kept visually light.

### Specification rows

Minimal technical details separated by thin gray hairlines and supported by muted captions.

### Pill controls

Compact rounded selectors or feature controls with restrained borders and high-contrast labels.

### Measured component styles

- **Primary button** (“Buy”): background #0071e3 · text #ffffff · radius 120px · padding 6px 10px · 400 12px SF Pro Text
- **Secondary button** (“Camera”): background #6f6f70 · text #2997ff · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“Learn more”): transparent background · text #2997ff · radius 0px · padding 0px · 400 14px SF Pro Text
- **Input** (“iPhone 14 iPhone 14 Pro iPhone 14 Pro Ma”): transparent background · text #f5f5f7 · border 1px solid #6e6e73 · radius 980px · padding 0px 45px 0px 24px · 400 17px SF Pro Text
- **Card** (“All 48MP rear cameras”): transparent background · text #6e6e73 · border 1px solid #6e6e73 · radius 0px · padding 25px 0px 0px 0px · 400 14px 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 as the primary canvas.
- Alternate charcoal bands only where they clarify section changes.
- Give product imagery room to dominate the composition.
- Use near-white for headlines and gray for supporting copy.
- Reserve blue for links, focus, and purchase actions.
- Keep feature storytelling spacious and editorial.
- Use hairlines and rounded controls sparingly.

## Don't

- Do not add gradients to the interface.
- Do not use bright colors as broad section backgrounds.
- Do not crowd the page with decorative cards.
- Do not give every section the same grid or alignment.
- Do not make supporting copy compete with headlines.
- Do not use heavy shadows as the primary source of depth.
- Do not mistake colors inside cinematic footage for brand UI colors.

## Agent prompt

Build a new product page in Apple’s restrained, cinematic launch style. Use Stage Black (#000000) as the main canvas and Charcoal Band (#1d1d1f) for occasional section breaks. Set headlines in a close SF Pro Display-like sans serif, with SF Pro Text-like body and interface copy; use Headline White (#f5f5f7) for primary text and Soft Graphite (#86868b) or Muted Slate (#6e6e73) for supporting detail. Keep Apple Blue (#0071e3) and Link Blue (#2997ff) limited to actions and links. Center the story on large, high-quality product renders or video, alternating full-bleed compositions with compact technical details. Preserve generous chapter spacing, thin understated borders, and rounded pill controls. Avoid decorative gradients and heavy elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero with oversized device imagery above a left-aligned headline and purchase details. | product introduction, purchase CTA, financing details | black canvas, large product render, blue Buy pill, white headline |
| 2 | gallery | Charcoal section with a left-aligned introduction and horizontally presented large media cards. | feature browsing, film link, horizontal media discovery | charcoal band, rounded video card, muted copy, blue link |
| 3 | comparison | Centered editorial headline and copy above a comparison selector, concise metrics, and product close-up. | model comparison, specification scan, upgrade benefits | centered typography, outlined selector, hairline rules, product render |
| 4 | other | Short charcoal section with a small eyebrow and oversized left-aligned statement. | chapter transition, design positioning | charcoal surface, large white type, minimal copy |
| 5 | product-showcase | Black full-bleed showcase with device imagery and a vertical set of feature selectors. | feature selection, product exploration | black canvas, device render, rounded selector pills |
| 6 | video | Large full-bleed camera image with centered eyebrow and headline. | feature introduction, immersive storytelling | dark image, centered white headline, full-width media |
| 7 | feature-split | Two-column black section combining explanatory copy with compact camera specifications. | technical detail scan, feature explanation | split columns, fine dividers, muted specifications |
| 8 | other | Centered heading and supporting copy on black with generous separation from neighboring chapters. | feature explanation, chapter pacing | centered typography, small muted body copy |
| 9 | feature-grid | Centered feature story with a broad media frame, aperture controls, and compact supporting annotations. | interactive aperture selection, visual demonstration | rounded media frame, selector pills, compact caption |
| 10 | gallery | Asymmetric multicolumn editorial gallery with large image cards and short descriptions. | feature browsing, carousel navigation | image-led cards, minimal borders, small controls |
| 11 | video | Centered cinematic headline and long device-led media composition on black. | video feature explanation, immersive viewing | large white headline, full-bleed media, dark backdrop |
| 12 | gallery | Left-aligned heading above paired media cards within a dark, spacious section. | paired feature browsing, carousel navigation | two-column media cards, rounded imagery, compact captions |
| 13 | other | Centered battery-life eyebrow and oversized headline on black. | benefit statement, chapter transition | centered typography, high-contrast headline, minimal background |

## 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);
--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);
--sk-footnote-font-size: 0.6em;
--sk-glyph-gray-secondary: rgb(110,110,115);
--sk-glyph-gray-secondary-alpha: rgba(0,0,0,0.56);
--sk-glyph-gray-secondary-alt: rgb(66,66,69);
--sk-glyph-gray-secondary-alt-alpha: rgba(0,0,0,0.72);
--sk-fill-secondary: rgb(250,250,252);
--sk-fill-gray-secondary: rgb(134,134,139);
--sk-fill-gray-secondary-alpha: rgba(0,0,0,0.48);
--sk-fill-orange-secondary: rgb(255,249,244);
--sk-fill-green-secondary: rgb(245,255,246);
--sk-fill-red-secondary: rgb(255,242,244);
--sk-fill-yellow-secondary: rgb(255,254,242);
```

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