Attio

为业务增长精密打造的金融工具

极简灰度，搭配高对比度的黑与白，以传达清晰度与专业性。

humanist-sans · monospaced-sans

• display56px · 500
• headline20px · 400
• body16px · 400
• caption13px · 400

高对比度以确保可读性 · 大尺寸展示字体采用紧凑字距 · 正文采用充裕行高

统一的 4px 网格系统，确保可预测的垂直与水平对齐

1px solid rgba(0,0,0,0.08)

0 1px 3px rgba(0,0,0,0.04) · 0 4px 12px rgba(0,0,0,0.06)

居中的主视觉，具有清晰的垂直层次，随后是在一个包含卡片中的仪表板预览。

内容加载时的细微淡入效果 · 交互元素悬停状态的平滑过渡

交互元素上的细微背景色变化或阴影增强。 · 轻微的向下位移或不透明度变化，以指示激活状态。

• button 深色实心主按钮，圆角，白色文字；次级按钮带细微边框。
• card 简洁的带边框容器，带细微阴影与一致的内边距。
• chip 用于标签或交互式筛选的细微背景药丸形元素，边框对比度低。
• input 带边框的文本框，含占位符文本与内部图标。
• hero 大型、居中的排版块，配有副标题与双行动号召按钮。

• 语气 专业、自信，略带技术感。
• 标题风格 简短、有力、以利益为导向的陈述，使用大号展示字体。
• 按钮文案 直接且以行动为导向（例如，‘免费开始’，‘联系销售’）。

• 不要使用明亮或鲜艳的主色调——截图显示的是严格的单色调色板。
• 不要使用装饰性或手写体字型——排版完全采用干净、功能性的无衬线体。
• 不要使用圆角或俏皮的 UI 元素——边框与圆角细微且专业。
• 不要创建密集或杂乱的布局——主视觉文本周围有大量的留白。
• 不要使用沉重或分散注意力的阴影——阴影几乎难以察觉，仅用于营造微妙的层次感。
• 不要对大型标题使用全大写——主视觉文本采用句首大写或标题式大写，以呈现现代感。
• 避免: 过于随意的语言
• 避免: 过度使用最高级
• 避免: 脱离语境的技术术语