精選 · 開放 · 免費
Doppler
為工程團隊打造的安全密鑰管理
devinfra
01
設計氣質 DNA
安全性基礎設施密鑰管理開發者企業級
數位密鑰的鞏固金庫
02
色彩
#00F575Accent
#F1F0ECInk
#D0C9C4Ink soft
#1C1624BG
#2D2734BG soft
#55505BMuted
rgba(255, 255, 255, 0.08)Line
深色背景上的高對比霓虹色，搭配細微的紫色漸層
03
字型
geometric-sans · humanist-sans · monospace
- display
56px · 500 - display-sm
32px · 500 - body
16px · 400
標題使用幾何無襯線字體 · 內文使用人文主義無襯線字體 · 大型顯示文字保持緊湊的字間距
04
間距
4px
8px
16px
20px
24px
32px
48px
64px
96px
8px 網格系統，以 32px 為基礎增量
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(255, 255, 255, 0.08)
0 4px 12px rgba(0, 0, 0, 0.15) · 0 8px 24px rgba(0, 0, 0, 0.2)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬主視覺區域搭配置中內容，雙欄式功能區塊
07
動效與互動
220msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上的流暢顏色過渡 · 焦點狀態的細微變換動畫 · 主視覺區域的漸層流動
顏色過渡，持續 0.3 秒 · 細微的縮放或透明度變化
08
組件
- button 實心霓虹綠 (#00F575) 搭配深色文字，圓角，懸停狀態
- card 深色玻璃面板，帶有細微邊框與圓角
- chip 小型狀態指示器，帶有圓角
- input 深色背景搭配細微邊框，具備搜尋功能
- hero 大型漸層背景搭配浮動式介面模型與醒目標題
09
文案語氣與禁用清單
- 語氣 自信且技術導向，聚焦安全性
- 標題風格 直接、行動導向的關於安全性的陳述
- 按鈕文案 清晰的價值主張搭配綠色點綴按鈕
- 避免使用淺色背景——截圖顯示深紫/黑色主題
- 避免使用多種點綴色——截圖顯示單一霓虹綠點綴
- 避免使用襯線字體——截圖顯示幾何/人文主義無襯線字體
- 避免使用小而擁擠的間距——截圖顯示寬裕的 padding（32-70px）
- 避免使用銳角——截圖顯示圓角（8-20px 半徑）
- 避免使用柔和、低對比的色彩——截圖顯示深色背景上的高對比霓虹色
- 避免: 過於隨意的語言
- 避免: 泛泛的企業用語
- 避免: 製造恐慌
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Doppler 是一款用於密鑰管理的高階開發者工具，採用深色、以安全性為焦點的美學設計。設計使用深紫黑色背景 (#1C1624) 搭配霓虹綠點綴 (#00F575)，以打造高可見度的 CTA。字體方面，顯示文字採用幾何無襯線字體，內文則使用人文主義無襯線字體。佈局以強大的主視覺區域為核心，搭配浮動式介面模型，使用寬裕的間距（32-70px padding）與圓角（8-20px）。關鍵特色包括漸層背景、玻璃擬態卡片，以及流暢的 0.3 秒過渡效果。重要禁忌：避免淺色背景、多種點綴色、襯線字體、擁擠間距、銳角，以及低對比色彩。此系統面向需要跨 CI/CD 管線進行安全、可擴展密鑰管理的企業級工程團隊。
en · zh-CN · zh-TW · ja · ko