Raw Materials 网站预览
Raw Materials 网站预览

Raw Materials

暖白色基底、扁平表面与大字排版。

页面以暖白色为基底，搭配蓝色文字。字体采用 StabilGrotesk、Optimistic Text。视觉特点包括扁平表面、大字排版、摄影展示。适合参考的场景：设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 每个交互元素与 80px 以下任何文字用 StabilGrotesk，它是唯一接触界面控件的字体。
  • 所有字体设为 feature-settings: ss02，此风格替代应用于全站每个字体，是视觉身份的一部分。
  • 展示标题行高锁定 1.00-1.03，让文字在垂直方向自相接触。
  • 所有卡片、按钮、图片和导航块使用 16px 圆角，绝不混入 8px 或 4px 转角。
  • 每个页面区块分配七种导航色之一，并将此色延续至内容块、徽章与强调文字。
  • 展示标题允许超出容器，不能限制在 max-width 内。
  • 奶油画布与五种暖带色背景 Sage、Blush、Sand、Sky、Celadon 之一交替，形成区块节奏。

建议避免

  • 不要添加投影、内阴影或任何模糊，系统完全平面。
  • 行动按钮不要用单一“主要”品牌色，按钮继承所在区块强调色。
  • 正文不要低于 16px 或高于 20px，正文范围刻意紧密。
  • 正文或副标题字间距不要宽于 +0.01em，只有 +0.084em Moderat 全大写标签与 +0.112em Optimistic 大写使用宽字间距。
  • 不要引入七种导航色相与五种带色色层之外的新色，色板刻意有限。
  • 任何容器圆角不要小于 16px，4px 或 8px 转角会像另一个系统。
  • 展示标题不要在画布上居中，始终左对齐并向右溢出。

相似设计语言