Obsidian 网站预览
Obsidian 网站预览

Obsidian

近黑色基底、细线高光与圆角卡片。

页面以近黑色为基底,搭配近白色文字。局部操作控件以紫色强调。字体采用 系统无衬线字体。视觉特点包括细线高光、圆角卡片。适合参考的场景:产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 所有文本均使用系统UI字体,以保持原生应用的质感。
  • 仅将紫晶色(#7c3aed)和薰衣草色(#a78bfa)用于按钮和链接等交互元素。
  • 为深色卡片和按钮添加细微的1px内嵌白色高光,以增强定义。
  • 在近黑色背景(#171717)上保持高对比度,使用浅灰文字(#eeeeee)。
  • 仅对标签和徽章使用圆形圆角(9999px);其他元素保持锐利。
  • 保持布局居中且宽敞,各区块之间保持充足的垂直节奏。

建议避免

  • 不要使用传统阴影来实现层级感;优先采用内嵌高光效果。
  • 不要在主要UI中引入其他饱和色;坚持使用紫色搭配深色的主色调。
  • 不要使用装饰性或衬线字体;品牌调性是实用主义的。
  • 不要使用明亮或浅色主题背景用于主要内容区域。
  • 不要在卡片或按钮上使用大圆角;保持在8-12px范围内。
  • 不要使用生活方式类摄影;视觉焦点应放在产品UI本身。