精選 · 開放 · 免費
Reveal
用於診斷連線逾時的功能性錯誤狀態介面。
Developer ToolsReferenceCleanUtilitySystem UI
01
設計氣質 DNA
錯誤狀態診斷效用基礎架構
顯示連線健康狀態的系統診斷儀表板。
02
色彩
#2F7BBFAccent
#2F2F2FInk
#404040Ink soft
#FFFFFFBG
#EBEBEBBG soft
#D9D9D9BG quiet
#999999Muted
rgba(64,64,64,1)Line
以實用主義色彩編碼表示系統狀態（綠色代表成功、紅色代表錯誤、藍色代表連結）。
03
字型
system-ui
- display
60px · 300 - h1
30px · 400 - body
16px · 400 - caption
13px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
垂直間距由區塊的 padding 驅動，而非嚴格的排版節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 20px
除頁尾上方的細微 1px 分隔線外，無可見邊框。
06
版面
960container
12columns
24pxgutter
768 / 1024breakpoints
狀態圖示採用三欄網格，說明文字採用兩欄網格。
07
動效與互動
150msmicro
150mssmall
150msmedium
cubic-bezier(0, 0, 0.2, 1)easing
可懸停元素（連結、圖示）的過渡效果。
連結懸停時顏色變為較深的藍色。 · 互動元素上的游標變為指標。
08
組件
- button 此錯誤狀態中無可見按鈕。
- card 無可見卡片。
- chip 藥丸形狀的錯誤代碼徽章。
- input 無可見輸入框。
- hero 狀態顯示區，含三個圖示，呈現連線路徑與狀態。
09
文案語氣與禁用清單
- 語氣 技術性、客觀且實用。
- 標題風格 大號、輕字重的系統字體。
- 按鈕文案 用於故障排除的標準藍色文字連結。
- 勿使用裝飾性邊框 —— 截圖顯示簡潔、無邊框的版面
- 勿使用高對比陰影 —— 截圖顯示扁平、無陰影的介面
- 勿使用自訂襯線或展示字型 —— 截圖顯示全面使用 system-ui
- 勿使用深色背景 —— 截圖顯示明亮、高明度的設計
- 勿使用複雜動畫 —— 截圖顯示靜態的功能性頁面
- 勿在容器上使用圓角 —— 截圖顯示狀態區塊為方形邊緣
- 避免: 情緒化用語
- 避免: 超出技術必要性的複雜術語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是 reveal.co 的功能性系統錯誤頁面（Cloudflare 522），採用標準 system-ui 字型堆疊以實現最大清晰度。色盤具實用性：白色背景、淺灰色狀態區域，以及高飽和度的狀態色（綠色代表成功、紅色代表錯誤、藍色代表連結）。版面為簡單的響應式網格，內容置中。主要設計限制：避免裝飾性元素、使用系統字型堆疊、保持狀態色清晰以便快速診斷，並維持簡潔、無邊框的美學。首要目標是清晰傳達連線失敗，並為訪客與網站擁有者提供可操作的步驟。
en · zh-CN · zh-TW · ja · ko