Visual 网站预览
Visual 网站预览

Visual

近白色基底、等宽文字标注与圆角卡片。

页面以近白色为基底,搭配近黑色文字。字体采用 Mono (custom — clean geometric monospace)。视觉特点包括等宽文字标注、圆角卡片、细线分隔、扁平表面。适合参考的场景:AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 所有首屏和区块标题均使用衬线字体(64–96px,字重300)——在海报尺寸下纤细的笔画是其标志性特征
  • 页面背景设为#f6f6f4,卡片表面设为#ffffff——温暖的奶油色不可更改,禁止使用纯白色#ffffff作为页面底色
  • 将中性填充按钮(#2c2c26填充,#ffffff文字)与透明描边按钮(1px #000000边框)配对呈现——二者始终以8px间距作为2个按钮的组合出现
  • 所有UI文字、导航、按钮及正文使用12–16px等宽字体,字间距设为-0.067em,营造出终端/代码边距的质感
  • 各区块之间以80px垂直间距分隔,不使用边框或背景色变化——空白区域即为结构
  • 将#fff347作为装饰性强调,以2–4px笔画或小面积填充块(最大宽度约120px)呈现,禁止作为大面积填充或背景使用
  • 卡片使用8px圆角,按钮、标签和导航元素使用3px圆角——圆角对比是刻意设计

建议避免

  • 禁止使用纯白色#ffffff作为页面背景——页面背景始终为#f6f6f4,以保持温暖奶油基调
  • 禁止为卡片或按钮添加阴影——系统刻意保持扁平,分离感来自1px边框和色彩对比
  • 避免在正文尺寸(16px或更小)使用衬线字体——该字体仅用于展示;正文必须使用等宽字体
  • 禁止将#fff347用于文字、大背景或填充按钮——它仅为装饰性强调,非操作性色彩
  • 禁止使用冷色调(蓝色或真正中性灰)——整个色彩系统为暖调:橄榄绿调、温暖黑色(#2c2c26而非#000000用于表面)和奶油白
  • 禁止使用渐变——系统仅使用单色,唯一例外是3D首屏渲染内部包含其自身的渐变
  • 单屏中#fff347的使用次数不得超过4次——若超过3–4次,该强调效果将减弱