Attio 网站预览
Attio 网站预览

Attio

建筑风格的白大理石主题

Attio 采用了一种编辑类 SaaS 语言:近白色画布、近黑色文字,以及一个鲜明的钴蓝色强调色(#266df0),该色突出表达,其余部分则保持安静。文字层级是一个精心设计的三重声系统——UI 使用 Inter 字体,营销标题使用 InterDisplay 字体,加粗至 600 权重且字间距紧凑;而用户评价或引言类内容则使用 TiemposText(衬线字体)来传递温暖与人性质感。组件设计轻盈而精确:7px 和 12px 的圆角,细线边框,带有极低不透明度的蓝色阴影,以及透明描边/轮廓按钮,其视觉优先级低于主色块的深色操作按钮。布局具有呼吸感——最大宽度为 1440px,垂直节奏宽松,但在卡片和列表内部则保持紧凑。其标志性特征是克制:如同金融类出版物中的单色克制,每屏仅出现一次色彩强调。

查看原始网站

使用规范

建议采用

  • 使用 #266df0(钴蓝核心)作为所有交互高亮、激活状态和链接文字的唯一强调色——绝不引入其他饱和色
  • 将展示标题使用 InterDisplay 600 字重,字号 40-64px,字间距 -0.015em 至 -0.02em,行高 1.0 至 1.1
  • 所有按钮和输入控件使用 10px 圆角,标签和徽章使用 7px,卡片使用 11-14px
  • 应用低不透明度的蓝调阴影(rgba(28, 40, 64, 0.04) 至 rgba(28, 40, 64, 0.1))——绝不使用暖灰或纯黑阴影
  • 将 Inter 500 字重设为 UI 默认字重,而非 400——稍重的字重是系统的默认语气
  • 在所有 Inter 与 InterDisplay 文字中激活 'ss03' 以启用替代几何字符
  • 保持最大宽度为 1440px,并在主要区块间维持 80-120px 的垂直间距

建议避免

  • 不要使用超过 12px 圆角的圆角按钮——10px 圆角是系统身份的一部分
  • 不要引入次级强调色、按钮上的渐变或装饰性色彩——仅限一个钴蓝色强调色
  • 不要将 TiemposText 用于除引言类标题以外的任何场景——衬线与无衬线字体的对比因稀有而产生张力
  • 不要使用 Inter 400 作为默认字重——UI 语气由 500 字重承载
  • 不要使用比 rgba(28, 40, 64, ...) 更暖的阴影——蓝调阴影是刻意设计,而非中性
  • 不要在正文或标题文字中使用大于 0 的字间距——系统始终保持紧密字间距
  • 不要将钴蓝色强调色置于正文内容的填充背景上——它应属于链接、图标及小型交互节点