精選 · 開放 · 免費

Tinybird

專為開發者打造的即時資料分析平台。

devdata
Tinybird 網站截圖
↓ 下載設計系統包 (7 MB)在 OpenDesign 中開啟

原站: https://www.tinybird.co

📦 瀏覽包內檔案 →

01

設計氣質 DNA

即時資料分析開發者快速

一個高效能的資料流終端機。

02

色彩

#27F795Accent
#FFFFFFInk
#8D8D8DInk soft
#0A0A0ABG
#151515BG quiet
#999999Muted
rgba(255, 255, 255, 0.2)Line

高對比深色模式，搭配單一鮮豔霓虹綠作為焦點強調色。

03

字型

humanist-sans · monospace

標題使用緊湊的字距 (-1px) 和標準字重。 · 內文在深色背景上採用淺灰色，以確保乾淨且高度易讀。 · 等寬字體用於技術詞彙、標籤和面向開發者的 UI 元素。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

一致的 8px 和 16px 增量，創造出緊湊且高效的網格系統。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px
md · 8px
lg · 12px
pill · 999px

纖細、低透明度的白色邊框用於定義浮動表面，例如 Cookie 視窗和卡片。

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

標準 12 欄網格，搭配寬裕的留白以確保內容的可讀性。

07

動效與互動

150msmicro
300mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

背景顏色和文字狀態採用細微、流暢的過渡效果。 · 互動元素採用最小化的縮放或變換動畫。

互動元素在懸停時產生細微的顏色或透明度變化。 · 透過顏色過渡提供即時回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Tinybird 是一個專為開發者打造的即時資料平台，採用深色模式優先的設計。調色盤以深黑和灰色 (#0A0A0A, #151515) 為主，搭配單一鮮豔的霓虹綠強調色 (#27F795)。排版依賴乾淨的人文無襯線字體用於標題和內文，技術元素則使用等寬字體。關鍵注意事項：避免使用多種強調色，勿使用襯線字體，並避免添加厚重的陰影。佈局採用標準 12 欄網格，搭配寬裕的留白，強調大尺寸、字距緊湊的標題以創造衝擊力。互動效果流暢，搭配細微的顏色過渡，維持高效能、技術導向的感覺。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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