精選 · 開放 · 免費
Payload
用於構建現代網路應用程式的開源 Next.js 後端解決方案。
cmsdev
01
設計氣質 DNA
開發者優先現代化無頭CMSTypeScript
為後端開發打造的高性能跑車
02
色彩
#ffffffInk
rgba(255,255,255,0.5)Ink soft
#000000BG
rgba(255,255,255,0.125)BG soft
#808080Muted
高對比度單色調色盤，搭配細微的紋理疊加效果
03
字型
geometric-sans · monospace
- display
56px · 500 - heading
32px · 500 - body
16px · 400 - caption
12px · 500
標題字體採用字距緊湊的幾何無襯線體 · 內文字體使用相同幾何無襯線字族的一般字重 · 程式碼片段使用等寬字體 · 標籤與元數據採用大寫轉換
04
間距
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
96px
一致的 4px 格線，搭配寬裕的內距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 40px
1px solid rgba(255,255,255,0.125)
0 4px 24px rgba(0,0,0,0.5)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬區塊設計，搭配寬裕的內距
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
互動元素的流暢 hover 過渡動畫 · 內容區塊的錯落淡入動畫
細微的透明度與變換效果變化 · 即時回應並提供視覺回饋
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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Payload CMS 是一款以開發者為優先的無頭 CMS，定位為網路開發的現代化後端解決方案。關鍵視覺元素包括採用黑色 (#000000) 背景的深色主題，搭配白色 (#ffffff) 的幾何無襯線字體排版。設計強調字距緊湊的粗體大標題，以及極簡的裝飾元素。重要限制條件：維持嚴謹的單色調色盤，不使用彩色強調色；採用一致的幾何無襯線字體層次；確保整體空間與內距寬裕。避免使用襯線字體、漸層效果或過於裝飾性的元素，以免破壞簡潔的技術美學。介面優先考量開發者體驗，包含程式碼片段、終端機風格指令，以及技術內容的清晰視覺層次。
en · zh-CN · zh-TW · ja · ko