精選 · 開放 · 免費
Stytch
一個以字體排印為主導、專為安全驗證 API 設計的開發者平台標識。
devauth
01
設計氣質 DNA
身份識別驗證平台開發者API
一套穩健的、面向開發者的工具套件,用於構建安全的身份識別層,平衡技術深度與企業級可靠性。
02
色彩
#1D1D1DInk
#525151Ink soft
#FBFAF9BG
#F2F0EEBG soft
#CECECEMuted
rgba(29,29,29,0.15)Line
以溫暖白色為基底的高對比單色調色盤,優先考慮易讀性與專業克制。
03
字型
humanist-sans · monospace
- display
64px · 700 - headline
48px · 700 - body
16px · 400 - code
14px · 400
主要標題與大型標題使用 Booton/BootonUncommon。 · 所有內文、導覽、按鈕與技術元素使用 Chivo Mono。 · 大型展示文字保持緊湊的字間距 (-1px 到 -2px)。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的 4px 基礎空間節奏,主視覺區段採用寬裕內距 (48px)。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用墨色與柔和色調的 1px 實線邊框,常以方向性方式應用(底部/右側)。
rgba(0, 0, 0, 0.5) 0px 8px 10px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
採用居中內容容器,主視覺區段為乾淨的單欄流動。
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing
互動元素採用細微的變形過渡效果。 · hover 狀態與焦點變化採用流暢的緩動曲線。
細微的透明度或背景色彩變化。 · 最小化視覺反饋,依賴狀態變化。
08
組件
- button 單色調按鈕,採用實色填充(墨色或白色),細微 4px 圓角與等寬字體文字。
- card 乾淨的、帶邊框容器,具備細微背景變化(bgSoft)與方向性邊角點綴。
- chip 小型的等寬字體文字標籤,帶有細微邊框。
- input 標準文字輸入框,帶有淺色邊框。
- hero 以高對比墨色呈現於溫暖白色背景上的巨大居中字體排印。
09
文案語氣與禁用清單
- 語氣 專業、直接且技術精確。
- 標題風格 粗體、大尺度的字體排印,搭配負值字間距。
- 按鈕文案 行動導向,高對比按鈕上的等寬字體文字。
- 不要使用鮮豔的漸層——截圖顯示的是單色調、平面色彩調色盤。
- 不要使用俏皮或圓潤的襯線字體——截圖使用的是幾何/等寬字體為主的系統。
- 不要使用大型、多彩的圖示——截圖依賴字體排印與細微邊框。
- 不要將深色模式作為預設——截圖顯示的是淺色、溫暖白色的背景。
- 不要使用裝飾性插圖——截圖專注於程式碼片段與乾淨的介面。
- 不要使用過多陰影——截圖顯示非常 minimal、平面的層次。
- 避免: 避免過度裝飾或異想天開的語言。
- 避免: 避免複雜的漸層或鮮豔的色彩點綴。
- 避免: 避免俏皮或非正式的介面模式。
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
Stytch 是一個專業、面向開發者的身份識別平台,採用高對比單色調色盤。主要顏色為溫暖白色 (#FBFAF9) 與近黑墨色 (#1D1D1D),輔助文字使用柔和灰色 (#525151, #CECECE)。字體排印以展示用的人文主義無襯線字體 (Booton) 與內文及技術介面使用的乾淨等寬字體 (Chivo Mono) 為主。避免鮮豔的色彩點綴、複雜的漸層,或俏皮、異想天開的元素。關鍵設計限制:優先為所有功能性文字使用等寬字體排印,採用 4px 基礎間距並在主視覺區段使用寬裕內距,並保持嚴格的平面、高對比視覺語言。確保所有介面組件保持乾淨、帶邊框且易讀。
en · zh-CN · zh-TW · ja · ko