01
设计气质 DNA
开放标准数据转换AI-ready开发者工具
面向数据流水线的现代化工业车间
02
色彩
#FE6703Accent#030711Ink#374151Ink soft#FFFFFFBG#F5F3FFBG soft#6B7280Mutedrgba(3,7,17,0.1)Line在干净的白色背景上使用高对比度的墨色，并以充满活力的橙色强调主要操作。
03
字体
- display
48px · 600 - h2
32px · 600 - body
16px · 400
标题使用过渡衬线字体以体现权威性 · 正文使用干净的人文主义无衬线字体以提升可读性 · 代码片段使用中性的等宽字体
04
间距
4px8px12px16px24px32px40px48px64px基于4px的统一网格，辅以充裕的段落内边距（64px）
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
用于卡片和输入框的细1px边框，交互元素则使用更粗的边框。
0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的12列网格，包含针对移动端和桌面端的响应式断点。
07
动效与交互
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
为hover状态提供微妙的淡入淡出和缩放过渡 · 为大多数交互元素使用标准缓动效果
交互元素上出现微妙的颜色偏移或背景变化。 · 标准的指针光标，并提供即时视觉反馈。
08
组件
- button 主按钮采用充满活力的橙色填充、黑色文本和圆角设计。次级按钮采用透明填充搭配黑色边框。
- card 白色卡片，带有微妙的圆角（12px）和细边框，通常包含图标、标题和正文文本。
- input 带有圆角和细边框的标准文本输入框。
- hero 一个大型、居中的过渡衬线字体标题，下方是副标题和一个突出的操作按钮。
09
文案语气与禁用清单
- 语气 权威、专业且略带技术感。
- 标题风格 强调速度、信任和现代标准的粗体、陈述式标题。
- 按钮文案 直接且以行动为导向（例如，'开始使用dbt'，'预约演示'）。
- 不要使用俏皮或异想天开的字体排版——截图显示标题使用了严肃的过渡衬线字体
- 不要使用暗淡或单色的调色板——截图显示了充满活力的橙色强调色
- 不要使用沉重的投影——截图显示了干净的、扁平的、几乎没有高度差的表面
- 不要为所有元素使用圆角容器——截图显示了直角的按钮和卡片
- 不要使用密集、拥挤的布局——截图显示了充裕的留白和清晰的区块
- 不要使用复杂的装饰性插图——截图显示了简洁、干净的图标
- 避免: 俚语
- 避免: 过于随意的语言
- 避免: 充斥炒作的流行词
10
包内真实截图
11
System Prompt
dbt Labs网站是一个专注于数据转换和AI readiness的现代开发者工具SaaS。它采用干净、专业的美学风格，以白色背景为主，墨色文字为辅，并点缀以充满活力的橙色强调色。排版上结合了用于标题的过渡衬线字体、用于正文的人文主义无衬线字体以及用于代码的等宽字体。布局宽敞，采用12列网格。关键元素包括大型首屏区域、带有细边框的干净白色卡片，以及突出的橙色操作按钮。关键约束：避免俏皮或异想天开的元素，切勿使用暗淡的调色板，并始终保持充裕的留白。整体感觉是权威、可信且技术精确的。