精選 · 開放 · 免費

Evm Elektramontreal Ca

一個實用的錯誤頁，透過視覺圖示和簡潔文字提供清晰的診斷資訊。

01

設計氣質 DNA

一個清晰、實用的網路錯誤系統狀態儀表板。

02

色彩

高對比的中性色系，搭配用於狀態的語意強調色。

03

字型

system-sans · system-mono

• display60px · 300
• heading30px · 300
• body16px · 400

04

間距

標準的 4px 基礎格線，搭配寬鬆的垂直間距以確保清晰度。

05

表面 (圓角 / 陰影 / 邊線)

狀態圖表區段使用細微的淺灰色漸層背景。

06

版面

三欄水平狀態圖表，在行動裝置上會收合為單欄垂直堆疊。

07

動效與互動

連結 hover 狀態使用標準 CSS 過渡效果。

連結的細微色彩變化。 · 標準的連結導覽。

08

組件

• button 無可見按鈕，僅有連結。
• card 帶有圖示和標籤的三欄狀態圖表。
• chip 小型、藥丸狀的錯誤代碼徽章，帶有淺灰色背景。
• input 無可見的表單輸入欄位。
• hero 大型、輕字重的標題，帶有副文字連結和時間戳記。

09

文案語氣與禁用清單

• 語氣 直接、資訊性且技術精確。
• 標題風格 大型、輕字重且陳述式的。
• 按鈕文案 資訊性連結，而非號召行動按鈕。

• 勿使用裝飾性字體——截圖顯示其採用高度易讀的系統無襯線字體堆疊。
• 勿加入複雜的陰影或景深——截圖顯示其為平面設計，僅有細微的漸層背景。
• 勿使用深色配色方案——截圖顯示其採用明亮的白色背景搭配深灰色文字。
• 勿隱藏錯誤代碼——截圖顯示其以醒目的小型獨立徽章形式，出現在標題旁。
• 勿使用多種強調色——截圖使用有限的色板，其中紅色和綠色嚴格用於狀態圖示。
• 勿建立雜亂的佈局——截圖顯示其具有寬裕的留白和清晰的視覺層級，並配有大型標題。
• 避免: 未加解釋的術語
• 避免: 俏皮或非正式的語言
• 避免: 密集、未分段的長篇文字
• 避免: 模糊的指示
• 避免: 過度使用粗體或強調

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko