精選 · 開放 · 免費
Auth0
Auth0 是一個為開發者打造的全面性身分驗證平台，結合企業級資安防護與卓越的使用者體驗。
devauth
01
設計氣質 DNA
開發者工具資安防護AI 基礎架構
數位體驗背後安全、無形的基礎。
02
色彩
#0A84AEAccent
#FFFEEFInk
#FFFFFFInk soft
#0D0D0DBG
#171717BG soft
#111111BG quiet
#8C929CMuted
rgba(255, 254, 255, 0.12)Line
以深色為主的專業色盤，平衡深色中性色調與高對比白色，並輔以獨特的青綠色強調色。
03
字型
grotesque-sans · humanist-sans · monospace
- display
56px · 500 - heading
32px · 500 - body
16px · 400
區段標籤與徽章使用大寫字母 · 大型展示文字維持緊湊的行高 · 僅限程式碼區塊與技術參考使用等寬字體
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 為基礎單位，搭配一致的倍數，以實現可預期的垂直與水平節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
採用 rgba(255, 254, 255, 0.12) 的細微 1px 實心邊框，營造玻璃擬態效果
0px -4px 40px 0px rgba(0, 0, 0, 0.16) · 0px 16px 24px 0px rgba(0, 0, 0, 0.25) · inset 0px 1px 0px 0px rgba(255, 255, 255, 0.24)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的英雄區段，配有寬闊的內容區域與受限的文字寬度，以利閱讀。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
懸停狀態時的平滑顏色過渡 · 互動元素細微的縮放與透明度變化 · 內容區段的錯落式淡入效果
細微的背景顏色轉換與些微高度變化 · 立即的視覺反饋與狀態變化
08
組件
- button 高對比的主按鈕採用白色背景與深色文字；次要按鈕則採用透明背景與細微邊框。
- card 深色玻璃擬態卡片，帶有細微內發光與圓角邊框。
- chip 小型大寫字母徽章，配有細邊框與半透明背景。
- input 簡潔的深色輸入欄位，帶有細微邊框與圓角邊框。
- hero 大型戲劇性英雄區塊，搭配漸層背景、居中排版與顯眼的行動呼籲按鈕。
09
文案語氣與禁用清單
- 語氣 專業、自信且以開發者為中心
- 標題風格 簡潔、行動導向的陳述，強調整合速度與便捷性
- 按鈕文案 直接且具邀請性，聚焦於立即價值（例如：「免費開始建構」）
- 勿使用明亮、飽和的色彩 — 電腦截圖顯示深色背景搭配細微漸層與青綠色強調色
- 勿使用裝飾性襯線字體 — 電腦截圖顯示簡潔、功能性的無襯線字體
- 勿使用厚重的陰影效果 — 電腦截圖顯示細微的發光與玻璃擬態效果
- 勿將所有文字置中 — 電腦截圖顯示居中的英雄區塊文字與靠左對齊的內文混合
- 勿使用過小、擁擠的按鈕 — 電腦截圖顯示間距寬裕的互動元素
- 勿使用複雜的裝飾性邊框 — 電腦截圖顯示簡單的 1px 實心邊框與低不透明度
- 避免: 缺乏脈絡的過度技術術語
- 避免: 被動或不確定的語氣
- 避免: 過多的驚嘆號或誇大宣傳
- 避免: 缺乏清晰視覺層次的大段落文字
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
Auth0 是一個以開發者為中心的身分驗證平台，採用深色模式優先的美學風格，背景使用深炭灰色（#0D0D0D、#111111）與高對比白色文字（#FFFEEF）。字體使用 humanist-sans 作為內文、grotesque-sans 作為展示元素，等寬字體則保留給程式碼區塊。關鍵強調色為專業的青綠色（#0A84AE）。關鍵設計限制：避免使用明亮飽和的色彩、永不使用裝飾性襯線字體、維持細微的玻璃擬態效果而非厚重陰影、區段標籤使用大寫字母，並確保互動元素之間留有充裕間距。版面配置以戲劇性的英雄區塊為核心，強調強烈的排版層次。
en · zh-CN · zh-TW · ja · ko