Locomotive 网站预览
Locomotive 网站预览

Locomotive

白色基底、大幅摄影展示与大字排版。

页面以白色为基底,搭配近黑色文字。字体采用 HelveticaNowDisplay、LocomotiveNew。视觉特点包括大幅摄影展示、大字排版、细线分隔。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 所有文字保持 400,系统无粗或轻变体,改让字号与空间建立层级。
  • 展示场景用 LocomotiveNew 70–110px,其余用 HelveticaNowDisplay 15–26px;无编辑意图绝不跨入 26px/70px 间隔。
  • 内容锚定 4px 网格,区块内边距 150px+,行内边距 20px;系统能呼吸,因为大部分是留白。
  • 所有转角方正,卡片、按钮、标签和图片圆角 0px,利落强化编辑目录语气。
  • 满幅摄影供应全部色彩和情绪,界面本身绝不引入彩色强调。
  • 列表行以 1px Ink 细线和充足 20px 垂直内边距分隔,而非背景或小块。
  • 反色只交换 Ink 与 Paper,不引入灰、色调或第三种明度。

建议避免

  • 不要引入品牌色或强调,0% 彩色占比是刻意、可专属的约束,而非疏忽。
  • 任一字体家族不要添加粗、半粗或轻字重,单字重 400 立场是标志。
  • 图片、卡片、按钮或任何容器不要圆角,所有几何保持正交。
  • 不要用阴影、模糊或浮起层暗示深度,依靠 Ink/Paper 反色对比。
  • 不要应用 letter-spacing 或 text-transform,展示字体保持默认字间距,句式或大写按原文。
  • 白画布内不要放徽章、小块、填充标签等界面外框,会破坏画廊墙比喻。
  • 任何情况下不要用渐变,区块需要能量时改用满幅照片。