Apple — AirPods Pro 3

页面以克制的中性色、醒目的大字和沉浸式视频，讲述 AirPods Pro 3 的产品故事。浅灰与白色区块交替铺陈，让节奏保持简洁，产品及人物影像则带来视觉张力。

North star · Keep the interface quiet and neutral so oversized type and cinematic product imagery carry the story.

The page builds its identity from a near-white foundation: #f5f5f7 creates the opening canvas and selected feature bands, while #ffffff gives long-form product sections a clean reset. Headings and primary copy use deep #1d1d1f; muted grays carry secondary descriptions and utility text. Blue is reserved for actionable links and purchase buttons rather than broad decoration. SF Pro Display gives headlines a bold, tightly tracked editorial presence, while SF Pro Text handles navigation, body copy, and controls. The layout alternates expansive full-bleed media with centered copy, feature cards, and product-focused panels. Generous vertical pauses make each feature feel like a new chapter. High-contrast, carefully art-directed video and photography provide most of the color and emotional movement; the interface itself remains quiet, flat, and precise.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

字体

字号阶梯：Augmented Fourth（比例约 1.414，正文 17px）。示例用免费替代字体渲染，数值为实测。

间距与布局

基准单位 4px · 密度：宽松

Use a broad centered content frame with the measured 1260px page maximum, while allowing campaign media to run full bleed. The measured grid ranges from single-column editorial sections to four-column feature areas and two-column copy blocks. Alternate white and #f5f5f7 bands to establish chapter boundaries. Center major story introductions; align feature headings and detail copy to the start of their grids. Preserve the measured spacious rhythm, including the large section gap, and avoid crowding the media with interface elements.

圆角与层次

The page is predominantly flat: rely on alternating surface colors and full-bleed media rather than raised cards. Measured card outlines are dark and restrained; avoid adding pervasive borders or shadows. The button is a bright blue pill with a clean white label and no measured shadow.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

Imagery · Lead with full-bleed campaign video and high-resolution product imagery, then mix in lifestyle scenes, close-up acoustic details, and large isolated product views. Use strong silhouette contrast against bright, pale environments. Keep imagery carefully art-directed and spacious, with occasional prismatic color appearing as part of the campaign visuals rather than as interface decoration.

页面版块

共 10 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏产品主视觉

Full-bleed campaign media with product statement and purchase controls near the lower edge.

功能网格核心亮点

Single-column white section with a heading, compact feature links, and highlight media.

产品展示产品细节

Pale full-bleed product stage with selectable feature list and large product imagery.

视频沉浸式视频

Full-bleed video section with minimal interface.

数据亮点降噪表现

White two-column editorial block with explanatory copy and paired numeric comparisons.

功能网格音频功能

Multi-column card sequence with image-led features and short descriptions.

其他声音科技

Centered heading and supporting copy on a pale-gray band.

产品展示音质展示

Full-width pale media stage with a large isolated product visual.

图文交替个性化聆听

Long-form immersive visual story with centered introduction and lower feature details.

其他心率感应

Centered fitness introduction on a pale-gray band.

该做与不该做

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。