North star · Keep the interface nearly invisible so oversized product imagery and crisp, restrained type carry the story.
The page uses pure black as its dominant canvas, giving full-bleed product renders and video room to command attention. Charcoal bands distinguish selected moments, especially the highlights and design sections, without breaking the continuous dark experience. Bright near-white headlines sit against muted gray supporting copy; Apple blue appears sparingly on links and the rounded Buy CTA. SF Pro Display carries large, tightly tracked headlines, while SF Pro Text handles navigation, body copy, captions, and controls. The layout alternates expansive centered storytelling with carefully aligned product and feature compositions. Oversized imagery, close-up camera details, and cinematic video make the hardware the primary visual voice. Generous vertical pauses separate feature chapters, while cards and controls stay restrained: rounded media frames, dark surfaces, and thin borders rather than decorative shadows. Burgundy product photography supplies the strongest non-interface color.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Stage Black表层 · Charcoal Band主文字 · Headline White次要文字 · Soft Graphite弱文字 · Muted Slate描边 · Quiet Divider强调 · Apple Blue强调 2 · Link Blue
Navigation, body copy, captions, buttons, links, and compact interface labels.
Aa 设计
SF Pro Display
网络字体 · 字重 600 / 500 · 占比 34%
免费替代：Inter
Large display headlines and section titles.
角色
示例
字号
字重
行高
字距
特大标题
Oversized campaign headline and major product statement.
Apple
96px
600
1.04
-0.015em
一级标题
Primary section headlines, such as the highlights and feature introductions.
Apple
64px
600
1.06
-0.009em
二级标题
Secondary feature titles and large editorial statements.
Apple
48px
600
1.08
-0.003em
三级标题
Compact feature headings and prominent product claims.
Apple
28px
600
1
0.007em
四级标题
Supporting feature headings and smaller subsection titles.
The quick brown fox 敏捷的狐狸
21px
600
1.38
0.011em
正文
Emphasized body copy and key product descriptions.
The quick brown fox 敏捷的狐狸
17px
600
1.24
-0.022em
辅助文字
Small captions, footnotes, labels, and media annotations.
The quick brown fox 敏捷的狐狸
12px
600
1.33
-0.01em
按钮
Purchase and interactive control labels.
The quick brown fox 敏捷的狐狸
17px
500
1.47
-0.022em
导航
Global navigation labels.
The quick brown fox 敏捷的狐狸
12px
400
1
-0.01em
链接
Compact Learn more and inline navigation links.
The quick brown fox 敏捷的狐狸
12px
600
1.33
-0.01em
间距与布局
基准单位 4px · 密度：宽松
144px版块间距
48px元素间距
6px卡片内边距
1260px内容最大宽度
2px
4px
6px
7px
8px
10px
12px
14px
15px
16px
20px
24px
28px
32px
48px
64px
A measured maximum content width of 1260px supports broad media and carefully composed feature layouts. The page moves between full-bleed imagery, centered editorial statements, and split or multicolumn product details; individual sections use differing column counts rather than one fixed grid. Heading alignment shifts with the story, from left-aligned introductions to centered feature claims. Section spacing is spacious, with long vertical pauses between chapters and tighter groupings within cards, controls, and specifications.
圆角与层次
按钮 · 9999px
输入框 · 9999px
卡片 · 28px
导航 · 20px
inset · other
hairline · nav
hairline · button
The visual system is mostly flat, relying on alternating dark section surfaces and media layering rather than prominent shadows. Hairline borders define selected cards, controls, and navigation elements; dark outlines remain intentionally subtle. Rounded pills mark actions and compact controls, while large product imagery supplies depth through lighting, reflections, and overlap.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Global navigation
Compact horizontal navigation over a black backdrop, with subdued labels and utility icons.
Announcement strip
A charcoal horizontal band with centered small copy and a blue inline link.
Purchase pill
Rounded dark pricing container paired with a bright blue Buy button and white label.
Feature media card
Large product or video image framed by a dark section; selected cards use rounded corners.
Inline link
Small semibold blue Learn more or feature link, kept visually light.
Specification rows
Minimal technical details separated by thin gray hairlines and supported by muted captions.
Pill controls
Compact rounded selectors or feature controls with restrained borders and high-contrast labels.
Imagery · Product renders and cinematic video dominate: close camera details, side profiles, and full-device views are framed against near-black backgrounds. Feature imagery ranges from full-bleed hero compositions to rounded media panels and paired editorial cards. The hardware’s burgundy finish provides a warm visual counterpoint; other saturated colors mostly belong to video scenes, not the interface palette.
Alternate charcoal bands only where they clarify section changes.
Give product imagery room to dominate the composition.
Use near-white for headlines and gray for supporting copy.
Reserve blue for links, focus, and purchase actions.
Keep feature storytelling spacious and editorial.
Use hairlines and rounded controls sparingly.
✕ 不该做
Do not add gradients to the interface.
Do not use bright colors as broad section backgrounds.
Do not crowd the page with decorative cards.
Do not give every section the same grid or alignment.
Do not make supporting copy compete with headlines.
Do not use heavy shadows as the primary source of depth.
Do not mistake colors inside cinematic footage for brand UI colors.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new product page in Apple’s restrained, cinematic launch style. Use Stage Black (#000000) as the main canvas and Charcoal Band (#1d1d1f) for occasional section breaks. Set headlines in a close SF Pro Display-like sans serif, with SF Pro Text-like body and interface copy; use Headline White (#f5f5f7) for primary text and Soft Graphite (#86868b) or Muted Slate (#6e6e73) for supporting detail. Keep Apple Blue (#0071e3) and Link Blue (#2997ff) limited to actions and links. Center the story on large, high-quality product renders or video, alternating full-bleed compositions with compact technical details. Preserve generous chapter spacing, thin understated borders, and rounded pill controls. Avoid decorative gradients and heavy elevation.
