Apple (España)

近白色基底、大幅摄影展示与圆角卡片。
页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括大幅摄影展示、圆角卡片、紧密字距、宽松留白。适合参考的场景:商品详情页、品牌产品介绍页。
查看原始网站使用规范
建议采用
- 每个区块背景都设为 #f5f5f7,每张卡片表面都设为 #ffffff。这是唯一使用的悬浮层次系统。
- 每个区块标题都以句号结尾,例如 'Lo principal.'(主要特点。)、'Más de cerca.'(近距离看。)。句末句号是标志性的编辑手法。
- 区块开篇标题使用 SF Pro Display,字号为 48-56px,字重为 600,字间距为 -0.005em。
- 每张卡片、折叠胶囊和标签都使用 28px 圆角;980px 只用于真正的胶囊形按钮。
- 价格属于行动号召时,每个 CTA 蓝色 #0071e3 都搭配一个白色价格标签,文字采用 #333336、60%。
- 眉题标签采用 'PRODUCT ICON + ALL-CAPS 12px/600' 的形式,即产品图标加全大写文字,直接位于首屏标题上方,间距为 3px。
- 正文每行只保留一个 17px 的句子。系统通过编辑删减营造视觉安静,而非追求信息密度。
建议避免
- 绝不将 #0066cc 用作按钮填充。它只属于链接和下划线;按钮使用 #0071e3。
- 绝不给卡片或按钮添加投影。与 #f5f5f7 的色调对比是唯一的纵深信号。
- 正文绝不小于 14px 或大于 21px。17px 正文与 14px 次要文字的分工是固定的。
- 正文绝不使用 #000000,而应使用 #1d1d1f。纯黑只留给首屏叠加内容和白底图标填充。
- 绝不引入活动圆环配色之外的彩色强调,即绿色、橙色、紫罗兰色和蓝绿色。这些颜色只用于装饰,绝不用作 CTA。
- 标题绝不能省略句末句号,也不能使用问号。系统使用陈述语气,而非疑问语气。
- 任何容器的圆角都不应小于 10px 或大于 28px;28px 圆角是所有元素的下限。