精选 · 开放 · 免费

Reveal

一个用于诊断连接超时的功能型错误状态 UI。

01

设计气质 DNA

一个显示连接健康状况的系统诊断仪表板。

02

色彩

系统状态的实用主义色彩编码（绿色代表成功，红色代表错误，蓝色代表链接）。

03

字体

system-ui

• display60px · 300
• h130px · 400
• body16px · 400
• caption13px · 400

04

间距

垂直间距由各区块的 padding 驱动，而非严格的字体排印节奏。

05

表面 (圆角 / 阴影 / 边线)

无可见边框，仅在页脚上方有一个细微的 1px 分割线。

06

布局

三列网格用于状态图标，两列网格用于说明文字。

07

动效与交互

hover 可交互元素（链接、图标）上的过渡效果。

链接颜色变为更深的蓝色。 · 交互元素上光标变为指针。

08

组件

• button 此错误状态中无可见按钮。
• card 无可见卡片。
• chip 错误代码徽章，药丸形状。
• input 无可见输入框。
• hero 状态展示，包含三个图标，显示连接路径和状态。

09

文案语气与禁用清单

• 语气 技术性、客观且乐于助人。
• 标题风格 大号、轻量级系统字体。
• 按钮文案 用于故障排除的标准蓝色文本链接。

• 不要使用装饰性边框——截图显示的是干净、无边框的布局
• 不要使用高对比度阴影——截图显示的是扁平、无阴影的 UI
• 不要使用自定义衬线体或展示字体——截图显示全程使用 system-ui
• 不要使用深色背景——截图显示的是明亮、高调的设计
• 不要使用复杂动画——截图显示的是静态、功能性的页面
• 不要在容器上使用圆角——截图显示状态区域为直角边缘
• 避免: 情感化语言
• 避免: 超出技术必要性的复杂术语

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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