01
设计气质 DNA
身份验证用户管理开发者体验可扩展
坚固的安全建筑基石
02
色彩
#6248F6Accent#131316Ink#5E5F6EInk soft#FFFFFFBG#F7F7F8BG soft#747686Mutedrgba(217, 217, 222, 1)Line洁净的留白空间搭配清晰的黑色文字，以及单一鲜明的紫色点缀
03
字体
- display
56px · 700 - body
16px · 400
标题采用紧凑的字间距与粗重字重以强化视觉冲击 · 正文保持舒适的阅读节奏与宽松的行高 · 等宽字体元素仅少量使用，用于技术性强调
04
间距
4px8px12px16px24px32px48px64px96px基于一致的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
组件
- button 圆润的药丸形按钮，层次清晰（主要填充，次要描边）
- card 浅灰色卡片，配以微妙边框与充裕内边距
- chip 用于分类与角色的小型圆角标签
- input 简洁的输入框，配以微妙边框与圆角
- hero 全宽居中布局，搭配大号字体与微妙的背景纹理
09
文案语气与禁用清单
- 语气 专业、自信、以开发者为中心
- 标题风格 直接、以效益为导向，使用有力动词
- 按钮文案 行动导向，提供清晰价值主张
- 勿使用装饰性字体——截图显示为简洁、功能性的 grotesque-sans 排版
- 勿添加不必要的阴影——截图显示仅关键元素采用最小化、有目的的阴影提升
- 勿使用多种强调色——截图显示全局使用单一紫色强调色（#6248F6）
- 勿创建拥挤的布局——截图显示拥有充裕留白与呼吸空间
- 勿使用复杂渐变——截图显示为微妙的线性渐变与径向背景
- 勿添加不必要的边框——截图显示仅在需要功能分离处使用边框
- 避免: 过于随意的语言
- 避免: 过多的感叹号
- 避免: 缺乏实质内容的营销术语
- 避免: 缺乏技术细节的模糊承诺
10
包内真实截图
11
System Prompt
Clerk 是一个专注于身份验证与用户管理的优质开发者工具平台。设计采用洁净、专业的美学风格，背景为白色（#FFFFFF），表面为浅灰色（#F7F7F8）。排版方面，展示文本使用 grotesque-sans，正文使用 humanist-sans，标题采用紧凑字间距。单一的鲜明紫色强调色（#6248F6）建立了清晰的行动号召层次。布局以居中内容、充裕留白为核心，并运用微妙阴影营造深度感。关键禁忌：避免装饰性字体、过度阴影、多种强调色、拥挤布局、复杂渐变及不必要的边框。系统优先考虑开发者体验，通过清晰的信息层次与有目的的视觉元素传达可靠性与技术精密度。