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

# Apple — iPad Air · Design System

> Airy product storytelling in luminous blue

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.apple.com/ipad-air/ · **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._

An expansive iPad Air launch page pairs oversized, tightly tracked headlines with floating product imagery and generous open space. A cool, nearly white canvas and restrained blue accents keep the long product story cohesive, while interface screenshots and video demonstrate capabilities.

## North star

Let oversized product imagery and crisp, spacious typography carry the story, with blue used sparingly to guide attention.

## Overview

The page is built on a cool, very pale gray-green canvas (#f3f6f6), with white surfaces reserved for clean contrast rather than heavy section banding. Black and muted gray carry most copy; saturated blues mark purchase actions, links, and selected headline treatments. Pale cyan and blue gradients appear prominently in the hero and selected feature headings, but much of this color belongs to product artwork and should not be applied as a universal background. SF Pro Display gives headlines a bold, compact, editorial presence, while SF Pro Text handles navigation, copy, and controls. The layout alternates oversized centered product moments with quieter explanatory passages, using generous vertical gaps and broad media compositions. Product renders, device screens, and video are the main visual material; text remains concise and subordinate to them. Rounded CTA pills and occasional softly rounded white cards add gentle containment without introducing a dense border system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Air Mist | `#f3f6f6` | `--color-air-mist` | brand | Page canvas and the continuous pale backdrop behind most product-story sections. |
| Quiet Graphite | `#6e6e73` | `--color-quiet-graphite` | neutral | Muted supporting copy, secondary link details, and lower-priority text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Clean card and navigation surfaces, plus the text color on blue purchase buttons. |
| Display Ink | `#1d1d1f` | `--color-display-ink` | neutral | Primary headings, navigation labels, body copy, and dark text on white surfaces. |
| Glacier Tint | `#c6e6f1` | `--color-glacier-tint` | semantic | Pale blue gradient color associated with hero and section artwork; not a default UI fill. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Primary Buy CTA fill and high-priority interactive emphasis. |
| Deep Current | `#004c94` | `--color-deep-current` | accent | Dark blue gradient and selected blue display-text treatments. |
| Clearwater Blue | `#297bc4` | `--color-clearwater-blue` | accent | Lighter blue gradient stop and blue headline treatment. |
| Sky Glass | `#bbe2f0` | `--color-sky-glass` | semantic | Pale gradient stop in product-story artwork, not a general-purpose section color. |
| Navigation Charcoal | `#313131` | `--color-navigation-charcoal` | neutral | Small navigation text and dark interface details. |
| Link Blue | `#0066cc` | `--color-link-blue` | accent | Inline Learn more link text and secondary navigation to further information. |

### Semantic aliases

`--color-canvas` → `#f3f6f6` (Air Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#1d1d1f` (Display Ink) · `--color-text-muted` → `#6e6e73` (Quiet Graphite) · `--color-accent` → `#0071e3` (Action Blue) · `--color-accent-2` → `#004c94` (Deep Current) · `--color-accent-3` → `#297bc4` (Clearwater Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1f` | `#f3f6f6` | 15.49:1 | AAA |
| `#1d1d1f` | `#ffffff` | 16.83:1 | AAA |
| `#6e6e73` | `#f3f6f6` | 4.67:1 | AA |
| `#6e6e73` | `#ffffff` | 5.07:1 | AA |
| `#0071e3` | `#f3f6f6` | 4.32:1 | AA-large |
| `#0071e3` | `#ffffff` | 4.7:1 | AA |

### Gradients

- `linear-gradient(rgb(187, 226, 240) 25%, rgba(187, 226, 240, 0.973) 26.9737%, rgba(187, 226, 240, 0.95) 28.9474%, rgba(187, 226, 240, 0.92) 30.9211%, rgba(187, 226, 240, 0.894) 32.8947%, rgba(187, 226, 240, 0.867) 34.8684`
- `linear-gradient(rgb(0, 76, 148) 45%, rgb(41, 123, 196) 90%)`
- `linear-gradient(90deg, rgb(0, 144, 247) 8%, rgb(186, 98, 252), rgb(242, 65, 107), rgb(245, 86, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Display | `--font-display` | webfont | 600, 400 | Oversized hero and section headlines, display statements, and prominent feature links. | Inter |
| SF Pro Text | `--font-body` | webfont | 400, 600 | Navigation, body copy, captions, button labels, and small supporting information. | Inter |

- **SF Pro Display:** Use semibold display weight, tight negative tracking, compact line-height, and sentence case.
- **SF Pro Text:** Keep supporting text restrained and clean; use regular weight for copy and semibold for selected emphasis.

### Type scale — Golden Ratio (ratio ≈ 1.628, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 600 | 0.88 | -0.04em | — | SF Pro Display | Oversized hero wordmark-style headline, such as “Whoosh.” |
| h1 | 80px | 600 | 1.05 | -0.015em | — | SF Pro Display | Primary product or feature headline at the start of a story. |
| h2 | 56px | 600 | 1.07 | -0.005em | — | SF Pro Display | Major feature section headings and prominent statements. |
| h3 | 40px | 600 | 1.1 | 0 | — | SF Pro Display | Supporting feature headlines and compact display messages. |
| h4 | 34px | 600 | 1.47 | -0.011em | — | SF Pro Text | Smaller secondary headings within feature storytelling. |
| body | 14px | 400 | 1.43 | -0.016em | — | SF Pro Text | Concise explanatory product copy and supporting details. |
| caption | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Small image captions, footnotes, and interface labels. |
| button | 17px | 400 | 1.24 | -0.022em | — | SF Pro Text | Purchase CTA text and prominent interactive controls. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global navigation labels and compact utility text. |
| link | 21px | 600 | 1.38 | 0.011em | — | SF Pro Display | Prominent feature links and secondary calls to learn more. |

OpenType features in use: `"numr"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 15, 16, 20, 21, 22, 28, 30, 40, 70, 72, 90, 100 px.
- Section rhythm 70px · element gap 20px · card padding — · max content width 1260px.

Use a centered, wide content frame with a measured maximum width of 1260px and a comfortable density. The page keeps a single pale canvas across long sections, varying alignment between centered headline-and-product compositions and structured feature layouts. Sections breathe with a measured 70px section gap and elements with a 20px gap; larger vertical pauses are especially noticeable around media. Product imagery can span broadly or sit in asymmetric editorial arrangements, while text blocks stay comparatively narrow.

## Shape & elevation

- Radius: button `9999px` · card `28px` · xs `28px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.05) 0px 0px 35px 20px`
- Motion: standard transition `0.32s cubic-bezier(0.4, 0, 0.6, 1)` on interactive elements.

The system is mostly flat: pale canvas, strong type, and media provide hierarchy rather than outlines. White feature cards are occasional islands, with large corner rounding and a very soft, broad shadow. Avoid relying on hairlines or stacked panel borders; use spacing and overlapping device renders to establish depth.

## Imagery

Lead with polished 3D product renders, often isolated against pale space or layered at expressive angles. Use device screens and interface mockups to make software features tangible, and incorporate video as an in-context demonstration. Keep hardware silhouettes crisp, shadows soft, and screen imagery vivid; colorful content inside the screens is illustrative and should not redefine the site palette.

## Components

### Global navigation

Compact horizontal Apple navigation over the pale page top, with restrained dark labels and utility icons.

### Announcement strip

A slim centered financing message with a muted text treatment and blue Learn more link.

### Product purchase CTA

Blue pill-shaped Buy control with white SF Pro Text; the primary purchase action is visually distinct but compact.

### Hero product stage

Large blue-toned headline above overlapping iPad renders, followed by a centered feature statement and purchase details.

### Feature media card

Broad video or image presentation with softly rounded corners; overlay concise explanatory text where appropriate.

### Feature storytelling

Centered display heading paired with a large device composition and short supporting copy.

### Privacy callout

White rounded card with a soft diffuse shadow, colorful Apple Intelligence icon, and compact explanatory text.

### Model selector

Compact controls below product imagery distinguish the 11-inch and 13-inch model options.

### Measured component styles

- **Primary button** (“Buy iPad Air”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button**: background #e8e8ed · text #000000 · radius 36px · padding 0px · 400 17px SF Pro Text
- **Link** (“Learn more”): transparent background · text #0066cc · radius 0px · padding 0px · 400 14px SF Pro Text
- **Card** (“Apple Intelligence.”): background #ffffff · text #1d1d1f · radius 0px · padding 0px · 600 80px SF Pro Display
- **Navigation item** (“Apple Store Mac iPad iPhone Watch Vision”): transparent background · text #1d1d1f · radius 0px · padding 0px · 400 17px SF Pro Text

## Do

- Keep the page canvas pale and consistent.
- Give each feature section generous breathing room.
- Use large, tightly tracked display headlines.
- Let device imagery dominate its story beat.
- Reserve Action Blue for clear interaction cues.
- Use gradients selectively for product storytelling.

## Don't

- Do not add unmeasured colors or decorative borders.
- Do not turn every section into a white card.
- Do not fill open space with extra copy.
- Do not use gradients as a universal page background.
- Do not treat colorful screen content as brand UI color.
- Do not crowd product renders with controls.

## Agent prompt

Build a new product-story page in Apple’s iPad Air visual style. Use Air Mist (#f3f6f6) as the continuous canvas, Display Ink (#1d1d1f) for primary text, and Quiet Graphite (#6e6e73) for supporting copy. Use Action Blue (#0071e3) for the main CTA and Link Blue (#0066cc) for inline links. Set display headlines in SF Pro Display or a close Inter substitute, with bold weight and tight tracking; use SF Pro Text or Inter for navigation and body copy. Create spacious, editorial sections that alternate centered headlines, carefully composed product imagery, and concise explanations. Keep gradients such as Glacier Tint (#c6e6f1) and Sky Glass (#bbe2f0) localized to appropriate visual moments. Favor clean, mostly flat surfaces, pill CTAs, and occasional softly rounded white cards. Treat screen artwork as imagery, not interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and layered iPad imagery within a wide pale hero area. | Hero product introduction, Primary purchase action, Financing information | Oversized display text, Blue pill CTA, Pale gradient product backdrop |
| 2 | gallery | Single-column highlight area with selectable content and media-led cards. | Browse highlights, Watch product film, Move between featured items | Large media cards, Carousel navigation, Minimal controls |
| 3 | product-showcase | Wide, full-bleed product presentation with multiple color options. | Inspect device finishes, Switch color option | Large product renders, Color selectors, Carousel controls |
| 4 | feature-split | Centered performance story mixing device imagery, explanatory copy, and comparison figures. | Explore chip benefits, Scan performance comparisons | Feature headline, Large device media, Compact stat callouts |
| 5 | feature-split | Centered heading and device collage followed by a restrained explanatory text block. | See OS features, Understand app workflow | Layered device screens, Two-tone headline, Centered copy |
| 6 | feature-grid | Centered introduction followed by alternating device imagery and feature explanations. | Explore AI capabilities, Read privacy details | Gradient feature heading, Device-screen examples, White privacy callout |
| 7 | comparison | Centered product comparison with a large device image and compact model selectors. | Compare two sizes, Select model | Large product render, Segmented model control, Short display specification |

## 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);
--inset-border-radius: 10px;
--ribbon-background-color: swatch(fill);
--ax-contrast-color: swatch(glyph-gray-secondary);
--sk-body-text-color: rgb(29,29,31);
--sk-headline-text-color: rgb(29,29,31);
```

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