精选 · 开放 · 免费
Chirpley
标准 Cloudflare 连接超时错误页面，提供诊断信息。
Developer ToolsCleanTooling
01
设计气质 DNA
错误技术性信息性诊断性
技术支持台的状态页面。
02
色彩
#404040Ink
#313131Ink soft
#FFFFFFBG
#D9D9D9BG soft
#EBEBEBBG quiet
#999999Muted
rgba(64,64,64,1)Line
实用主义调色板，采用功能色表示状态。
03
字体
system-sans
- display
60px · 400 - heading
30px · 400 - body
16px · 400
使用系统字体栈以确保广泛兼容性。 · 使用标准字重（400、600）以建立清晰的层次结构。 · 保持一致的行高以提升可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 16px 基准尺寸的标准 4px 网格。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 20px
pill · 999px
1px solid #404040
无
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
用于错误状态的简约单列布局。
07
动效与交互
150msmicro
400mssmall
800msmedium
cubic-bezier(0, 0, 0.2, 1)easing
交互元素上的标准 hover 过渡效果。
链接上光标变为指针。 · 标准浏览器行为。
08
组件
- button 不适用。
- card 带有标签和状态指示器的状态图标行。
- chip 错误代码徽章。
- input 不适用。
- hero 包含时间戳的大型错误标题。
09
文案语气与禁用清单
- 语气 技术性且直接。
- 标题风格 清晰的错误信息。
- 按钮文案 信息性链接。
- 勿使用自定义字体 —— 截图显示使用系统字体栈。
- 勿使用复杂渐变 —— 截图显示使用纯色。
- 勿使用装饰性阴影 —— 截图显示为极简界面。
- 勿使用宽色谱 —— 截图显示为有限的功能性色彩。
- 勿到处使用圆角 —— 截图显示多为直角。
- 勿使用装饰性图标 —— 截图显示为标准功能图标。
- 避免: 营销用语
- 避免: 情感化语气
- 避免: 模糊的错误代码
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个标准 Cloudflare 错误页面，采用实用主义设计，专注于清晰沟通。布局为简单、单列的响应式设计。关键色彩为中性色（#404040, #999999, #D9D9D9），辅以功能强调色（链接用 #2F7BBF，成功状态用 #99CA3E，错误状态用 #BD2426）。字体依赖系统字体栈，并使用标准字重建立层次。关键禁忌：不引入装饰元素，避免自定义字体，不使用宽色谱。设计优先考虑可读性和诊断清晰度，而非品牌表达。
en · zh-CN · zh-TW · ja · ko