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

Raw Materials

暖奶油上的粗野主义编辑页面。

Raw Materials 是排版极繁系统：暖奶油画布承载经常超过 200px 的展示文字，每个主要表面元素都有自己的鲜明颜色身份。系统放弃单一品牌色，改用橙、紫罗兰、墨色、钴蓝、深红、黄、绿七种区块标记色，同时标记导航和内容块，形成小刊节奏，颜色告诉你身在哪一章。表面平面，16px 圆角，无阴影、渐变或浮起。排版承担全部层级，从 12px 图注跳到 259px 展示标题，四种定制字体共同使用 ss02 风格替代字形。

查看原始网站

使用规范

建议采用

  • 每个交互元素与 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 转角会像另一个系统。
  • 展示标题不要在画布上居中，始终左对齐并向右溢出。

相似设计语言