Trawelt 网站预览
Trawelt 网站预览

Trawelt

浅灰色基底、大字排版与紧密字距。

页面以浅灰色为基底。字体采用 Labour Grotesk、Reckless Neue。视觉特点包括大字排版、紧密字距、宽松留白、扁平表面。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • Forest Command (#2d9b4c)是系统唯一彩色填充;不要引入次级强调色。
  • 将持续存在的Mint Boarding Pass (#d3ffc3)导航胶囊固定于每页顶部,深色与浅色分区都保持这一处理。
  • 所有正文和UI文字使用Labour Grotesk字重400;通过字号和字间距建立层级,而非通过字重变化。
  • Reckless Neue字重250仅用于浅奶油色分区的编辑式标题;不要搭配粗体或斜体变体。
  • 抬升通过画布反色——黑色页面上的白色卡片——或1px黑色边框表达;不要使用box-shadows。
  • 所有卡片和面板采用15.04px圆角,所有按钮和小输入框采用10.08px,导航胶囊和标签采用9999px。
  • 满幅深色与浅色分区交替,二者之间保留120–187px垂直间距。

建议避免

  • 不要引入第二或第三种强调色;绿色是唯一彩色心跳。
  • 任何位置都不要使用font-weight 600/700;系统刻意采用400字重的单线语气。
  • 任何元素都不要使用box-shadows、drop-shadows或辉光效果。
  • 功能文字不要使用435px巨型展示字号;每页仅留给一个装饰场景。
  • 不要将Reckless Neue放在深色背景上;它专属于浅色分区。
  • 页面背景不要使用纯白#ffffff;浅色分区始终使用Linen Cream (#e4e9dc)或Parchment (#efefe7)。
  • 不要打断导航胶囊;它必须保持为跨越所有分区的单一连续薄荷绿栏。