精選 · 開放 · 免費

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 狀態採用細膩的淡入淡出與縮放過渡 · 多數互動元件採用標準緩動曲線

互動元件在 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-ready 的現代開發者工具 SaaS。它採用乾淨、專業的美學，以白色為主背景，搭配近黑色墨色與鮮明的橙色強調色。字體排印結合過渡襯線體用於標題，人文無襯線體用於內文，以及等寬字體用於程式碼。佈局寬敞，採用 12 欄格線。關鍵元素包括大型主視覺區塊、具備細邊框的乾淨白色卡片，以及顯眼的橙色行動呼籲按鈕。關鍵限制：避免俏皮或異想天開的元素，絕不使用柔和的色調，並在整體中維持充裕的留白。整體感受應是權威、可信且技術精確的。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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