受 Airtable 启发的设计系统

Category: 设计与创意 电子表格与数据库的混合体。色彩丰富、友好亲切、结构化数据美学。

1. 视觉主题与氛围

Airtable 的网站是一个简洁的企业级平台，通过白色画布、深海军蓝文字（#181d26）和 Airtable Blue（#1b61c9）作为主要交互强调色，传递出”精致的简约”感。Haas 字体家族（展示体与正文体两种变体）以正向字母间距贯穿全局，构建出瑞士精密风格的排版体系。

关键特征：

• 白色画布配深海军蓝文字（#181d26）
• Airtable Blue（#1b61c9）用作主要 CTA 和链接颜色
• Haas + Haas Groot Disp 双字体系统
• 正文文字正向字间距（0.08px–0.28px）
• 按钮 12px 圆角，卡片 16px–32px 圆角
• 蓝色调多层阴影：rgba(45,127,249,0.28) 0px 1px 3px
• 语义化主题 token：--theme_* CSS 变量命名

2. 色彩调色板与角色

主色

• 深海军蓝 (#181d26)：主要文字
• Airtable Blue (#1b61c9)：CTA 按钮、链接
• 白色 (#ffffff)：主要表面
• Spotlight (rgba(249,252,255,0.97))：--theme_button-text-spotlight

语义色

• 成功绿 (#006400)：--theme_success-text
• 弱文字 (rgba(4,14,32,0.69))：--theme_text-weak
• 次要激活 (rgba(7,12,20,0.82))：--theme_button-text-secondary-active

中性色

• 深灰 (#333333)：次要文字
• 中蓝 (#254fad)：链接/强调蓝变体
• 边框 (#e0e2e6)：卡片边框
• 浅表面 (#f8fafc)：微妙表面

阴影

• 蓝色调 (rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset)
• 柔和 (rgba(15,48,106,0.05) 0px 0px 20px)

3. 排版规则

字体家族

• 主字体：Haas，备选：-apple-system, system-ui, Segoe UI, Roboto
• 展示字体：Haas Groot Disp，备选：Haas

层级

4. 组件样式

按钮

• 主蓝色：#1b61c9，白色文字，16px 24px 内边距，12px 圆角
• 白色：白色背景，#181d26 文字，12px 圆角，1px 白色边框
• Cookie 同意：#1b61c9 背景，2px 圆角（锐利）

卡片：1px solid #e0e2e6，16px–24px 圆角

输入框：标准 Haas 样式

5. 布局

• 间距：1–48px（8px 基准）
• 圆角：2px（小），12px（按钮），16px（卡片），24px（区块），32px（大），50%（圆形）

6. 深度

• 蓝色调多层阴影系统
• 柔和环境光：rgba(15,48,106,0.05) 0px 0px 20px

7. 应做与禁止

应做：CTA 使用 Airtable Blue，Haas 字体搭配正向字距，12px 圆角按钮

禁止：跳过正向字间距，使用过重阴影

8. 响应式行为

断点：425–1664px（23 个断点）

9. Agent 提示词指南

• 文字：深海军蓝（#181d26）
• CTA：Airtable Blue（#1b61c9）
• 背景：白色（#ffffff）
• 边框：#e0e2e6