Grain 网站预览
Grain 网站预览

Grain

近白色基底、紧密字距与细线分隔。

页面以近白色为基底,搭配近黑色文字。字体采用 Inter Variable、Poppins。视觉特点包括紧密字距、细线分隔、宽松留白、产品图像展示。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 仅在主要下载操作中使用#009959,绝不用于次级按钮、链接或装饰元素
  • 所有卡片、按钮、导航元素和标签设置为10px圆角;产品截图保留14px,特殊首屏卡片保留40px
  • 在38px及以上尺寸的主区块标题中,专用于Poppins 600字重;绝不用于正文或UI标签
  • 使用#fafafa作为页面和卡片的通用表面色——避免在定义范围内引入新的白色或灰色
  • 保持1px细线边框,颜色为#e6e6e6或#d6d6d6,用于结构分隔,而非厚重边框或填充背景
  • 在32px及以上显示尺寸上,所有元素应用-0.03em字间距;在20px及以下尺寸使用-0.02em
  • 区块之间垂直间距为96px,卡片内边距为24px,以保持宽敞、文档般的密度

建议避免

  • 不要使用#00ff95或#3de1ff作为UI颜色——这些仅用于装饰性插画填充,若出现在实际控件中将看起来像系统错误
  • 不要将绿色渐变用作卡片或区块的背景填充——它仅用于首屏/区块过渡的细微晕染
  • 不要添加比rgba(0,0,0,0.08)更暗的阴影——该系统依赖近乎不可见的层级感,而非强烈的深度
  • 不要在导航、按钮或正文文本中使用Poppins——Inter系统是核心;Poppins仅用于编辑性展示
  • 不要引入超出绿色调色板的强调色——1%的色彩饱和度是设计原则
  • 不要在任何容器上设置0px圆角——系统中所有表面均需柔和处理
  • 不要将正文文本设置在14px以下或高于#545454的色调——可读性依赖于这一中性中等范围