01
设计气质 DNA
实用主义极简系统化效用
一个安静的深色工具间。
02
色彩
#f0f0f0Ink#0b1110BG#889a96Mutedrgba(136, 154, 150, 0.3)Line近黑色背景搭配高对比度米白色文本,以实现最大可读性并营造宁静、专注的氛围。
03
字体
- display
56px · 400 - h2
32px · 400 - body
18px · 400
所有文本居中对齐。 · 链接带下划线。 · 不使用装饰性字体排印。
04
间距
4px8px16px24px32px48px64px96px充裕的垂直间距营造出宁静、整洁的感觉。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(136, 154, 150, 0.3)
0 0 0 1px rgba(136, 154, 150, 0.3)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中栏布局,包含一个圆角卡片元素。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
此静态状态页面未见动态模式。
链接可能具有标准的下划线悬停效果,但在静态截图中不可见。 · 预期为标准的链接点击行为。
08
组件
- button 未见按钮。
- card 一个大型圆角卡片,带有细微边框,用于承载次要信息。
- chip 未见标签。
- input 未见输入框。
- hero 一个占据整个视口、居中的首屏区域,显示主要系统状态信息。
09
文案语气与禁用清单
- 语气 信息明确、直接且有帮助。
- 标题风格 清晰、陈述性的系统状态声明。
- 按钮文案 在提供有益建议的段落中使用带下划线的行内文本链接。
- 不要使用多栏内容——截图显示为单一的居中垂直布局。
- 不要使用明亮的强调色——截图显示为严格柔和的双色调。
- 不要使用复杂图像或图标——截图显示为纯文本界面。
- 不要使用厚重的投影或3D效果——截图显示为仅带边框的扁平化表面。
- 不要使用两端对齐——截图显示所有文本均为居中对齐。
- 不要使用按钮作为主要操作方式——截图显示操作以内联链接形式呈现。
- 避免: 营销术语
- 避免: 俏皮语言
- 避免: 过多感叹号
- 避免: 模糊指令
11
System Prompt
该设计是一个极简主义的深色主题系统状态页面。它使用近黑色(#0b1110)背景,搭配高对比度米白色(#f0f0f0)文本,字体为清晰的无衬线字体。布局严格居中,包含一条主要状态信息和一个提供指引的圆角卡片。关键色彩为深色背景与浅色文本,无明亮强调色。关键设计规则:避免复杂布局或多栏、避免明亮强调色或彩色图像、避免使用按钮作为操作方式——仅使用带下划线的文本链接。整体基调宁静、信息明确且纯功能化。