Micro 网站预览
Micro 网站预览

Micro

近白色基底、渐变展示与大字排版。

页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 perfectlyNineties、haffer。视觉特点包括渐变展示、大字排版、扁平表面、居中构图。适合参考的场景:效率工具官网、协作产品介绍页。

查看原始网站

使用规范

建议采用

  • 仅在首屏使用蓝色到青绿色渐变;它是系统中唯一的饱和视口,定义了品牌开场
  • 首屏与区块标题使用 perfectlyNineties 字体,字号范围 30-72px,字间距为 0.02em 正向间距——开放的字间距是其标志性特征
  • 正文与产品界面使用 haffer 字体,而非展示字体——编辑性与中性之间的对比是排版的核心身份
  • 按钮、输入框和导航使用 8px 圆角;产品行使用 14px;特性模块和图表节点使用 18px——禁止随意混用
  • 保持产品界面为 #ffffff,搭配 1px 边框和微妙的双层阴影——绝不使用厚重的抬升效果
  • 在营销特性模块中使用柔和色渲染(#cbfbf1、#f8ebd8、#ede9fe、#cff2ef);画布保持默认 #f5f5f5
  • 图标按类别使用青色脉冲、珊瑚标记、琥珀标记、洋紫兰标记和天蓝色操作——禁止图标集合单色化

建议避免

  • 禁止将渐变天空应用在页面任何其他位置——重复使用会削弱开场冲击力
  • 禁止在正文、按钮、导航或产品界面中使用 perfectlyNineties——它仅用于展示,小字号下会显得臃肿
  • 禁止省略产品卡片的 1px 边框——系统依赖细线边框而非阴影来定义表面
  • 禁止在特性卡片或营销模块中使用 4px 圆角——4px 仅用于小型 界面外围元素 和图标,卡片层级从 8px 开始
  • 禁止引入超出命名标记色系之外的新色彩——多色图标系统已封闭
  • 禁止在产品界面中居中正文——数据应左对齐;唯一居中的文字是首屏标题和区块 H1 标题
  • 禁止使用纯黑色 #000000 作为文字——应使用 #221f1c 墨黑;暖色调是纸墨质感的关键部分