Ableton 网站预览
Ableton 网站预览

Ableton

白色基底、文字主导与等宽字体。

页面以白色为基底,搭配近黑色文字。字体采用 futura-pt。视觉特点包括文字主导、等宽字体、网格布局、摄影展示。适合参考的场景:效率工具官网、协作产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有文字使用 Futura PT,绝不引入次级字体。
  • 所有圆角设为 0px,系统利落、棱角分明、忠于网格。
  • #0000ff 专用于链接文字、激活导航与交互文字,不用其他蓝。
  • 珊瑚色 #ff8389 与蓝绿色 #00d2be 只作为分类标签填充,绝不作为背景或文字色。
  • 页面保持平面:卡片无阴影、无边框、无填充,让留白与文字承担表达。
  • 首屏覆盖文字使用 90px、字重 400 的白色,而非 700;强烈影像上的轻字重就是标志。
  • 正文行高设为 1.50,展示行高 1.00;呼吸正文与紧密展示的对比是刻意的。

建议避免

  • 任何组件不要添加 box-shadow 或浮起,系统刻意平面。
  • 卡片、标签、按钮或输入框不要圆角,到处保持 0px。
  • 珊瑚色或蓝绿色不要用于按钮、行动入口或交互文字,它们只用于分类。
  • 不要称 #0000ff 为“行动按钮色”,它是交互文字的链接色,而非填充按钮色。
  • 不要引入渐变背景,系统只有纯色与摄影。
  • 不要添加图标、插画或装饰图形,摄影与排版承载视觉。
  • 正文字号不要低于 14px,正文只用字重 400。