精選 · 開放 · 免費
Artindumbo
一個用於發掘在地藝術空間的極簡主義編輯器入口。
EditorialPhotographicGalleryCurationClean
01
設計氣質 DNA
藝術畫廊街區指南文化
一個精選的街區藝術指南。
02
色彩
#000000Ink
#B0E0E9BG
#FFFFFFBG soft
#226D7AMuted
rgba(0, 0, 0, 1)Line
高對比的編輯器調色盤,搭配柔和的粉彩背景與純黑的文字排版。
03
字型
geometric-sans · transitional-serif
- display
80px · 700 - heading
36px · 700 - body
16px · 400
使用幾何無襯線體作為粗體展示標題,並採用緊湊的字距調整。 · 使用過渡襯線體作為內文,以維持可讀性並保留經典的編輯器風格。 · 內文行高需寬鬆(1.5 以上)。
04
間距
4px
8px
16px
20px
24px
32px
40px
48px
60px
採用寬鬆的垂直間距(40px-60px)以分隔不同的內容區塊。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用 2px 實心 #000000 邊框來定義區塊與強調。
0px 4px 12px rgba(0,0,0,0.1)
06
版面
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中內容,搭配大型全寬攝影圖片區段與堆疊的文字排版塊。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
載入時的淡入過渡效果
互動元件帶有細微的縮放或透明度變化。 · 立即回應,視覺回饋降至最低。
08
組件
- button 圓角藥丸形狀,白色背景、黑色文字,並帶有彩色狀態點。
- card 無可見邊框的全出血攝影卡片。
- hero 大型全視野攝影圖片,上方覆蓋粗重的、帶有邊框的文字排版。
09
文案語氣與禁用清單
- 語氣 直接、資訊性且極簡。
- 標題風格 粗重、帶有邊框且全大寫,以達到最大衝擊力。
- 按鈕文案 友善且清晰,通常帶有輔助視覺指標,例如圓點。
- 請勿使用纖細或輕薄的字體——截圖顯示為粗重的無襯線體標題。
- 請勿使用複雜的圓角——截圖顯示為嚴格的矩形設計語言,邊角銳利。
- 請勿使用微妙的背景色調——截圖顯示為強烈且鮮明的粉彩藍背景。
- 請勿使用彩色、多彩的按鈕——截圖顯示為乾淨的白色藥丸形按鈕,僅帶有一個彩色圓點。
- 請勿僅依賴文字來強調——截圖使用粗黑邊框來框住關鍵詞彙。
- 請勿使用深色模式美學——截圖顯示為明亮、高調、淺色主題的介面。
- 避免: 繁瑣或華麗的語言
- 避免: 複雜的多層級導覽
- 避免: 雜亂的佈局
- 避免: 過度使用漸層或陰影
- 避免: 鮮豔或霓虹的強調色
- 避免: 沒有呼吸空間的密集文字區塊
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計 DNA 代表一個 Dumbo 藝術的編輯器網站。其美學以明亮的粉彩藍背景 (#B0E0E9) 與純黑 (#000000) 文字排版的對比來定義。字體排版採用粗重的幾何無襯線體作為展示,以及過渡襯線體作為內文,字體尺寸最大可達 80px。關鍵元件包括全出血攝影圖片、白色背景的藥丸形按鈕,以及粗黑邊框的文字區塊。關鍵限制:切勿使用纖細或輕薄的字體;維持高對比的粉彩黑配色;避免使用複雜的圓角或陰影;並保持佈局寬敞,具有寬鬆的垂直節奏。請運用此 DNA 創造清晰、具衝擊力的編輯器佈局,營造出精心策劃且現代的感覺。
en · zh-CN · zh-TW · ja · ko