精選 · 開放 · 免費
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
文案語氣與禁用清單
- 語氣 技術性且直接。
- 標題風格 清晰的錯誤訊息。
- 按鈕文案 資訊性連結。
- 不使用自訂字型——截圖顯示的是系統字型堆疊。
- 不使用複雜漸層——截圖顯示的是平面色彩。
- 不使用裝飾性陰影——截圖顯示的是最小化 UI。
- 不使用寬廣的色盤——截圖顯示的是有限的功能性顏色。
- 不隨處使用圓角——截圖顯示的大多是銳利邊緣。
- 不使用裝飾性圖示——截圖顯示的是標準功能性圖示。
- 避免: 行銷用語
- 避免: 情緒性語調
- 避免: 模糊的錯誤代碼
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