精選 · 開放 · 免費
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
文案語氣與禁用清單
- 語氣 直接、技術性且具資訊性
- 標題風格 清晰、明確的狀態聲明
- 按鈕文案 實用指引，按使用者角色（訪客與擁有者）區分
- 不要使用裝飾性字型 — 截圖顯示使用 system-ui 字型堆疊
- 不要為主要版面元素添加圓角 — 截圖顯示為銳利邊緣
- 不要為標題使用粗體字重 — 截圖顯示全程使用 400 字重
- 不要引入複雜的背景圖案 — 截圖顯示為純白與簡單漸層
- 不要使用鮮豔、非功能性的強調色 — 截圖顯示僅用於連結與狀態的藍色
- 不要創造擁擠、密集的版面 — 截圖顯示寬裕的 60px 垂直內距
- 避免: 行銷語言
- 避免: 情感訴求
- 避免: 不必要的客套話
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個針對無效 SSL 憑證的 Cloudflare 錯誤頁面設計。其設計 DNA 是一個極簡、以實用為導向的系統診斷介面。主要色彩為純淨白色背景（#FFFFFF）搭配深灰色文字（#404040），使用功能性的藍色（#2F7BBF）代表連結，綠色（#9BCA3E）代表成功狀態，紅色（#BD2426）代表錯誤。字體完全依賴系統字型堆疊（system-ui、-apple-system 等），並透過尺寸而非字重建立清晰層級，主標題使用 60px，副標題使用 30px。關鍵限制包括避免裝飾性字型、粗體字重、複雜背景與非功能性的強調色。版面採用乾淨的單欄置中結構，搭配寬裕的間距，優先考慮清晰度與技術狀態的立即理解。
en · zh-CN · zh-TW · ja · ko