精選 · 開放 · 免費
Congress Kadoa
監測立法與行政部門股票交易活動的開源儀表板
FintechData VisualizationCleanProductivityTooling
01
設計氣質 DNA
透明度公民數據財務監測公開記錄
一個乾淨、數據密集的財務終端，重新構想用於公民監督
02
色彩
#0f7b3fAccent
#23252aInk
#5d5d5fInk soft
#f4f5f8BG
#ffffffBG soft
#f2f2f2BG quiet
#abababMuted
rgba(229, 231, 235, 1)Line
中性畫布，搭配用於財務績效指標的語義綠/紅訊號色
03
字型
grotesque-sans · monospace
- display
48px · 600 - heading
24px · 600 - body
16px · 450 - caption
13px · 450
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
標準 4px 基礎網格，透過一致的行高倍數維持垂直節奏
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
使用 1px solid #e5e7eb 作為卡片與表格列邊框，提供細微的容器感，無需厚重陰影
卡片無可見陰影，依賴邊框進行區隔
06
版面
1200container
12columns
24pxgutter
768 / 1024breakpoints
單欄、以數據為核心的佈局，頂部導航列，以及包含密集表格數據的堆疊內容區塊
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有互動狀態（包括顏色、背景與邊框）均採用統一的 150 毫秒過渡效果
互動元素（如表格列與按鈕）的背景顏色細微過渡變化 · 立即的視覺回饋與狀態變化，游標預設為指向裝置
08
組件
- button 膠囊形狀，半徑 9999px，極簡邊框，並採用語義背景色
- card 白色背景，1px 邊框與 4px 圓角，用於呈現關鍵績效指標
- chip 彩色背景（綠/紅/橙），用於股票代碼與狀態指示器
- input 頂部導航列中的圓角搜尋輸入框，帶有鍵盤快捷鍵提示
- hero 大型左對齊標題，搭配支援性副標題，下方為指標卡片網格
09
文案語氣與禁用清單
- 語氣 客觀、分析性且嚴肅，專注於原始數據呈現，不含編輯偏見
- 標題風格 直接且陳述式的標題，關於數據覆蓋範圍與特定指標
- 按鈕文案 功能性導航連結，如「查看全部 →」與「在 GitHub 上加星」
- 勿使用厚重投影——截圖顯示僅由 1px 邊框定義的乾淨白色卡片
- 勿使用置中標題——截圖顯示全站嚴格採用左對齊文字層級
- 勿使用卡片圓角——截圖顯示資料容器為銳利的 4px 圓角
- 勿使用襯線字體——截圖顯示所有文字採用乾淨的無襯線字體家族
- 勿使用彩色漸層——截圖顯示平面、中性的背景與語義色彩標籤
- 勿使用複雜的多欄佈局——截圖顯示線性的單欄數據流
- 避免: 行銷術語
- 避免: 情緒性語言
- 避免: 誇飾
- 避免: 模糊描述
11
System Prompt
這是一個數據密集、開源的公民透明度儀表板，追蹤國會與行政部門的股票交易。使用中性灰白色背景（#f4f5f8），搭配純白介面與深炭灰色文字（#23252a）。字體採用乾淨的無襯線字體（Inter），數據部分使用等寬字體。強調色嚴格限定：綠色（#0f7b3f）代表獲利，紅色（#be2929）代表虧損，橙色用於警示。關鍵限制：永不置中文字，永不使用裝飾性陰影，永遠優先考量數據可讀性而非視覺華麗，互動效果保持低調，過渡時間 150 毫秒。
把這份品味接進你的 Agent
把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。
OpenDesign 技能 ↗en · zh-CN · zh-TW · ja · ko