精选 · 开放 · 免费

dbt

面向现代、AI-ready数据转换的开放标准。

devdata
dbt 网站截图
↓ 下载设计系统包 (60 MB)在 OpenDesign 中打开

原站: https://www.getdbt.com

📦 浏览包内文件 →

01

设计气质 DNA

开放标准数据转换AI-ready开发者工具

面向数据流水线的现代化工业车间

02

色彩

#FE6703Accent
#030711Ink
#374151Ink soft
#FFFFFFBG
#F5F3FFBG soft
#6B7280Muted
rgba(3,7,17,0.1)Line

在干净的白色背景上使用高对比度的墨色，并以充满活力的橙色强调主要操作。

03

字体

transitional-serif · humanist-sans · monospace

标题使用过渡衬线字体以体现权威性 · 正文使用干净的人文主义无衬线字体以提升可读性 · 代码片段使用中性的等宽字体

04

间距

4px
8px
12px
16px
24px
32px
40px
48px
64px

基于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

组件

09

文案语气与禁用清单

10

包内真实截图

dbt — 桌面首屏（hero）
桌面首屏（hero）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
dbt — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

dbt Labs网站是一个专注于数据转换和AI readiness的现代开发者工具SaaS。它采用干净、专业的美学风格，以白色背景为主，墨色文字为辅，并点缀以充满活力的橙色强调色。排版上结合了用于标题的过渡衬线字体、用于正文的人文主义无衬线字体以及用于代码的等宽字体。布局宽敞，采用12列网格。关键元素包括大型首屏区域、带有细边框的干净白色卡片，以及突出的橙色操作按钮。关键约束：避免俏皮或异想天开的元素，切勿使用暗淡的调色板，并始终保持充裕的留白。整体感觉是权威、可信且技术精确的。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko