Obscura 网站预览
Obscura 网站预览

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。它们应始终像天空装饰,而不是功能插画。