Koto 网站预览
Koto 网站预览

Koto

近黑色基底、渐变展示与大字排版。

页面以近黑色为基底,搭配白色文字。字体采用 gtKotoheim、gtKotoheimCondensed。视觉特点包括渐变展示、大字排版。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 页面背景设为 #060606(虚空黑);永远不要使用纯 #000000
  • 在 38–48px 大小处使用 gtKotoheimCondensed 字重 300 仅用于展示标题;搭配 -0.48px 字间距(在 48px 时)
  • 在 12–16px 大小处使用 gtKotoheim 用于所有 UI、正文和导航文本,并启用 'salt' 字体特性
  • 将 #ffe800(信号黄)专用于标志;它不得出现在任何 UI 组件、按钮或文本中
  • 通过亮度变化(画布 → #141414 卡片)传达层级感,而非通过阴影或边框
  • 保持元素间距为 8px,区块间距为 48px;节奏来自这些 4px 基础单位的固定倍数
  • 所有文本左对齐,让负空间承载布局——永远不要对齐正文内容或添加装饰性分隔线

建议避免

  • 不要引入任何超出中性色系和信号黄之外的颜色;该系统从设计上就是 0% 色彩
  • 不要使用填充按钮或彩色行动号召(CTA);交互元素为透明描边,使用 #ffffff 边框在透明填充上
  • 不要对任何元素应用阴影、渐变或模糊效果——平滑的虚空处理是不可妥协的
  • 不要使用除 2px、6px 或 10px 以外的圆角值;混合圆角会破坏几何纪律
  • 不要在正文使用 gtKotoheimCondensed 或在展示中使用 gtKotoheim 正常字重;这两个字体家族在尺寸和用途上必须严格区分
  • 不要将纯 #ffffff 用于正文文本——应将其保留用于标题、边框以及 UTC 指示器;正文文本使用 #b4b4b4
  • 不要在基础布局中添加图标、插图或图像;页面以排版为先,视觉资产仅允许出现在深色表面卡片内