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的色调——可读性依赖于这一中性中等范围