精選 · 開放 · 免費
Vouchatlas
一個視覺化群眾外包旅行安全與基礎設施資料的互動式地圖。
Geographic DataConsumerEditorialToolingClean
01
設計氣質 DNA
群眾外包安全旅行資料互動式地圖
專為數位遊牧者打造的群眾外包旅行安全地圖集。
02
色彩
#DC2626Accent
#18181BInk
#71717AInk soft
#FFFFFFBG
#F4F4F5BG soft
#E4E4E7Muted
rgba(0,0,0,0.1)Line
以中性基底搭配資料驅動的色彩強調。
03
字型
humanist-sans
- display
24px · 500 - body
16px · 400 - caption
12px · 400
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
一致的 4px 基礎系統。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 6px
lg · 8px
pill · 999px
使用細緻的 1px 邊框與柔和陰影來界定區塊邊界。
rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 1px 2px -1px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
分割版面,左側為主導的互動式地圖視覺化,右側為資料側邊欄。
07
動效與互動
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素的背景色與邊框色平滑過渡。
按鈕與互動式地圖元素上的細膩色彩過渡。 · 觸發側邊欄的資料更新。
08
組件
- button 極簡的藥丸形按鈕,帶有細緻邊框與 hover 過渡效果。
- card 簡潔的卡片,帶有柔和陰影與緊湊的內邊距。
- chip 用於資料狀態的小型標籤式元素。
- input 帶有圓角邊框的標準文字輸入框。
- hero 全寬區塊,中心聚焦於互動式地圖視覺化。
09
文案語氣與禁用清單
- 語氣 客觀且具資訊性。
- 標題風格 直接、提問式的標題風格。
- 按鈕文案 極簡且具功能性。
- 勿使用裝飾性字體 — 截圖顯示清晰、易讀的無襯線字體。
- 勿添加厚重陰影 — 截圖顯示細緻、柔和的 box-shadow。
- 勿使用未經驗證的鮮豔強調色 — 截圖顯示用於資料的功能性紅色與橙色。
- 勿使用複雜漸層 — 截圖顯示平面色彩與簡單線性刻度。
- 勿使 UI 過於擁擠 — 截圖顯示充足的留白與專注的版面佈局。
- 勿過度使用圓角 — 截圖顯示大多為直角或輕微圓角的邊緣。
- 避免: 情感性語言
- 避免: 行銷誇飾
- 避免: 複雜術語
11
System Prompt
VouchAtlas 是一個群眾外包旅行安全與基礎設施的視覺化工具。其設計依賴於白色 (#FFFFFF) 與淺灰色 (#F4F4F5, #E4E4E7) 的乾淨中性色板,搭配深色文字 (#18181B)。資料透過功能性色彩如紅色 (#DC2626) 與橙色 (#EA580C) 來傳達,而非裝飾性強調色。字體採用清晰的 humanist-sans-serif,針對不同資料密度下的可讀性進行優化。版面以互動式地圖為主導,輔以詳細資料的側邊欄。關鍵限制包括避免裝飾性元素、維持高資料墨水比,並確保資料視覺化具有清晰的色彩對比。請勿過度使用圓角,勿添加厚重陰影,也勿使用複雜漸層。
把這份品味接進你的 Agent
把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。
OpenDesign 技能 ↗
en · zh-CN · zh-TW · ja · ko