精選 · 開放 · 免費
Editbrandstudio
一個俏皮、帶有插畫的 403 錯誤頁面，使用柔和的 teal 色彩與奇想風格的線條藝術。
PlayfulConsumerCalmFriendlyGeometric
01
設計氣質 DNA
奇想輕鬆 welcoming
一幅友善的天空主題插畫。
02
色彩
#000000Ink
#B0E0E9BG
#226D7AMuted
rgba(0,0,0,1)Line
以柔和、令人平靜的 teal 為基底，搭配高對比的黑色文字。
03
字型
transitional-serif · humanist-sans · monospace
- display
36px · 700 - body
16px · 400
04
間距
4px
8px
16px
20px
24px
32px
40px
60px
採用充裕的垂直 padding，並限制水平間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
無可見邊框。
06
版面
1280container
12columns
20pxgutter
768 / 1024breakpoints
單一置中欄位，插畫與文字上下堆疊。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
在 hover/focus 時觸發隱含的轉場效果。
隱含的轉場效果。 · 隱含的轉場效果。
08
組件
- button 未使用。
- card 未使用。
- chip 未使用。
- input 未使用。
- hero 全寬的插畫 hero 區塊，包含一個大型中央圖形與裝飾性的背景元素。
09
文案語氣與禁用清單
- 語氣 友善且樂於助人。
- 標題風格 清晰、直接的錯誤陳述。
- 按鈕文案 不適用
- 不要使用深色模式——截圖顯示的是淺藍色天空主題
- 不要使用生硬、技術性的字體——截圖使用的是友善的過渡襯線字體與人文主義無襯線字體
- 不要使用高彩度的強調色——截圖依賴的是單色系 teal 調色盤
- 不要使用複雜的多欄佈局——截圖顯示的是簡單、置中的單欄佈局
- 不要使用厚重的投影或景深效果——截圖顯示的是扁平的線條藝術插畫
- 不要使用密集、文字量過多的錯誤訊息——截圖使用的是簡短、友善的句子
- 避免: 生硬的技術術語
- 避免: 冗長密集的段落
- 避免: 侵略性的錯誤訊息
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為品牌工作室設計的、面向消費者的俏皮 403 錯誤頁面。它透過使用淺 teal 背景（#B0E0E9）和柔和的線條藝術插畫，來營造友善與奇想的氛圍。字體方面，標題採用過渡襯線字體，內文則使用人文主義無襯線字體，以保持平易近人的語氣。關鍵色彩是 teal 背景與黑色/深 teal 墨水。務必注意：不要使用深色模式（網站明確採用明亮、通風的風格），不要使用嚴格、過度依賴網格的佈局（它是單一置中欄位），也不要使用具侵略性的紅色錯誤狀態（它保持平靜與友善）。
en · zh-CN · zh-TW · ja · ko