精選 · 開放 · 免費
Clickhouse
一個具備深色、高對比介面的高效能開發者平台,專為技術精準度而設計。
Developer ToolsBold TypographyDark ModeCleanPremium
01
設計氣質 DNA
資料庫分析即時基礎架構
一個為高效能資料運作打造的指揮中心儀表板。
02
色彩
#faf569Accent
#ffffffInk
#a0a0a0Ink soft
#151515BG
#1f1f1cBG soft
#131313BG quiet
#dfdfdfMuted
rgba(65, 65, 65, 0.8)Line
採用高對比深色主題,優先考量可讀性,並將注意力聚焦於鮮明的黃色強調色。
03
字型
humanist-sans · monospace
- display
72px · 500 - headline
36px · 500 - body
16px · 400 - small
14px · 400
在 humanist-sans 字族中使用粗體字重以示強調 · 顯示用字型保持緊湊的行高 · 確保文字與背景之間具有高對比度
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
採用一致的 4px 基礎網格,較大的區塊間距則使用其倍數
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(65, 65, 65, 0.8)
0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 20px 25px -5px rgba(0, 0, 0, 0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬首頁區塊採用置中內容,並搭配 12 欄網格以實現結構化版面
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上的平滑顏色與背景過渡效果 · 微小的懸停狀態變化
按鈕與連結上的顏色與背景色過渡效果。 · 透過微小的透明度或變形變化提供即時視覺回饋。
08
組件
- button 實心的主色黃色按鈕搭配黑色文字與微小圓角;次要按鈕則採用透明背景與邊框。
- card 深色表面的卡片帶有微小邊框與圓角,通常包含整合圖示。
- chip 在截圖中並未突出顯示。
- input 在截圖中並未突出顯示。
- hero 以大比例字型置於深色背景上,具有清晰的層級結構與雙重行動呼籲按鈕。
09
文案語氣與禁用清單
- 語氣 自信、技術性且直接。
- 標題風格 以粗體、簡潔的陳述強調效能與規模。
- 按鈕文案 以行動為導向,提出明確的價值主張,例如「開始免費雲端試用」。
- 避免使用大於 12px 的圓角——截圖顯示為微小、功能性的圓角
- 避免使用多種強調色——截圖顯示為單一、主導的黃色強調色
- 避免使用淺色模式或白色背景——截圖顯示為深色模式設計
- 避免使用裝飾性襯線字體——截圖顯示所有顯示與內文字型均為 humanist-sans
- 避免使用繁複的紋理或圖樣——截圖顯示為乾淨、平面的表面
- 避免使用低對比文字——截圖顯示深色背景上的高對比白色與黃色文字
- 避免: 模糊的行銷術語
- 避免: 過於隨意的語言
- 避免: 缺乏脈絡的複雜技術解釋
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
這是一個為 ClickHouse(一個即時資料庫)設計的高階開發者工具介面。設計採用深色模式調色板,以近黑色背景搭配高彩度的黃色作為主要操作強調色。字型為簡潔的 humanist-sans-serif,顯示用文字使用粗體字重。關鍵十六進位色碼為 #151515(背景)、#faf569(強調色)與 #ffffff(墨色)。嚴格禁忌:絕不使用淺色模式、絕不使用多種強調色,且絕不使用裝飾性襯線字體。版面寬敞,採用 12 欄網格與置中的首頁內容。
en · zh-CN · zh-TW · ja · ko