01
设计气质 DNA
实用主义系统对话框认证
标准浏览器或操作系统原生的认证模态窗口。
02
色彩
#0078d4Accent#000000Ink#ffffffBG#666666Mutedrgba(0, 0, 0, 0.1)Line高对比度、系统原生的色彩方案，点缀色使用极少。
03
字体
- display
20px · 500 - body
14px · 400 - caption
12px · 400
04
间距
4px8px12px16px24px32px统一的 4px 基础网格
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(0, 0, 0, 0.1)
None: 0 4px 16px rgba(0,0,0,0.12)
06
布局
300container
1columns
16pxgutter
固定宽度的居中模态对话框
07
动效与交互
0msmicro
0mssmall
0msmedium
lineareasing
无
标准系统光标变化 · 按钮按压状态
08
组件
- button 系统原生按钮，主填充为蓝色，次边框为灰色
- card 带细微投影的模态对话框容器
- input 标准文本输入框，带灰色边框与蓝色聚焦环
09
文案语气与禁用清单
- 语气 中性、实用、系统生成
- 标题风格 直接且功能导向
- 按钮文案 清晰的行动动词
- 避免使用装饰性图片——截图显示的是纯功能性对话框
- 避免使用圆角——截图显示的是直角矩形边缘
- 避免使用复杂渐变——截图显示的是扁平纯色
- 避免实现复杂动画——截图显示的是静态系统 UI
- 避免使用自定义字体——截图使用的是系统级字体
- 避免添加额外的布局元素——截图显示的是极简、聚焦的模态窗口
- 避免: 营销用语
- 避免: 表现性排版
- 避免: 装饰性元素
11
System Prompt
这是一个系统级认证对话框。它采用由白色 (#ffffff)、黑色 (#000000) 和标准蓝色 (#0078d4) 构成的极简高对比度色彩方案。排版完全使用系统原生无衬线字体。布局为居中、固定宽度的模态窗口，带细微阴影。关键禁忌：切勿使用圆角，切勿添加装饰元素，切勿使用自定义字体，并避免任何复杂动画或渐变。重点纯粹在于功能性的实用交互。