ElevenLabs 网站预览
ElevenLabs 网站预览

ElevenLabs

暖白纸色、轻字重标题与圆润的产品展示。

以暖白背景、黑色文字和宽松留白营造安静的阅读感,搭配轻字重标题、大圆角卡片与胶囊按钮。鲜艳色彩主要留给产品图形,按钮和链接保持克制。适合参考的场景:AI 音视频工具、创意服务或需要展示产品体验的介绍页。

查看原始网站

使用规范

建议采用

  • 32px+ 展示标题统一使用 300 字重的 Waldenburg,不要使用粗体或半粗体;这种轻声表达是品牌标志性的克制。
  • 按钮、标签和胶囊形标签页统一使用 9999px 圆角;胶囊形是不可替换、最具辨识度的组件形态。
  • 按钮层级只采用 #000000 实心按钮与 #fdfcfc 描边按钮,不要引入彩色 CTA 填充。
  • #0447ff 紫色和 #ff4704 橙色仅用于音频球体、产品图标、插画点缀等产品视觉,不用于界面文字、边框或交互元素。
  • 使用 1px solid #ebe8e4 的细线边框分隔区块;优先使用边框而非投影,以保留扁平的编辑设计气质。
  • 32px+ Waldenburg 标题使用 -0.02em 字间距,14–16px Inter 正文使用 +0.01em 字间距;相反的字间距方向形成有意的标题与正文对比。
  • 表面按蛋壳色 → 灰褐色 → 石色叠放,不使用纯白或纯灰;温暖感是整个系统的色调特征。

建议避免

  • 不要将 Waldenburg 设为粗体或半粗体;300 字重的轻声表达是品牌最鲜明的选择,粗体会破坏它。
  • 不要将 #0447ff 紫色或 #ff4704 橙色用于按钮、链接、徽章或任何可交互的界面元素,它们只用于装饰。
  • 不要添加厚重投影;系统仅使用几乎不可见的 1px 阴影,不使用模糊的抬升效果。
  • 不要在这两种产品视觉强调色之外新增强调色;调色板有意保持 97% 无彩色。
  • 卡片或功能面板不要使用小于 8px 的尖锐圆角;20–24px 圆角是标志性特征。
  • 背景不要使用纯白 #ffffff,始终使用 #fdfcfc 蛋壳色,以保持温暖的纸张感。
  • 正文不要使用比 Waldenburg 300 更重的展示字体;24px 以下的内容使用 Inter 400/500。