Lens

白色基底、胶囊形控件与紧密字距。
页面以白色为基底,搭配深灰色文字。局部操作控件以青绿色强调。字体采用 Saans、Inter。视觉特点包括胶囊形控件、紧密字距、网格布局、细线分隔。适合参考的场景:区块链项目介绍页、生态网站首页。
查看原始网站使用规范
建议采用
- 仅将 #00caa0 用于每个页面的单一主要操作(主要操作)——绝不可作为装饰性强调、图标填充或文字颜色使用。
- 所有按钮默认设置为 50px 的边框圆角,所有卡片默认为 16px 的边框圆角;胶囊形 与方形之间的对比是系统最显著的视觉信号。
- 将 Saans(展示用)与 Inter(正文)搭配使用——切记不要在标题大于 20px 时使用 Inter,也不要将 Saans 用于小于 18px 的正文内容。
- 仅将四种淡色调用于功能卡片背景,禁止将其应用于按钮、文字或页面背景。
- 使用 1px 虚线 #afafaf 分割内容区块——不可使用实线,也不可仅靠额外空白来分隔。
- 保持页面背景为纯白色 #ffffff,所有文字使用 Graphite(#2c2d30)作为主要字体,禁止引入新的深色背景表面。
- 全局启用 Saans ss01 和 Inter cv11 字体特性;两种字体都针对这些替代字形进行了调整,缺少它们会显得普通。
建议避免
- 切勿将 青色 #00caa0 用于边框、图标或悬停状态——它唯一的用途是作为填充按钮的背景色。
- 切勿在边框之外增加阴影(box-shadow)——系统仅存在 1px 边框阴影(`rgba(0,0,0,0.05) 0 0 0 1px`),系统没有层级感,只有细线分隔。
- 切勿使用方形按钮或尖角卡片——胶囊形语言是系统标志性特征,任何小于 16px 的圆角均被视为系统断裂。
- 切勿引入除四种淡色调之外的额外强调色(如紫色、橙色等)——系统整体为 99% 无彩色。
- 切勿对长段落正文进行居中对齐;系统所有低于首屏标题的内容均采用左对齐的堆叠文本。
- 切勿在 Inter 字体上使用正字间距(正字间距);负字间距是其核心特征,松散字间距会削弱字体的结构感。
- 切勿将卡片直接置于有颜色的区块背景上,而没有白色表面层——淡色调仅用于卡片,从不用于页面级背景。