Apple (España)

近白色基底、胶囊形控件与圆角卡片。
页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括胶囊形控件、圆角卡片、宽松留白、扁平表面。适合参考的场景:商品详情页、品牌产品介绍页。
查看原始网站使用规范
建议采用
- 任何展示字号的标题都使用 SF Pro Display 字重 600,绝不超过 600。克制本身就是权威感。
- 标题中的单个词使用 #03aa49、#0066cc、#8668ff、#ed6300 或 #00a1b3 着色,其余文字保持 #1d1d1f。
- 唯一的主要操作使用 #0071e3 填充、980px 圆角的胶囊按钮。不要将这种蓝色用于文字、边框或非按钮表面。
- 标题在左对齐的内容列中保持左对齐,不要让展示文字居中。
- 卡片使用 28px 圆角,按钮使用 980px 的完整胶囊圆角。这两种尺度承担全部形态语言。
- 每个彩色按钮旁都搭配一个 #1d1d1f 文字标签,例如价格或引导语,让蓝色胶囊始终成为唯一的注意焦点。
- 让产品摄影填满卡片。图注放在卡片边缘的窄列中,而不是叠加在图像上。
建议避免
- 不要引入 box-shadows、发光或投影。悬浮感只来自表面对比与 1px 细线。
- 彩色强调色,包括绿色、紫罗兰色、橙色和蓝绿色,不要用于背景、按钮或大面积填充。它们只用于单词着色。
- 不要使用 #0000ee 或任何未设置样式的浏览器默认链接色。始终使用 #0066cc,并配有 1px 下划线。
- 正文不要大于 20px 或小于 14px;17px 是唯一的段落字号。
- 圆角值只能使用 10px、28px、32px、36px 或 980px。这些是系统中仅有的圆角尺度。
- 首屏标题或价格与 CTA 组合不要居中。左对齐是结构原则,而非风格选择。
- 文字、按钮或卡片不要使用渐变。渐变仅保留给可能的未来装饰用途,目前不是产品表面的设计模式。