精選 · 開放 · 免費

Stytch

一個以字體排印為主導、專為安全驗證 API 設計的開發者平台標識。

devauth
Stytch 網站截圖
↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://stytch.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

身份識別驗證平台開發者API

一套穩健的、面向開發者的工具套件,用於構建安全的身份識別層,平衡技術深度與企業級可靠性。

02

色彩

#1D1D1DInk
#525151Ink soft
#FBFAF9BG
#F2F0EEBG soft
#CECECEMuted
rgba(29,29,29,0.15)Line

以溫暖白色為基底的高對比單色調色盤,優先考慮易讀性與專業克制。

03

字型

humanist-sans · monospace

主要標題與大型標題使用 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

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

Stytch 是一個專業、面向開發者的身份識別平台,採用高對比單色調色盤。主要顏色為溫暖白色 (#FBFAF9) 與近黑墨色 (#1D1D1D),輔助文字使用柔和灰色 (#525151, #CECECE)。字體排印以展示用的人文主義無襯線字體 (Booton) 與內文及技術介面使用的乾淨等寬字體 (Chivo Mono) 為主。避免鮮豔的色彩點綴、複雜的漸層,或俏皮、異想天開的元素。關鍵設計限制:優先為所有功能性文字使用等寬字體排印,採用 4px 基礎間距並在主視覺區段使用寬裕內距,並保持嚴格的平面、高對比視覺語言。確保所有介面組件保持乾淨、帶邊框且易讀。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko