精选 · 开放 · 免费

Evm Elektramontreal Ca

一个实用的错误页面，通过视觉图标和简洁文本提供清晰的诊断信息。

01

设计气质 DNA

一个清晰、实用的网络错误系统状态仪表板。

02

色彩

高对比度的中性色板，搭配用于状态标识的语义色彩点缀。

03

字体

system-sans · system-mono

• display60px · 300
• heading30px · 300
• body16px · 400

04

间距

基于标准的 4px 基础网格，使用充裕的垂直间距以确保清晰度。

05

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

状态图表区域采用细微的浅灰色渐变背景。

06

布局

三栏水平状态图表，在移动端变为单栏垂直堆叠。

07

动效与交互

用于链接 hover 状态的标准 CSS transitions。

链接上细微的颜色变化。 · 标准链接导航。

08

组件

• button 无可见按钮，仅使用链接。
• card 三栏状态图表，包含图标和标签。
• chip 小型、药丸状的错误代码徽章，带有浅灰色背景。
• input 无可见表单输入。
• hero 大字号、轻字重的标题，配有副文本链接和时间戳。

09

文案语气与禁用清单

• 语气 直接、信息丰富且技术精确。
• 标题风格 大号、轻字重、陈述式。
• 按钮文案 信息性链接，而非行动号召按钮。

• 不要使用装饰性字体——截图显示的是高可读性系统无衬线字体栈。
• 不要添加复杂的阴影或景深——截图显示的是扁平化设计，仅有细微的渐变背景。
• 不要使用深色方案——截图显示的是明亮的白色背景配深灰色文本。
• 不要隐藏错误代码——截图显示其以小型、独特的徽章形式突出显示在标题旁。
• 不要使用多种强调色——截图使用的是受限的调色板，红/绿色仅用于状态图标。
• 不要创建杂乱的布局——截图显示有充裕的留白和清晰的视觉层级，配有大标题。
• 避免: 无解释的术语
• 避免: 俏皮或非正式的语言
• 避免: 密集、无分隔的文本段落
• 避免: 模糊的说明
• 避免: 过度使用粗体或强调

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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