Slab

明暗对比、衬线字形与宽松留白。
页面兼有浅色与深色区域。字体采用 Sentinel、Whitney。视觉特点包括衬线字形、宽松留白、分屏构图、摄影展示。适合参考的场景:效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 所有编辑式标题采用Sentinel 300、42-53px和-0.8至-5px letter-spacing;展示字号绝不要替换为无衬线。
- #ff4143(Coral Ember)严格只用于每个表面的一个主要操作,其余保持中性。
- 所有输入框、按钮、徽章和卡片都采用6px border-radius,绝不超过此值。
- 每个功能分区都配一个装饰粉彩圆形,让它越过模型卡片边缘。
- 正文设为Whitney 400、18px和1.67行高;连续正文绝不要低于16px。
- 所有标题上方的分区眉题都采用Whitney 500、12px小型大写,以及0.167em字间距。
- 酒红首屏是每页唯一的深色横带,后续分区必须回到白色画布。
建议避免
- 正文、导航或UI附属元素不要使用Sentinel,它只用于展示。
- 卡片、输入框或按钮不要采用投影;系统刻意保持平面。
- 不要引入Coral Ember和Google Signal Blue之外的新彩色强调。
- 浅色表面上的文字不要采用纯#000000,使用Graphite #11110f或Slate Ink #455360。
- 页面max-width不要超过1200px,也不要打破两列编辑式行布局。
- 图标不要采用实色填充,保持Slate Ink的1.5-2px单线描边。
- 每个模型图不要添加超过一个装饰粉彩圆形;克制就是要点。