01
设计气质 DNA
开发者工具安全AI 基础设施
数字体验的安全、无形基石。
02
色彩
#0A84AEAccent#FFFEEFInk#FFFFFFInk soft#0D0D0DBG#171717BG soft#111111BG quiet#8C929CMutedrgba(255, 254, 255, 0.12)Line以深色为主的专业配色，平衡深色中性色与高对比度白色及独特的青绿色强调色。
03
字体
- display
56px · 500 - heading
32px · 500 - body
16px · 400
对章节标签和徽章使用大写字母 · 为大型展示文本保持紧凑的行高 · 严格使用等宽字体于代码块和技术参考
04
间距
4px8px16px24px32px48px64px96px以 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
包内真实截图
11
System Prompt
Auth0 是一个面向开发者的身份平台，采用深色模式优先的美学设计，具有深炭灰背景（#0D0D0D, #111111）和高对比度白色文本（#FFFEEF）。排版使用人文无衬线字体用于正文，怪诞无衬线字体用于展示元素，等宽字体保留用于代码块。关键强调色是专业的青绿色（#0A84AE）。关键设计约束：避免使用明亮饱和的颜色，切勿使用装饰性衬线字体，保持细微的毛玻璃效果而非厚重阴影，章节标签使用大写字母，并确保交互元素之间留有充足的间距。布局以具有强烈排版层次的戏剧化英雄区域为中心。