Shelby Kay 网站预览
Shelby Kay 网站预览

Shelby Kay

暖白色基底、大字排版与网格布局。

页面以暖白色为基底，搭配棕色文字。字体采用 Ranade、Switzer。视觉特点包括大字排版、网格布局、摄影展示、大幅图像展示。适合参考的场景：设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 定义品牌或分区的标题采用 83px 及以上 Ranade；只有它可以填满画面。
  • 正文和元信息采用 Switzer，500–600 字重、10–16px；这种紧凑无衬线字体是主力，应承担 90% 的界面。
  • 品牌色恰好两种：Olive Ink（#393c2a）用于结构，Sage Type（#737955）用于品牌表达。Sage 少量使用，每个分区最多一个展示元素。
  • 通过暖色调层次（Linen → Sienna → Driftwood）改变画布来定义分区，而非硬边框或色块。
  • 卡片、图像、标签等全部使用 0px border-radius；印刷页隐喻要求尖角。
  • 紧凑元信息容器使用 7–8px 内边距，卡片使用 20px；8px 基础单元统领所有间距。
  • 所有文字和边框使用 Olive Ink（#393c2a）；它在 Linen 上的 9.2:1 对比度使 10px 文字可读、265px 文字宏大。

建议避免

  • 不要添加投影、发光或任何 CSS 抬升；体系有意保持扁平且像印刷品。
  • 任何元素不引入圆角（border-radius > 0），否则会破坏编辑隐喻。
  • 正文不使用 Sage Type（#737955）；它在 Linen 上的 3.7:1 对比度不满足可读性标准，只留给展示标题。
  • 不创建任何颜色的填充按钮背景；体系没有 CTA 按钮，导航仅有文字，联系入口是文字锚点。
  • 不使用渐变、品牌插画或成套图标；视觉语言仅由摄影、文字与色调叠层构成。
  • 除 Riverstone（#7b8785）Token 外，不使用冷灰或中性灰；所有中性色必须保持暖调，以维持植物氛围。
  • 正文不居中；只有分区锚点可居中，其余全部左对齐。

相似设计语言