Clutch Security

白色基底、细线分隔与宽松留白。
页面以白色为基底。字体采用 PP Radio Grotesk、Inter。视觉特点包括细线分隔、宽松留白、分屏构图、居中构图。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 所有 26px 及以上的展示文字和标题都使用 PP Radio Grotesk,在这些字号下绝不替换为系统字体。
- 采用混合字重标题技术:1-2 个关键词使用字重 600,辅助词使用 400,全部为 Obsidian。
- Electric Cobalt #004dff 每页作为单次使用的强调,一个 CTA、一处高亮,随后退回单色。
- 所有卡片和容器边缘都使用 1px 的 Slate Mist #e5e7eb 或 Pewter #dfdfdf 边框,绝不使用粗重的 2px+。
- 区块间距设为 80px,让元素呼吸,并克制将区块挤紧的冲动。
- 卡片、按钮和输入框统一使用 6px 圆角。这就是系统的角部语言。
- 类别标签和区块眉题使用全大写 PP Radio Grotesk,字号为 10-12px,字间距为 0.12-0.16em。
建议避免
- 不要将整个标题加粗。始终在句中混合字重 400 和 600 来创造节奏。
- 不要使用多种强调色。如果 Electric Cobalt 已在按钮上,附近就不要添加 Periwinkle 填充。
- 除唯一的 6px 偏移、16% 不透明度模式外,不要使用其他投影。系统有意保持平面。
- 界面元素圆角不要超过 6px。80px 只留给 3D 插画元素。
- 正文或长描述不要居中。只有展示标题和短 CTA 可以居中。
- 不要引入新字体。展示使用 PP Radio Grotesk,界面使用 Inter,不需要其他字体。
- 不要使用满幅深色区块。系统保持 Canvas-white,只有按钮填充可以采用 Obsidian。