精选 · 开放 · 免费
Giuliatonon It
一个以实用工具为中心的极简主义系统诊断页面，旨在清晰、权威地传达技术状态。
Developer ToolsCleanReference
01
设计气质 DNA
错误诊断清晰系统技术
一个干净、标准的系统诊断面板或实用工具界面。
02
色彩
#2F7BBFAccent
#404040Ink
#FFFFFFBG
#999999Muted
rgba(217, 217, 217, 1)Line
高对比度的中性色搭配功能性语义色彩，以实现清晰的状态传达。
03
字体
system-ui
- display
60px · 400 - h2
30px · 400 - body
16px · 400
使用系统字体堆栈，以实现最大兼容性和原生体验 · 标题保持常规字重（400），营造干净、非侵略性的外观 · 通过大小差异而非字重来维持清晰的层级
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 4px 的一致节奏，具有清晰的章节分隔
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
用于章节分隔的柔和灰色 1px 细边框
0 1px 3px rgba(0,0,0,0.1)
06
布局
960container
12columns
24pxgutter
768 / 1024breakpoints
具有清晰垂直节奏的居中单列布局
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0, 0, 0.2, 1)easing
交互元素上的细微过渡
链接上的颜色过渡 · 标准链接行为
08
组件
- button 带有极简样式的标准系统链接
- card 水平流中的基于图标的状态卡片
- chip 极简的内联状态徽章
- input 不存在
- hero 包含时间戳和参考链接的大文本错误状态
09
文案语气与禁用清单
- 语气 直接、技术性且信息丰富
- 标题风格 清晰、明确的状态声明
- 按钮文案 按用户角色（访客 vs. 所有者）划分的有用指导
- 不要使用装饰性字体——截图显示使用系统字体堆栈
- 不要为主要布局元素添加圆角——截图显示为直角
- 不要为标题使用粗重的字体字重——截图显示全文使用 400 字重
- 不要引入复杂的背景图案——截图显示为纯白色和简单的渐变
- 不要使用鲜艳的、非功能性的强调色——截图显示仅链接和状态使用蓝色
- 不要创建密集、拥挤的布局——截图显示有充足的 60px 垂直内边距
- 避免: 营销语言
- 避免: 情感诉求
- 避免: 不必要的客套话
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个针对无效 SSL 证书的 Cloudflare 错误页面设计。其设计基因是一个极简的、以实用工具为中心的系统诊断界面。主色调为纯净的白色背景（#FFFFFF）搭配深灰色文本（#404040），使用功能性蓝色（#2F7BBF）作为链接，绿色（#9BCA3E）表示成功状态，红色（#BD2426）表示错误。字体完全依赖系统字体堆栈（system-ui、-apple-system 等），通过大小而非字重建立清晰的层级，主标题使用 60px，副标题使用 30px。关键约束包括避免使用装饰性字体、粗重的字重、复杂的背景以及非功能性的强调色。布局是干净的单列居中结构，拥有充足的间距，优先考虑清晰度和对技术状态的即时理解。
en · zh-CN · zh-TW · ja · ko