精選 · 開放 · 免費
Tinybird
專為開發者打造的即時資料分析平台。
devdata
01
設計氣質 DNA
即時資料分析開發者快速
一個高效能的資料流終端機。
02
色彩
#27F795Accent
#FFFFFFInk
#8D8D8DInk soft
#0A0A0ABG
#151515BG quiet
#999999Muted
rgba(255, 255, 255, 0.2)Line
高對比深色模式,搭配單一鮮豔霓虹綠作為焦點強調色。
03
字型
humanist-sans · monospace
- display
64px · 400 - h1
48px · 400 - body
16px · 400 - caption
14px · 400
標題使用緊湊的字距 (-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
組件
- button 主要按鈕使用鮮豔的綠色強調色;次要和幽靈按鈕使用等寬字體或細微邊框。
- card 卡片使用深色背景,搭配纖細、低透明度的邊框和最小的內距。
- chip 標籤和標記使用方括號內的等寬字體,通常帶有細微的背景色。
- input 表單輸入框和切換開關遵循標準的深色模式樣式,配有乾淨的邊框。
- hero 首頁區域採用大尺寸、字距緊湊的排版,並置於頁面中央。
09
文案語氣與禁用清單
- 語氣 技術性、自信且直接。
- 標題風格 簡潔、行動導向,並常使用大尺寸排版以創造衝擊力。
- 按鈕文案 清晰且具功能性,常使用等寬字體或鮮豔的綠色強調色。
- 勿使用多種強調色 — 截圖顯示僅有一種主要的霓虹綠強調色。
- 勿使用襯線字體 — 截圖顯示標題和內文均使用乾淨的無襯線字體。
- 勿使用厚重的陰影效果 — 截圖顯示平面化的浮動表面,搭配纖細邊框。
- 勿使用複雜的漸層效果 — 截圖顯示純色深色背景,搭配最小化的紋理。
- 勿過度使用圓角 — 截圖顯示大多數元件採用直角或極輕微的圓角。
- 勿在內文中使用全大寫字母 — 截圖使用標準句首大寫以利閱讀。
- 避免: 缺乏脈絡的術語
- 避免: 過度裝飾的元素
- 避免: 被動語態
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Tinybird 是一個專為開發者打造的即時資料平台,採用深色模式優先的設計。調色盤以深黑和灰色 (#0A0A0A, #151515) 為主,搭配單一鮮豔的霓虹綠強調色 (#27F795)。排版依賴乾淨的人文無襯線字體用於標題和內文,技術元素則使用等寬字體。關鍵注意事項:避免使用多種強調色,勿使用襯線字體,並避免添加厚重的陰影。佈局採用標準 12 欄網格,搭配寬裕的留白,強調大尺寸、字距緊湊的標題以創造衝擊力。互動效果流暢,搭配細微的顏色過渡,維持高效能、技術導向的感覺。
en · zh-CN · zh-TW · ja · ko