精选 · 开放 · 免费

Clerk

供开发者构建安全、可扩展应用的完整用户管理平台

devtoolsauth
Clerk 网站截图
↓ 下载设计系统包 (14 MB)在 OpenDesign 中打开

原站: https://clerk.com

📦 浏览包内文件 →

01

设计气质 DNA

身份验证用户管理开发者体验可扩展

坚固的安全建筑基石

02

色彩

#6248F6Accent
#131316Ink
#5E5F6EInk soft
#FFFFFFBG
#F7F7F8BG soft
#747686Muted
rgba(217, 217, 222, 1)Line

洁净的留白空间搭配清晰的黑色文字，以及单一鲜明的紫色点缀

03

字体

grotesque-sans · humanist-sans · monospace

标题采用紧凑的字间距与粗重字重以强化视觉冲击 · 正文保持舒适的阅读节奏与宽松的行高 · 等宽字体元素仅少量使用，用于技术性强调

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

hover时的平滑颜色过渡 · 交互状态下的微妙透明度变化 · 展开效果的渐进式变形动画

微妙的颜色变深与背景变化 · 即时视觉反馈，无延迟

08

组件

09

文案语气与禁用清单

10

包内真实截图

Clerk — 桌面首屏（hero）
桌面首屏（hero）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Clerk — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Clerk 是一个专注于身份验证与用户管理的优质开发者工具平台。设计采用洁净、专业的美学风格，背景为白色（#FFFFFF），表面为浅灰色（#F7F7F8）。排版方面，展示文本使用 grotesque-sans，正文使用 humanist-sans，标题采用紧凑字间距。单一的鲜明紫色强调色（#6248F6）建立了清晰的行动号召层次。布局以居中内容、充裕留白为核心，并运用微妙阴影营造深度感。关键禁忌：避免装饰性字体、过度阴影、多种强调色、拥挤布局、复杂渐变及不必要的边框。系统优先考虑开发者体验，通过清晰的信息层次与有目的的视觉元素传达可靠性与技术精密度。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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