精選 · 開放 · 免費

Mrmarcelschool

一個為面向消費者的網站所設計的俏皮、插圖式 403 Forbidden 錯誤頁面。

01

設計氣質 DNA

一位友善但堅定的警衛，守護著鎖上的數位閘門

02

色彩

以柔和天藍色為主、光感為主導的單色調調色盤，並搭配深色高對比文字以達到最佳可讀性。

03

字型

humanist-sans

• display36px · 700
• body16px · 400

所有顯示與內文字體皆使用乾淨的無襯線字體

04

間距

以簡潔的 4px 為基礎單位，搭配寬裕的內邊距，營造出元素間清晰的空間分隔。

05

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

使用 1px 細實線、深青綠色作為插圖輪廓。

06

版面

單一置中的垂直欄位佈局，頂部為大型插圖，下方接著文字區塊。

07

動效與互動

08

組件

• hero 一個大型、置中的向量插圖，描繪了一台帶有掛鎖的電腦螢幕，周圍環繞著浮動的幾何形狀與雲狀底座。

09

文案語氣與禁用清單

• 語氣 直接且具資訊性，但透過俏皮的視覺風格加以柔化。
• 標題風格 清晰、大型且粗體的錯誤代碼與狀態聲明。

• 不要使用複雜或多欄佈局——截圖顯示的是簡單的置中垂直堆疊
• 不要使用深色背景——截圖顯示的是淺色、柔和的藍色背景
• 不要使用侵略性的紅色來表示錯誤——截圖使用的是平靜、無威脅性的調色盤
• 不要使用厚重、寫實的圖像——截圖使用的是簡潔的平面向量插圖
• 不要使用複雜的字體排印，包含多種粗細與樣式——截圖使用的是有限、乾淨的無襯線字體系統
• 不要加入複雜的導覽或頁尾——截圖僅顯示核心錯誤內容與裝飾元素
• 避免: 使用過於技術性的術語
• 避免: 製造恐慌感
• 避免: 為錯誤狀態使用侵略性的紅色

11

System Prompt

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