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

# Apple — iPhone Duo · Design System

> A quiet canvas for a showpiece product.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.apple.com/iphone-duo/ · **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 spacious, editorial product story built around oversized type and cinematic imagery of a foldable iPhone. White and pale gray sections keep attention on the device, while restrained blue accents mark links and purchasing actions.

## North star

Keep the interface visually quiet so large, carefully framed product imagery and concise type do the convincing.

## Overview

The page uses a quiet neutral canvas so the foldable device and its vivid screen imagery carry the visual weight. Gallery White (#ffffff) dominates, while Soft Mist (#f5f5f7) marks occasional feature bands and card surfaces. Ink (#1d1d1f) gives headings and navigation crisp contrast; muted gray supports secondary copy, and Apple Blue is reserved for the pricing CTA and links. Typography pairs SF Pro Display for confident, tightly tracked headlines with SF Pro Text for readable supporting information and controls. The layout alternates centered product statements, wide media, and editorial feature arrangements, with generous vertical breathing room and occasional horizontal carousels. Product photography and video are presented at large scale against uncluttered backgrounds; screen content supplies most of the saturated color. Cards and controls stay simple, with rounded forms and very restrained hairline elevation rather than decorative shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and clean backgrounds behind the hero and product imagery. |
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | neutral | Headlines, primary body text, and navigation labels. |
| Quiet Graphite | `#6e6e73` | `--color-quiet-graphite` | semantic | Muted supporting copy and secondary link text. |
| Soft Mist | `#f5f5f7` | `--color-soft-mist` | surface | Highlights band and soft card surfaces that distinguish content without heavy borders. |
| Apple Blue | `#0071e3` | `--color-apple-blue` | accent | Primary View pricing CTA and focus accent. |
| Link Blue | `#0066cc` | `--color-link-blue` | accent | Learn more links and selected interactive labels. |
| Nav Charcoal | `#333333` | `--color-nav-charcoal` | neutral | Minor navigation text variation; not a defining page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f7` (Soft Mist) · `--color-text` → `#1d1d1f` (Apple Ink) · `--color-text-muted` → `#6e6e73` (Quiet Graphite) · `--color-border` → `#1d1d1f` (Apple Ink) · `--color-accent` → `#0071e3` (Apple Blue) · `--color-accent-2` → `#0066cc` (Link Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

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

### Gradients

- `linear-gradient(rgb(255, 255, 255) calc(100% - 197px), rgb(245, 245, 247))`

## Typography

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

- **SF Pro Display:** Use semibold weights for headings, compact tracking, and natural sentence case; headlines are prominent without decorative styling.
- **SF Pro Text:** Keep text clean and compact; use regular body weights, modestly stronger links, and readable small navigation labels.

### 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, such as “Hello, hello.” |
| h1 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Primary product and major feature headlines. |
| h2 | 40px | 600 | 1 | 0 | — | SF Pro Display | Section titles and prominent feature statements. |
| h3 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Feature-card headings and secondary section titles. |
| h4 | 24px | 600 | 1.33 | 0.009em | — | SF Pro Display | Compact feature labels and supporting headings. |
| body | 17px | 400 | 1.24 | -0.022em | — | SF Pro Text | Main explanatory paragraphs and product descriptions. |
| caption | 14px | 400 | 1.29 | -0.016em | — | SF Pro Text | Small product notes, dates, and image annotations. |
| button | 17px | 500 | 1.47 | -0.022em | — | SF Pro Text | Purchase CTA labels and interactive controls. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global navigation and compact utility labels. |
| link | 14px | 600 | 1.29 | -0.016em | — | SF Pro Text | Inline Learn more and supporting 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, 32, 48, 80, 90 px.
- Section rhythm 128px · element gap 20px · card padding 32px · max content width 1260px.

Use a centered content frame with a measured page maximum of 1260px, while allowing product media and feature bands to extend broadly. The page alternates centered hero statements, split editorial content, and image-led feature sections; the highlights area uses a multi-column horizontal carousel. Keep alignment intentional: centered for launch messaging, left-aligned for editorial sections. The measured spacing system is spacious, with a 128px section rhythm, 20px element gaps, and 32px card padding.

## Shape & elevation

- Radius: button `9999px` · card `28px` · nav `20px` · xs `20px` · sm `28px` · pill `9999px`
- Shadow `hairline` (nav): `rgb(230, 230, 232) 0px 0px 0px 1px`
- Shadow `hairline-2` (button): `rgb(134, 134, 139) 0px 0px 0px 1px`
- 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.

Favor flat surfaces and clear whitespace over layered cards or deep shadows. Separate occasional cards with Soft Mist backgrounds and rounded corners; use thin, understated hairlines for navigation and controls. The visible purchase CTA is a bright blue pill, while other controls remain quiet and visually subordinate.

## Imagery

Use large, polished product photography and cinematic video as the primary visual content. Show the device at realistic scale and in multiple folded, open, and standing positions, with screen imagery providing color and human context. Keep image framing clean and let device edges remain distinct against white or pale-gray surroundings. Avoid decorative illustration; the page's visual variety comes from product renders, interface screens, and lifestyle footage.

## Components

### Global navigation

Compact horizontal Apple navigation with dark labels on a light background, restrained spacing, and subtle hairline separation.

### Announcement strip

Centered lease-and-upgrade message on a pale neutral band, ending with a Link Blue text link.

### Hero pricing pill

Rounded floating purchase panel combines concise pricing copy with a prominent Apple Blue View pricing button.

### Highlights carousel

Soft Mist section with a left-aligned heading, film link, and wide rounded media cards arranged as a horizontal carousel.

### Feature card

Large image-led card on a pale surface, with concise dark copy and generous vertical padding.

### Interactive product selector

Compact list of device views with plus controls beside a large product render; selected states stay restrained.

### Feature gallery

Wide rounded image or video panels with small pagination or category controls and minimal surrounding chrome.

### Measured component styles

- **Primary button** (“View pricing”): background #0071e3 · text #ffffff · radius 120px · padding 6px 10px · 400 12px SF Pro Text
- **Secondary button** (“Display”): background #8e8e8f · text #0066cc · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“Learn more”): transparent background · text #0066cc · radius 0px · padding 0px · 400 14px SF Pro Text
- **Card** (“50% larger display than iPhone 18 Pro Ma”): background #f5f5f7 · text #1d1d1f · radius 28px · padding 64px 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 Gallery White as the default canvas.
- Reserve Soft Mist for distinct feature bands and cards.
- Use Apple Blue for the main purchase action.
- Pair oversized display headlines with concise supporting copy.
- Give product photography broad, uncluttered space.
- Use rounded cards and controls sparingly.
- Keep secondary copy visually quieter than headlines.

## Don't

- Do not add decorative gradients or bright accent colors.
- Do not crowd product imagery with extra interface elements.
- Do not use heavy shadows to create depth.
- Do not turn every section into a card.
- Do not use oversized body copy in place of headings.
- Do not make navigation or utility controls visually dominant.

## Agent prompt

Build a new product page in Apple's restrained editorial launch style. Use Gallery White (#ffffff) as the main canvas, Soft Mist (#f5f5f7) for occasional section bands and cards, and Apple Ink (#1d1d1f) for headings and primary copy. Set supporting text in Quiet Graphite (#6e6e73); reserve Apple Blue (#0071e3) and Link Blue (#0066cc) for actions and links. Use SF Pro Display-style headlines and SF Pro Text-style body copy, with concise text and clear hierarchy. Center the main product statement, then alternate spacious feature layouts, wide product media, and editorial copy. Let high-quality product photography and video dominate, with screen content providing color. Use rounded controls, subtle hairlines, and minimal elevation. Keep the page calm, precise, and image-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and preorder details above a large device image; pricing capsule overlays the lower image area. | Preorder availability, Lease pricing, Learn more link | Large display headline, Centered product media, Blue pill CTA |
| 2 | feature-grid | Pale-gray full-width band with left-aligned heading and a horizontal multi-column media carousel. | Horizontal browsing, Watch the film link, Selectable feature cards | Soft Mist background, Rounded media cards, Compact controls |
| 3 | feature-split | Centered editorial headline and explanatory paragraph on a white canvas. | Feature introduction, Supporting product details | Centered typography, Open white space |
| 4 | product-showcase | Full-bleed device imagery arranged in a broad three-column composition. | Color selection, Product view browsing | Large device renders, Minimal selector |
| 5 | gallery | Pale-gray gallery with a heading, compact view selector, and large product render. | Switch product views, Explore durability details | Plus-list controls, Large product image, Soft section band |
| 6 | other | Brief centered title block on white, introducing the expansive-display story. | Section transition | Centered heading, Minimal copy |
| 7 | feature-split | Large display media followed by two-column explanatory copy and a pale comparison card. | Display specification comparison, Feature explanation | Wide device media, Soft Mist comparison card |
| 8 | product-showcase | Centered headline and device image, followed by a concise explanatory paragraph. | Show device versatility, Explain display transitions | Centered composition, Product-focused image |
| 9 | feature-grid | Left-aligned section heading above a multi-column grid of rounded feature media cards. | Browse feature cards, Advance carousel | Rounded image cards, Multi-column layout, Minimal arrows |
| 10 | feature-split | Left-aligned editorial heading and copy paired with oversized product-camera imagery. | Camera feature introduction | Strong text hierarchy, Large device render |
| 11 | product-showcase | Two-column product imagery and camera specification content on white. | Review camera specifications | Device close-ups, Compact technical labels |
| 12 | gallery | Wide feature gallery with a four-column structure, large media, and compact category controls. | Browse camera examples, Select feature category | Video and image tiles, Small category pills, Carousel controls |

## 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-duo