精選 · 開放 · 免費
Directus
一款開源無頭 CMS 與後端即服務，讓非技術團隊能管理內容，同時支持開發者進行建構。
cmsdev
01
設計氣質 DNA
後端資料庫團隊API無代碼
您的整體資料庫基礎架構的萬能遙控器。
02
色彩
#FFFFFFInk
#090909BG
#151515BG soft
#A0A0A0Muted
rgba(255, 255, 255, 0.08)Line
高對比單色調，透過略淺的灰色營造細微層次感。
03
字型
transitional-serif · humanist-sans · geometric-mono
- display
56px · 400 - h1
48px · 400 - body
16px · 400
主要標題使用襯線字體，增添編輯設計的份量感。 · 所有 UI 元素與內文使用無襯線字體。 · 程式碼片段與技術介面元素保留使用等寬字體。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以 8px 基線格線建立大型區塊間一致的垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 12px
lg · 20px
pill · 999px
1px solid rgba(255, 255, 255, 0.08)
0 4px 12px rgba(0, 0, 0, 0.3) · 0 8px 24px rgba(0, 0, 0, 0.4)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬深色畫布，搭配固定式頂部導覽列與居中的內容欄位。
07
動效與互動
200msmicro
400mssmall
800msmedium
cubic-bezier(0.44, 0, 0.56, 1)easing
互動元素採用細微色彩過渡效果。 · 內容揭示採用流暢的透明度淡入淡出。
按鈕與連結細微調整透明度或背景亮度。 · 透過細微縮放或色彩變換提供即時視覺回饋。
08
組件
- button 主要按鈕為白底黑字並具備大型膠囊圓角；次要按鈕採用透明背景搭配白色文字。
- card 深灰色卡片，帶有細微 1px 邊框與 12-20px 圓角，用於歸類功能說明。
- chip 膠囊狀導覽元素，採透明背景與細邊框，並突出顯示活躍狀態。
- input 深灰色輸入欄位，帶有細邊框，程式碼輸入欄位採用等寬字體排版。
- hero 經典左對齊首屏區域，包含大型襯線標題、無襯線副標題、程式碼片段及雙重行動呼籲。
09
文案語氣與禁用清單
- 語氣 自信、專業且對開發者友好，避免過於隨意的語氣。
- 標題風格 直接、有力且強調效益，常使用襯線字體展現權威感。
- 按鈕文案 明確且具行動導向，例如「免費開始使用」或「查看工作室」。
- 勿使用明亮霓虹色調——截圖顯示嚴格的單色調色盤。
- 勿使用圓角方形卡片——截圖顯示元素採用 12px 至膠囊圓角。
- 勿使用厚重的無襯線標題字型——截圖顯示展示用字型為過渡襯線體。
- 勿使用密集的小字排版——截圖顯示充足間距與大型可讀字體。
- 勿使用繁複背景或紋理——截圖顯示純色近黑 #090909 背景。
- 勿使用活潑圖像化圖示——截圖顯示簡潔最小化 UI 元素與技術圖示。
- 避免: 避免過度行銷化或充滿流行詞彙的文案。
- 避免: 避免俏皮或天馬行空的插圖。
- 避免: 避免過於複雜或雜亂的版面配置。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
Directus 是一款專為開發者設計的後端即服務平台，採用精緻的單色深色模式美學。設計以近乎黑色 #090909 背景與白色 #FFFFFF 文字為基底，搭配細微灰色（#151515、#A0A0A0）作為點綴。排版混合使用過渡襯線體作為粗體標題，人文無襯線體作為介面字型，並搭配幾何等寬字體處理程式碼。版面寬敞居中。關鍵禁忌：避免使用鮮豔色彩、避免圖像化 UI 元素、避免介面雜亂。語調專業且強調效益，目標受眾為技術團隊。
en · zh-CN · zh-TW · ja · ko