精选 · 开放 · 免费
Airtable
通过AI驱动的数据管理，连接团队工作流的统一工作空间。
CleanProductivitySaaSToolingReference
01
设计气质 DNA
工作流企业数据互联无代码
数字电子表格与项目管理工具的融合
02
色彩
#181D26Ink
#444444Ink soft
#FFFFFFBG
#F8FAFCBG soft
#6E6E6EMuted
rgba(24,29,38,0.12)Line
干净、高对比度的黑白配色，辅以极少量点缀色。
03
字体
humanist-sans
- display
48px · 500 - heading
32px · 500 - body
20px · 400
Haas Groot Disp 用于大型展示标题。 · Haas 用于正文和UI元素。 · 行高随字体尺寸增加而收紧。 · 正文文本的字距略微为正值。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
垂直间距遵循4px基础单位，采用标准递增。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用主色调，低不透明度的细微1px边框。
rgba(15, 48, 106, 0.05) 0px 0px 20px 0px · rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准居中内容布局，桌面端具有宽阔的边距。
07
动效与交互
150msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover时细微的颜色和背景过渡。 · 平滑的元素可见性变化。
按钮颜色在hover时略微加深或填充色发生变化。 · 提供细微的缩放或颜色反馈。
08
组件
- button 纯黑色主按钮配白色文字，白色次级按钮带黑色边框。提供药丸形和矩形两种变体。
- card 浅灰色背景卡片，带有细微的圆角。
- chip 截图中未出现。
- input 标准文本输入框，带有细微边框。
- hero 居中标题和副标题，配以双CTA按钮，后接由可信赖公司组成的logo墙。
09
文案语气与禁用清单
- 语气 专业、清晰、以企业为中心。
- 标题风格 简洁、利益导向的陈述，强调连接性和效率。
- 按钮文案 直接且以行动为导向（例如'免费开始'，'预约演示'）。
- 避免使用明亮、饱和的点缀色——截图显示的是以黑白为主的单色调色板。
- 避免使用装饰性或手写体字体——截图显示的是干净、现代的无衬线字体。
- 避免使用厚重、复杂的阴影——截图显示的是细微、近乎扁平的设计，最小化立体感。
- 避免杂乱的布局——截图显示的是充足的留白和专注的内容区域。
- 避免默认使用深色模式——截图显示的是以干净白色背景作为主要画布。
- 避免使用不规则或过度花哨的圆角——截图显示的是统一、基本为矩形或细微圆角的样式。
- 避免: 行话
- 避免: 过于随意的语言
- 避免: 夸张用语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Airtable的设计是一种干净、以企业为中心的SaaS美学，以清晰和专业性为核心。调色板为单色，使用深色墨色（#181D26）在纯白背景（#FFFFFF）上，次要表面使用柔和的灰色（#F8FAFC）。没有主导的点缀色；强调通过强对比和按钮样式实现。字体是现代的人文主义无衬线字体家族，用于展示和正文时具有清晰的层级。布局宽敞，具有充足的留白和居中的内容块。关键约束：避免使用饱和的点缀色，仅使用干净的无衬线字体，并保持文本与背景之间的高对比度。标准UI组件中不使用厚重的阴影或复杂的渐变。
en · zh-CN · zh-TW · ja · ko