Obscura

浅蓝色基底、细线分隔与居中构图。
页面以浅蓝色为基底,搭配深蓝色文字。局部操作控件以橙色强调。字体采用 Jersey 10、Manrope Variable。视觉特点包括细线分隔、居中构图、网格布局、单栏阅读排版。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 每个 36px 及以上的展示标题都使用 Jersey 10。它是品牌声音,也是让页面迅速被认作 Obscura 的方式。
- CTA 配色严格受控:每屏只保留一处 Signal Orange #ff5e24 填充,不使用其他 CTA 强调色。
- 让 Cloud Mist #e3f1fe 画布承担氛围,将其用于满幅页面背景,而不只是卡片填充。
- 有意搭配两种展示行高:多行首屏使用 0.80-0.85,让像素字体紧密叠放;需要呼吸空间的单行区块标题使用 1.11。
- 按钮、导航胶囊和标签等所有交互元素都使用 6px 圆角;12px+ 留给卡片和应用模型。角部柔和程度的对比是系统的一部分。
- 每页在角落放置 1-2 个漂移的像素云精灵。缺少它们,页面就会失去街机个性。
- 橙色环形内阴影只用于激活导航状态和获得焦点的主要按钮,在不改变颜色的情况下传达交互。
建议避免
- 正文、按钮标签、导航链接或任何小于 36px 的界面文案,都不要使用 Jersey 10,否则像素网格会难以阅读。
- 不要引入第二种品牌色。带蓝色调的表面 #e3f1fe 属于氛围,而非彩色强调,它们不是“蓝色强调色”。
- Signal Orange 不要用于大型背景填充。橙色只承担按钮、强调词、激活状态和边框等小型标点。
- 文字不要使用纯黑 #000000。Graphite Ink #232629 的冷底调,才让奶油表面不显得死板。
- 不要叠加悬浮效果。卡片恰好只使用一种阴影模式,添加第二个外环或发光会破坏柔和纸张感。
- 功能卡片不要使用锐利的 0px 角。任何面板表面都至少采用 12-16px 圆角。
- 像素云精灵不要居中、放在文字背后或大于约 120px。它们应始终像天空装饰,而不是功能插画。