精選 · 開放 · 免費

Clickhouse

一個具備深色、高對比介面的高效能開發者平台，專為技術精準度而設計。

Developer ToolsBold TypographyDark ModeCleanPremium
Clickhouse 網站截圖
↓ 下載設計系統包 (28 MB)在 OpenDesign 中開啟

原站: https://clickhouse.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

資料庫分析即時基礎架構

一個為高效能資料運作打造的指揮中心儀表板。

02

色彩

#faf569Accent
#ffffffInk
#a0a0a0Ink soft
#151515BG
#1f1f1cBG soft
#131313BG quiet
#dfdfdfMuted
rgba(65, 65, 65, 0.8)Line

採用高對比深色主題，優先考量可讀性，並將注意力聚焦於鮮明的黃色強調色。

03

字型

humanist-sans · monospace

在 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

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個為 ClickHouse（一個即時資料庫）設計的高階開發者工具介面。設計採用深色模式調色板，以近黑色背景搭配高彩度的黃色作為主要操作強調色。字型為簡潔的 humanist-sans-serif，顯示用文字使用粗體字重。關鍵十六進位色碼為 #151515（背景）、#faf569（強調色）與 #ffffff（墨色）。嚴格禁忌：絕不使用淺色模式、絕不使用多種強調色，且絕不使用裝飾性襯線字體。版面寬敞，採用 12 欄網格與置中的首頁內容。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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