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

# Apple — MacBook Neo · Design System

> Quiet surfaces, bold type, color-forward product storytelling.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.apple.com/macbook-neo/ · **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 product launch page pairs soft neutral backgrounds with bold headlines and vivid MacBook color imagery. Editorial pacing, cinematic media, and restrained blue links keep the product at the center.

## North star

Keep the interface quiet and spacious so oversized product imagery and concise, high-contrast headlines carry the story.

## Overview

The visual system is built on a quiet alternation between white and very light cool gray, with near-black typography providing strong contrast. Blue is reserved for shopping and text links rather than broad decoration, while black appears in compact purchase controls and occasional inverse areas. SF Pro Display gives headlines a confident, tightly tracked editorial presence; SF Pro Text handles navigation, body copy, captions, and controls. The page uses centered hero messaging, broad section bands, and wide product media, then shifts into feature stories and closer-look controls. Spacious vertical pacing lets each image or headline read as a distinct moment. Product imagery supplies the page’s expressive colors—citrus yellow, blush, silver, and indigo—without turning those photographic tones into interface colors. Rounded purchase buttons and softly rounded media frames are the main departures from the otherwise flat, precise interface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Apple Ink | `#1d1d1f` | `--color-apple-ink` | brand | Primary headings, body text, navigation, and the dark purchase button. |
| Soft Fog | `#f5f5f7` | `--color-soft-fog` | surface | Cool light-gray canvas for the hero and alternating full-width feature bands. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the white sections separating gray product-story bands. |
| True Black | `#000000` | `--color-true-black` | neutral | Inverse navigation and dark surface details; use sparingly outside the global navigation. |
| Action Blue | `#0071e3` | `--color-action-blue` | accent | Primary blue purchase button with white text. |
| Link Blue | `#0066cc` | `--color-link-blue` | accent | Shopping and inline links against white or gray backgrounds. |
| Quiet Gray | `#ebebeb` | `--color-quiet-gray` | neutral | Minor subdued text or interface details; not a defining section background. |
| Indigo Signal | `#2535e0` | `--color-indigo-signal` | semantic | Small accent text or color detail; not a dominant interface surface. |
| Graphite Detail | `#313131` | `--color-graphite-detail` | neutral | Secondary dark navigation detail rather than a primary page color. |
| Warm Charcoal | `#232320` | `--color-warm-charcoal` | semantic | Subtle dark gradient transition within decorative content, not a general-purpose surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f7` (Soft Fog) · `--color-surface-2` → `#000000` (True Black) · `--color-text` → `#1d1d1f` (Apple Ink) · `--color-border` → `#1d1d1f` (Apple Ink) · `--color-accent` → `#0071e3` (Action Blue) · `--color-accent-2` → `#0066cc` (Link Blue) · `--color-accent-3` → `#2535e0` (Indigo Signal) · `--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 |
| `#1d1d1f` | `#000000` | 1.25:1 | fail |
| `#0071e3` | `#ffffff` | 4.7:1 | AA |
| `#0071e3` | `#f5f5f7` | 4.31:1 | AA-large |
| `#0071e3` | `#000000` | 4.47:1 | AA-large |

### Gradients

- `linear-gradient(rgb(29, 29, 31) 20%, rgb(30, 31, 31) 21.44%, rgb(35, 35, 32) 22.88%, rgb(43, 43, 34) 24.31%, rgb(54, 55, 37) 25.75%, rgb(68, 70, 41) 27.19%, rgb(86, 88, 45) 28.63%, rgb(105, 108, 50) 30.06%, rgb(126, 130,`
- `linear-gradient(184deg, rgb(29, 29, 31) 20%, rgb(30, 30, 33) 21.44%, rgb(33, 35, 38) 22.88%, rgb(39, 42, 47) 24.31%, rgb(47, 53, 59) 25.75%, rgb(57, 66, 76) 27.19%, rgb(70, 82, 95) 28.63%, rgb(84, 101, 118) 30.06%, rgb(9`
- `linear-gradient(184deg, rgb(29, 29, 31) 0%, rgb(49, 50, 36) 2.08%, rgb(68, 69, 41) 4.17%, rgb(85, 88, 45) 6.25%, rgb(102, 105, 49) 8.33%, rgb(119, 122, 53) 10.42%, rgb(134, 138, 57) 12.5%, rgb(148, 153, 61) 14.58%, rgb(1`
- `linear-gradient(184deg, rgb(29, 29, 31) 0%, rgb(29, 29, 31) 0.31%, rgb(29, 29, 31) 0.63%, rgb(29, 29, 31) 0.94%, rgb(29, 29, 31) 1.25%, rgb(29, 29, 31) 1.56%, rgb(29, 29, 31) 1.88%, rgb(29, 29, 31) 2.19%, rgb(29, 29, 31)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Display | `--font-display` | webfont | 600, 700 | Display headlines and prominent editorial titles. | Inter |
| SF Pro Text | `--font-body` | webfont | 400, 600 | Navigation, body copy, captions, buttons, and supporting interface text. | Inter |

- **SF Pro Display:** Use bold or semibold display weights; headlines are large, compact, and slightly negatively tracked.
- **SF Pro Text:** Use regular and semibold weights; keep interface text compact and avoid all-caps styling.

### 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 hero or campaign display headline. |
| h1 | 80px | 700 | 1.05 | -0.015em | — | SF Pro Display | Primary product-launch headline. |
| h2 | 56px | 700 | 1.07 | -0.005em | — | SF Pro Display | Major section headline, such as performance. |
| h3 | 48px | 600 | 1.08 | -0.003em | — | SF Pro Display | Feature-story headline and prominent secondary title. |
| h4 | 40px | 600 | 1.2 | 0 | — | SF Pro Display | Smaller feature or sub-section heading. |
| body | 17px | 600 | 1.24 | -0.022em | — | SF Pro Text | Emphasized introductory and feature-story copy. |
| caption | 14px | 600 | 1.43 | -0.016em | — | SF Pro Text | Media captions and supporting product details. |
| button | 12px | 400 | 1.33 | -0.01em | — | SF Pro Text | Compact purchase and action button labels. |
| nav | 12px | 400 | 1 | -0.01em | — | SF Pro Text | Global navigation labels. |
| link | 28px | 600 | 1.14 | 0.007em | — | SF Pro Display | Prominent editorial text links. |

OpenType features in use: `"numr"`.

## Spacing & layout

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

Use a centered, spacious composition with a measured page max width of 1260px. Alternate full-width #f5f5f7 and white section bands, placing large media across the available width. Center the hero title and purchase information; use left-aligned section headings and varied split or multi-column feature layouts below. The measured spacing scale is generous, with a 144px section gap and 20px element gap. Keep content density low, give product imagery room to breathe, and use the measured 4px base spacing system rather than adding arbitrary dimensions.

## Shape & elevation

- Radius: button `50%` · 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 page is predominantly flat: section bands, typography, and imagery provide hierarchy instead of card shadows. Use only the measured subtle inset shadow where relevant. Media may have softly rounded framing, while controls use pill-shaped corners; avoid heavy borders, layered panels, or pronounced drop shadows.

## Imagery

Make high-quality product photography and video the main visual event: close crops, floating devices, color reveals, and lifestyle scenes. Images are broad and often full bleed, with their color variation coming from the MacBook finishes and environments rather than interface decoration. Use clean lighting and restrained backgrounds, and allow media to dominate feature sections without adding ornamental overlays.

## Components

### Global navigation

Compact, centered Apple navigation with small SF Pro Text labels, restrained dark text, and search and bag icons.

### Announcement strip

A narrow white message row below navigation with centered pricing copy and a blue Shop link.

### Hero purchase block

Centered product name, bold oversized launch headline, dark pill Buy control, and concise price or monthly-payment line.

### Blue purchase CTA

Use #0071e3 with white SF Pro Text and a fully rounded pill silhouette for the product purchase action.

### Editorial feature media

Wide image or video paired with concise feature copy; alternate white and #f5f5f7 section backgrounds.

### Closer-look selector

Feature categories sit beside a large product view, with compact controls for exploring colors and hardware details.

### Measured component styles

- **Primary button** (“Buy MacBook Neo”): background #0071e3 · text #ffffff · border 1px solid · radius 980px · padding 3px 10px · 400 12px SF Pro Text
- **Secondary button** (“colors and design”): background #777779 · text #0066cc · radius 10px · padding 0px · 400 17px SF Pro Text
- **Link** (“Shop”): transparent background · text #0066cc · radius 0px · padding 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 #1d1d1f for primary text and headlines.
- Alternate white and #f5f5f7 section backgrounds.
- Let product photography carry the product colors.
- Keep the hero message centered and concise.
- Use blue for links and purchase actions only.
- Preserve generous vertical breathing room.

## Don't

- Do not add unmeasured palette colors.
- Do not use product-photo colors as interface fills.
- Do not crowd sections with dense card grids.
- Do not add heavy shadows or decorative borders.
- Do not turn links into oversized colorful buttons.
- Do not apply all-caps styling to the navigation.

## Agent prompt

Build a new product-story page in Apple’s MacBook Neo visual style. Use Gallery White (#ffffff) and Soft Fog (#f5f5f7) for quiet alternating section bands, with Apple Ink (#1d1d1f) headlines and copy. Set prominent titles in a bold, tightly tracked SF Pro Display-like face and supporting interface text in a clean SF Pro Text-like sans serif. Center the opening product message and pill-shaped dark purchase control; reserve Action Blue (#0071e3) for the primary buy action and Link Blue (#0066cc) for inline links. Give full-width product photography and video generous room, and let the photographed product provide the vivid color. Keep the measured wide content frame, spacious section rhythm, flat surfaces, and minimal shadows. Use restrained controls, clear alignment changes between centered hero and editorial feature layouts, and no invented colors or decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and purchase details above large product media on a light-gray band. | Buy action, Price disclosure | Oversized bold headline, Dark pill button, Light-gray canvas |
| 2 | gallery | Left-aligned section title followed by a wide, horizontally organized media gallery. | Feature browsing, Color discovery | White background, Full-bleed media, Compact category links |
| 3 | video | Full-width cinematic product film on a light-gray section band. | Play film | Full-bleed video, Gray canvas |
| 4 | product-showcase | Section heading above a large product view with a compact feature selector alongside. | Explore product details, Select feature | Product visualization, Compact selector, White heading band |
| 5 | feature-split | Centered performance headline and explanatory copy followed by a product-led visual. | Feature explanation | Large display heading, Centered copy, Product imagery |
| 6 | feature-split | Two-column lifestyle image and supporting battery-life message on white. | Read battery details | Lifestyle photography, Split text and image, Emphasized metric |
| 7 | feature-grid | Centered section heading above a multi-column, full-width media and feature layout. | Browse feature benefits | White background, Wide media, Centered heading |

## 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-macbook-neo