精選 · 開放 · 免費
Clerk
為開發者打造安全、可擴展應用程式的完整使用者管理平台
devtoolsauth
01
設計氣質 DNA
驗證使用者管理開發者體驗可擴展性
如同安全建築的堅實基礎
02
色彩
#6248F6Accent
#131316Ink
#5E5F6EInk soft
#FFFFFFBG
#F7F7F8BG soft
#747686Muted
rgba(217, 217, 222, 1)Line
乾淨的留白，搭配清晰的黑色文字，以及單一鮮明的紫色強調色
03
字型
grotesque-sans · humanist-sans · monospace
- display
56px · 700 - body
16px · 400
標題採用緊湊的字距與粗體以增強視覺衝擊力 · 內文維持舒適的閱讀節奏，搭配充足的行高 · 等寬字體僅在技術強調時謹慎使用
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以一致的 4px 為基準，首頁區域採用充足的留白
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(217, 217, 222, 1)
rgba(0, 0, 0, 0.08) 0px 5px 15px 0px · rgba(25, 28, 33, 0.2) 0px 15px 35px -5px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的首頁區塊搭配充足留白，後接多欄式功能特性網格
07
動效與互動
150msmicro
300mssmall
450msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
懸停時平滑的色彩過渡 · 互動狀態下細微的透明度變化 · 展開效果時漸進的變形動畫
細微的色彩加深與背景變化 · 無延遲的即時視覺反饋
08
組件
- button 圓角膠囊按鈕，具有清晰的層級區分（主要為實心，次要為外框）
- card 淺灰色卡片，帶有細微邊框與充足的內距
- chip 小型圓角標籤，用於類別與角色
- input 簡潔的輸入欄位，帶有細微邊框與圓角
- hero 全寬置中版面，搭配大號字型與細微的背景圖案
09
文案語氣與禁用清單
- 語氣 專業、自信，且以開發者為核心
- 標題風格 直接且以效益為導向，使用強而有力的動詞
- 按鈕文案 以行動為導向，具有明確的價值主張
- 避免使用裝飾性字型 — 螢幕截圖顯示的是簡潔、功能性的 grotesque-sans 字型
- 避免添加不必要的陰影 — 螢幕截圖僅在關鍵元素上顯示極簡、有意義的浮現效果
- 避免使用多種強調色 — 螢幕截圖全程使用單一紫色強調色 (#6248F6)
- 避免擁擠的版面配置 — 螢幕截圖顯示充足的留白與呼吸空間
- 避免使用複雜的漸層 — 螢幕截圖顯示細微的線性漸層與放射狀背景
- 避免添加不必要的邊框 — 螢幕截圖僅在需要功能區隔的地方顯示邊框
- 避免: 過於隨意的語言
- 避免: 過多的驚嘆號
- 避免: 缺乏實質內容的行銷術語
- 避免: 沒有技術細節的模糊承諾
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
Clerk 是一個專注於驗證與使用者管理的優質開發者工具平台。其設計採用乾淨、專業的美學風格，以白色背景 (#FFFFFF) 與淺灰色表面 (#F7F7F8) 為主。字型方面，標題使用 grotesque-sans，內文使用 humanist-sans，並在標題上採用緊湊的字距。單一的鮮明紫色強調色 (#6248F6) 建立了清晰的號召用語層級。版面配置將內容置中，搭配充足的留白，並運用細微的陰影創造深度感。關鍵的注意事項包括：避免裝飾性字型、過多的陰影、多種強調色、擁擠的版面、複雜的漸層以及不必要的邊框。系統優先考慮開發者體驗，透過清晰的資訊層級與有意義的視覺元素，傳達可靠性與技術精緻度。
en · zh-CN · zh-TW · ja · ko