精選 · 開放 · 免費
Depot
Depot 加速您整個建構流程的每個環節。
devinfra
01
設計氣質 DNA
開發者工具效能CI/CD速度基礎設施
現代開發流程的高效能引擎
02
色彩
#71D083Accent
#EEEFF0Ink
#B5B2BCInk soft
#04040BBG
#121113BG soft
#323035BG quiet
#7C7A85Muted
rgba(60, 57, 63, 1.0)Line
深沉的深色背景為技術內容創造專注的環境，鮮明的綠色強調色突顯速度與效能。
03
字型
humanist-sans · monospace
- display
56px · 700 - headline
24px · 500 - body
16px · 400 - small
14px · 400 - micro
12px · 500
標題字體採用負字距，營造緊湊現代感 · 內文字體維持舒適的行高以利閱讀 · 等寬字體用於技術資料與類程式碼元素
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以 4px 為基準的統一網格，搭配合乎邏輯的間距遞進
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(60, 57, 63, 1.0)
0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
以充足留白為中心的內容佈局，以清晰的垂直區塊組織
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素的流暢色彩轉換 · 懸停狀態的透明度變化 · 微互動的變形動畫
細微的色彩變化與透明度調整 · 透過色彩轉換提供即時視覺回饋
08
組件
- button 綠色背景的膠囊狀主要按鈕，次要按鈕搭配細微邊框
- card 深色卡片，帶有細微邊框與圓角，常用於展示效能指標
- chip 小型膠囊狀標籤，用於狀態指示與分類
- input 深色輸入欄位，帶有細微邊框與圓角
- hero 全寬主視覺區塊，包含大型標題、描述文字與顯著的行動呼籲
09
文案語氣與禁用清單
- 語氣 直接、自信且技術精準
- 標題風格 簡短有力的陳述，強調速度與效率
- 按鈕文案 清晰的行動導向標籤，附帶支援資訊
- 避免使用明亮的主色調 — 截圖顯示深色背景上的柔和綠色強調
- 避免使用裝飾性字體 — 截圖顯示簡潔的人文主義無襯線字體
- 避免添加厚重陰影或漸層 — 截圖顯示最小化的深度效果
- 避免使用過多動畫 — 截圖顯示細微、具目的性的過渡效果
- 避免佈局過於擁擠 — 截圖顯示充足的留白與清晰的層次結構
- 避免使用複雜的導覽模式 — 截圖顯示簡單、合乎邏輯的選單結構
- 避免: 未解釋的專業術語
- 避免: 過度口語化的語言
- 避免: 過多的驚嘆號
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
Depot 是一個用於 CI/CD 加速的開發者工具平台，具有深色、專注效能的美學風格。設計採用深炭灰色背景 (#04040B) 搭配鮮明綠色強調 (#71D083)，以突顯速度與效率。字體方面，標題與內文使用人文主義無襯線字體，技術資料則使用等寬字體。佈局簡潔居中，留白充足，以清晰的垂直區塊組織。關鍵互動包括流暢的色彩轉換與細微的懸停效果。語調直接且技術精準，避免術語同時保持自信。關鍵設計規則：謹慎使用柔和的綠色強調、維持深色配色一致性、保持字體簡潔易讀、避免過度動畫、保留充足間距，並維持清晰的視覺層次。
en · zh-CN · zh-TW · ja · ko