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

# Apple — MacBook Pro · Design System

> Dark space, luminous type, focused product storytelling

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://www.apple.com/macbook-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 long-form MacBook Pro launch page built around a near-black canvas, bold typography, and immersive product media. Restrained blue calls to action and cool gradient lettering add selective color without diluting the cinematic mood.

## North star

Let expansive black space and precise product media lead; use color only to clarify hierarchy or spotlight a specific chip message.

## Overview

The page uses #000000 as its dominant canvas, giving the opening product story and long technical sequences a cinematic, gallery-like feel. A charcoal #1d1d1f band distinguishes the highlights and product-exploration areas without introducing a light theme. Headlines use SF Pro Display with a heavy, compact silhouette; the main hero slogan and chip-family statements shift into cool mint-to-steel gradients visible in the measured palette, while body copy remains white or muted gray. Bright Apple blue is reserved for purchase and informational links, not broad decoration. Layout alternates large, sparse full-bleed scenes with dense modular feature areas, keeping text anchored beside or beneath product imagery. Wide section gaps let each product claim read as a distinct chapter. Media is the principal visual texture: hardware renders, video, and detail imagery sit against dark fields, with rounded cards appearing in selected highlight content. The overall effect is precise, restrained, and product-led rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Stage | `#000000` | `--color-deep-stage` | brand | Dominant page canvas and background for hero, chip storytelling, and most long-form feature sections. |
| Soft Porcelain | `#f5f5f7` | `--color-soft-porcelain` | neutral | High-contrast heading and link text against black and charcoal sections. |
| Quiet Silver | `#86868b` | `--color-quiet-silver` | neutral | Muted body copy and secondary link text; use to lower emphasis without losing legibility. |
| Graphite Panel | `#1d1d1f` | `--color-graphite-panel` | surface | Charcoal section bands and rounded feature-card surfaces, especially highlights and product exploration. |
| Pure Light | `#ffffff` | `--color-pure-light` | neutral | Primary navigation, hero and heading text, button labels, and other high-priority copy. |
| Mist Text | `#ebebeb` | `--color-mist-text` | neutral | Supporting text and links where slightly softened white is preferable to full white. |
| Apple Blue | `#0071e3` | `--color-apple-blue` | accent | Primary purchase button fill and restrained action emphasis. |
| Orchid Glow | `#c683ef` | `--color-orchid-glow` | accent | Gradient accent for selected chip-family text and links; not a general page surface. |
| Periwinkle Beam | `#83a0ef` | `--color-periwinkle-beam` | accent | Cool gradient text and link accent in the chip storytelling; keep limited to highlighted messaging. |
| Slate Teal | `#45657d` | `--color-slate-teal` | accent | Deep terminal hue in a measured mint-to-steel gradient used for selected text treatment. |
| Frost Mint | `#e4f6f0` | `--color-frost-mint` | accent | Pale opening hue in a cool gradient used for select chip and performance messaging. |
| Sea Glass | `#9dcfca` | `--color-sea-glass` | accent | Midpoint of a mint-to-blue gradient on highlighted text, not a standalone UI fill. |
| Harbor Blue | `#6b95ac` | `--color-harbor-blue` | accent | Intermediate cool gradient tone used in selected text and link treatments. |
| Nav Gray | `#cccccc` | `--color-nav-gray` | neutral | Secondary global navigation and link text, visually quieter than primary white. |
| Media Charcoal | `#333336` | `--color-media-charcoal` | surface | Subtle dark tone sampled within media gradients and imagery; not a defining interface surface. |
| Icy Lilac | `#e1e5ff` | `--color-icy-lilac` | accent | Pale endpoint in a measured blue-lilac gradient for selected text accents. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Stage) · `--color-surface` → `#1d1d1f` (Graphite Panel) · `--color-text` → `#ffffff` (Pure Light) · `--color-text-muted` → `#86868b` (Quiet Silver) · `--color-text-subtle` → `#000000` (Deep Stage) · `--color-accent` → `#0071e3` (Apple Blue) · `--color-accent-2` → `#c683ef` (Orchid Glow) · `--color-accent-3` → `#83a0ef` (Periwinkle Beam) · `--color-on-accent` → `#ffffff` (Pure Light)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1d1d1f` | 16.83:1 | AAA |
| `#86868b` | `#000000` | 5.8:1 | AA |
| `#86868b` | `#1d1d1f` | 4.65:1 | AA |
| `#000000` | `#1d1d1f` | 1.25:1 | fail |
| `#0071e3` | `#000000` | 4.47:1 | AA-large |
| `#0071e3` | `#1d1d1f` | 3.58:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(228, 246, 240), rgb(157, 207, 202) 31%, rgb(107, 149, 172) 68%, rgb(69, 101, 125))`
- `linear-gradient(90deg, rgb(225, 229, 255) 7%, rgb(131, 160, 239) 80%)`
- `linear-gradient(90deg, rgb(255, 225, 252) 7%, rgb(198, 131, 239) 79%)`
- `linear-gradient(108deg, rgb(0, 144, 247), rgb(186, 98, 252) 33%, rgb(242, 65, 107) 66%, rgb(245, 86, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Display | `--font-body` | webfont | 600 | Display headlines, page and section titles, prominent product statements, and large text links. | Inter |
| SF Pro Text | `--font-sf-pro-text` | webfont | 400, 600 | Navigation, buttons, captions, and supporting interface and body copy. | Roboto |

- **SF Pro Display:** Use measured semibold weight for display hierarchy; tight negative tracking on the largest headlines, with natural sentence case.
- **SF Pro Text:** Regular and semibold weights; compact, untransformed labels and restrained tracking for navigation and buttons.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.05 | -0.015em | — | SF Pro Display | Oversized hero slogan and standout product messaging. |
| h1 | 64px | 600 | 1.06 | -0.009em | — | SF Pro Display | Primary page or major campaign headline. |
| h2 | 56px | 600 | 1.07 | -0.005em | — | SF Pro Display | Large section headline, including feature chapter titles. |
| h3 | 32px | 600 | 1.13 | 0.004em | — | SF Pro Display | Subsection headings and prominent feature titles. |
| h4 | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Smaller feature and card headings. |
| body | 19px | 600 | 1.21 | 0.012em | — | SF Pro Display | Emphasized short product statements and supporting feature copy. |
| caption | 14px | 400 | 1.43 | -0.016em | — | SF Pro Text | Media notes, compact explanatory copy, and secondary details. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Purchase and other compact action labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global site navigation labels. |
| link | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Prominent text links and large numeric link treatments. |

OpenType features in use: `"numr"`.

## Spacing & layout

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

The page uses a measured maximum content width of 1260px, with full-bleed media and dark sections extending beyond the content column. The opening hero places its text block low and left against a large image-led field. Later chapters alternate spacious single-column statements with multi-column feature and card arrangements. The measured section gap is generous, while smaller content groups stay compact. Alignment is mostly left-led; sparse copy and broad negative space keep the page from feeling dense despite its long editorial sequence.

## Shape & elevation

- Radius: button `9999px` · card `28px` · media `12px` · link `50%` · xs `12px` · sm `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 interface is mostly flat: dark canvas and charcoal bands define structure instead of shadows or visible borders. Measured shadow data is empty, and the screenshot supports a clean, unoutlined presentation. Selected feature cards use a 28px radius; media uses a 12px radius, while pill-shaped purchase actions use a fully rounded treatment.

## Imagery

Product imagery and video provide the main visual interest, often framed against black or charcoal so hardware silhouettes and display content stand out. Full-bleed media anchors major chapters; smaller image groups and feature cards support the highlights and technical story. Keep imagery crisp and carefully composed, with subdued surrounding UI. Some measured colors appear within gradients or media itself, rather than functioning as interface colors.

## Components

### Global navigation

Compact horizontal navigation on the black canvas, with white or muted labels and small utility icons.

### Announcement strip

A narrow charcoal band directly below global navigation, carrying centered financing copy and a blue text link.

### Hero purchase panel

Left-aligned product title and gradient slogan over a broad dark media field, followed by pricing copy and a rounded blue Buy action.

### Highlights cards

Feature content within a #1d1d1f section, mixing media, compact text, links, and selectively rounded card surfaces.

### Product exploration controls

A dense interactive exploration area with model imagery, option labels, selectors, and compact action controls on a charcoal band.

### Chip-story statement

Large, sparse chip-family messaging on black, with selected words or lines treated using cool gradients.

### Feature media-and-copy block

Technical product imagery or video paired with concise explanatory copy in a restrained dark layout.

### Purchase CTA

A pill-shaped Apple-blue button with white SF Pro Text label; preserve its prominence and avoid adding decorative shadow.

### Measured component styles

- **Primary button** (“Buy MacBook Pro”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Link** (“10”): transparent background · text #ffffff · radius 0px · padding 0px · 600 28px SF Pro Display
- **Card** (“AI apps on Mac. Born to run. Mac is opti”): background #1d1d1f · text #f5f5f7 · 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

- Keep black as the dominant page canvas.
- Use charcoal bands to mark distinct content chapters.
- Pair oversized display headlines with restrained supporting copy.
- Reserve Apple Blue for actions and clear link emphasis.
- Use cool gradients selectively on highlighted product messaging.
- Let product media occupy broad, uncluttered fields.

## Don't

- Do not introduce bright section backgrounds.
- Do not turn gradient accents into general-purpose fills.
- Do not add heavy shadows or ornamental borders.
- Do not crowd the hero with dense explanatory copy.
- Do not use multiple competing CTA colors.
- Do not place decorative UI over product imagery without purpose.

## Agent prompt

Build a product-focused page using Apple’s restrained dark editorial system. Make Deep Stage (#000000) the dominant canvas, with Graphite Panel (#1d1d1f) reserved for clear section bands or feature cards. Use large, compact SF Pro Display-style headlines and SF Pro Text-style navigation, captions, and controls; Inter and Roboto are free substitutes. Set primary copy in Pure Light (#ffffff) or Soft Porcelain (#f5f5f7), with Quiet Silver (#86868b) for secondary text. Apply Apple Blue (#0071e3) to the primary purchase action and keep gradients limited to product-specific statements, using the measured cool accent palette. Build spacious, left-led chapters around full-bleed product imagery, alternating with compact modular feature groups. Keep the interface flat, use measured rounded treatments, and avoid ornamental borders or shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero with product media and a low-left text and purchase group. | product introduction, purchase action | oversized gradient headline, blue pill button, cinematic media |
| 2 | feature-grid | Full-bleed charcoal section with a heading and multiple media-led feature columns. | feature discovery, watch film, learn more links | charcoal band, media cards, white headings |
| 3 | product-showcase | Full-width charcoal exploration area with multiple product views and option controls. | inspect product, select size and color, explore features | interactive selectors, product imagery, compact controls |
| 4 | other | Sparse black chapter with a centered, gradient-treated chip-family statement. | introduce chip range | large gradient text, expansive negative space |
| 5 | feature-split | Dark two-column feature story pairing technical media with explanatory copy. | explain performance, support with product evidence | media and copy pairing, low-contrast caption |
| 6 | comparison | Long single-column black section for the three-chip family, with comparison content and controls. | compare chip tiers, select a chip | minimal selector, large headline, dark product storytelling |
| 7 | feature-grid | Single-column black section with a left-aligned heading and short explanatory introduction. | introduce AI capabilities | large section title, high-contrast copy |
| 8 | feature-split | Two-column black feature layout with application media and paired copy blocks. | show app use cases, explain supported workflows | media-led cards, paired headlines, dark rounded surfaces |
| 9 | feature-split | Single-column black section with a headline, supporting copy, and links alongside media. | introduce Apple Intelligence, learn more | prominent heading, inline links, supporting 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);
--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-macbook-pro