Hume AI 网站预览
Hume AI 网站预览

Hume AI

科学风格的柔和仪表盘。一个平静的白色实验室，其中近黑色的排版以柔和的水彩形式呈现数据。

Hume AI 读作一个科学风格的柔和仪表盘：近乎白色的实验室画布，其中唯一的明显痕迹是近黑色 #222222，而色彩以柔和的水彩晕染形式出现——玫瑰、薰衣草、桃粉、薄荷、天空蓝——这些色彩并非装饰，而是直观地呈现数据。标题的字体处理是紧凑、低对比度的 Fellix，字号为 36–48px，字间距为负值，采用一种轻声细语的字重，将情感智能表达为一种克制而有测量感的风格。组件呈胶囊形或柔和圆角（8/12/16/24px 半径），边框不可见或为细线，无阴影——不同元素通过色彩与留白区分，而非通过层级高度。等宽字体 PP Fraktion Mono 作为‘实验室标签’的声音出现：大写列标题、标签芯片和数据注释采用正向 +0.025em 字间距，与显示无衬线字体的紧致 -0.025em 形成对比。整体节奏中心、宽裕且具编辑性——各区块间留有 48–64px 的间距，内容从不拥挤，唯一饱和的强调色（#c094e4 紫）仅出现在数据条和品牌展示场景中，从不用于 界面外围元素 元素。

查看原始网站

使用规范

建议采用

  • 所有主要操作、标签芯片和导航 CTA 均使用 9999px 的胶囊半径——完全圆润的几何形态是系统中最鲜明的特征，必须统一应用。
  • 仅将 oklab 紫→粉→琥珀渐变（linear-gradient(90deg, #c094e4 0%, #f7bbe6 50%, #ffb760 100%)) 应用于首屏标题中的渐变文字短语，绝不用于背景、按钮或大面积表面。
  • 眉题和数据标签（COMBINED、BLOG POST、DATASET COMPOSITION、COMING SOON）使用 PP Fraktion Mono 全大写，字间距为 +0.025em，并禁用连字；这种“实验室标签”的声音与大标题无衬线字体形成对比。
  • 在 12px 至 48px 全范围字号内，所有 Fellix 文字均设置 -0.025em 字间距；在小字号时不得放松字间距。
  • 正文、按钮和图标均使用 #222222（而非 #000000）——近黑色是刻意的柔和处理，必须在系统中保持一致。
  • 通过柔和色块（粉晕、蛋白霜、薄荷、海藻绿、天空蓝）来传达数据类别或状态，作为卡片背景或 12px 圆点使用——这些柔和色彩绝不能用作文字填充或按钮背景。
  • 所有水平数据条默认使用单一 #c094e4 Iris 紫色——变化来自条长，而非多色数据调色盘。

建议避免

  • 卡片或按钮上禁止使用阴影、模糊或层级效果——表面仅通过色彩与细线边框区分。
  • 禁止将柔和强调色用于 CTA 填充、链接文字或图标描边——这些色彩仅作为表面晕染和类别指示。
  • 禁止在白色页面画布上使用 #ffffff 作为卡片背景；应搭配温暖的 Bone #fff9f3 区域背景，以实现视觉分隔。
  • 禁止将 Fellix 标题设置为 700 或 800 字重——系统的克制感来自 520 字重，其存在感强于常规但体积小于粗体。
  • 禁止将 PP Fraktion Mono 用于大字号（16px 以上）的正文内容——它属于标签/注释字体，而非阅读字体。任何段落内容均应与 Fellix 配对使用。
  • 禁止将 oklab 渐变与标准 CSS 渐变混合，或作为背景填充使用——该渐变仅限于首屏标志词中文字的内联渐变使用。
  • 禁止将卡片统一使用与按钮相同的 9999px 圆角；卡片使用 12–24px 圆角，以保持胶囊形操作与柔和圆角表面之间的清晰区分。

相似设计语言