精選 · 開放 · 免費
Dialitdown Co Nz
一個奇想風格、以角色為主軸的編輯網站，透過俏皮插畫和溫暖色調，推廣正向的網路行為。
PlayfulEditorialConsumerWarmCuration
01
設計氣質 DNA
友善插畫編輯風格網路禮儀奇想
一本風格獨特、充滿復古趣味的數位禮儀指南，以插畫形式呈現，親切而生動。
02
色彩
#222222Ink
#A3F7F7BG
#F6F4EABG soft
rgba(34,34,34,1.0)Line
溫暖、友善且具插畫感，避免使用刺眼的對比或過於強烈的霓虹色調。
03
字型
transitional-serif · humanist-sans
- display
68px · 400 - body
16px · 400
展示文字使用對比度高的過渡襯線字體。 · 內文使用乾淨的系統介面字體或人文主義無襯線字體。 · 保持排版乾淨易讀，搭配寬裕的行高。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
各區塊之間及內容區塊內部採用寬裕的垂直間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央對齊的單欄內容，媒體或海報部分則轉為網格佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
捲動時淡入 · 懸停狀態過渡 · 簡潔的角色動畫
按鈕與互動元素採用顏色反轉或細微的縮放變化。 · 啟用狀態帶有輕微的向下位移或顏色轉變。
08
組件
- button 膠囊形按鈕，搭配高對比度文字。
- card 海報風格卡片，採用純色背景、粗體字型及中央插畫。
- chip 橢圓形標籤，用於標籤或關鍵字。
- input 簡約的文字輸入欄位，底部帶有細邊框。
- hero 大型中央標題，上方或下方配有醒目的角色插畫。
09
文案語氣與禁用清單
- 語氣 友善、溫暖且具鼓勵性。
- 標題風格 大膽的插畫式陳述，結合文字與俏皮視覺元素。
- 按鈕文案 直接且具吸引力，常使用標籤或簡短語句。
- 請勿使用深色模式——網站依賴明亮、多彩的背景。
- 請勿使用刺眼的霓虹色——色調是柔和、溫暖且友善的。
- 請勿在標題中使用厚重的無襯線字體——展示文字應使用過渡襯線字體。
- 請勿使用複雜的多欄網格——佈局主要為中央對齊的單欄形式。
- 請勿使用寫實攝影——網站採用自訂角色插畫。
- 請勿使用緊湊的行距——寬裕的留白和行高是關鍵。
- 避免: 強烈的語言
- 避免: 複雜的術語
- 避免: 密集的文字區塊
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個友善、趣味盎然的編輯風格網站，推廣正向的數位行為。採用明亮柔和的背景色，如 #A3F7F7 和 #F6F4EA，搭配深墨色 (#222222)。主要展示字體應為過渡襯線字體，內文則使用乾淨的人文主義無襯線字體。融入自訂的奇想角色插畫作為核心視覺主題。避免使用深色模式、刺眼的霓虹色或過於複雜的網格；專注於寬裕的留白和中央對齊的單欄佈局，以突顯俏皮的字型和插畫。語氣應溫暖且具鼓勵性，避免使用強烈的語言或密集的文字區塊。確保所有互動元素具有流暢的過渡效果和清晰的懸停狀態。
en · zh-CN · zh-TW · ja · ko