精選 · 開放 · 免費
Transformfestival
一個國際表演藝術節慶,具備大膽的編輯式字體排印與電影感攝影。
EditorialBold TypographyPhotographicCurationRestraint
01
設計氣質 DNA
表演藝術節慶藝術國際性社群
大膽的戲劇海報與簡潔的編輯雜誌相遇。
02
色彩
#FB00C2Accent
#000000Ink
#F4EDE9BG
#767676Muted
rgba(0, 0, 0, 0.1)Line
高對比:溫潤的米白色畫布上,使用深邃的墨黑,並以單一電光粉紅色作為強調。
03
字型
geometric-sans
- display
80px · 900 - heading
56px · 800 - subhead
24px · 800 - body
18px · 400
強調與導覽連結使用全大寫。 · 大型展示文字使用緊湊字距以維持衝擊力。 · 保持展示文字與內文之間的高字重對比。
04
間距
4px
8px
16px
24px
32px
48px
64px
80px
96px
透過一致的內距與間距倍數,建立清晰的垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
極少使用邊框,主要依賴強烈的字體排印與影像對比來區隔內容。
0 4px 24px rgba(0, 0, 0, 0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全幅首頁橫幅後接多欄卡片網格,引導至大膽的字體排印區塊。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素的平滑色彩過渡。 · 按鈕與卡片在懸停時的細微變換。
按鈕與連結在懸停時立即變換顏色或背景。 · 輕微的變換或縮放效果提供觸覺回饋。
08
組件
- button 高對比的填充矩形,內含全大寫文字。
- card 簡潔、無邊框的卡片,配有醒目影像、大膽標題,以及用於導覽的簡潔箭頭圖示。
- chip 用於導覽或小型標籤,通常為全大寫。
- input 簡潔的文字輸入欄位,邊框極簡。
- hero 全幅電影感攝影,疊加巨大、粗重的字體排印。
09
文案語氣與禁用清單
- 語氣 自信、具衝擊力且直接。
- 標題風格 簡短有力的聲明,以巨大、粗重的字體排印呈現。
- 按鈕文案 清晰、全大寫的指令,在背景中脫穎而出。
- 不要在主要 UI 元素上使用圓角——截圖顯示的是銳利、矩形的形狀。
- 不要使用多個相互競爭的強調色——截圖顯示了清晰的層級,以粉紅與紫色為主導。
- 不要在標題上使用輕盈、纖細的字重——截圖顯示僅使用粗重、大膽的字重。
- 不要使用比例寬鬆或不規則的無襯線字體——截圖顯示的是非常幾何、緊湊的字體。
- 不要使用複雜、多層次的陰影——截圖依賴平面色彩與銳利的邊緣來定義輪廓。
- 不要使用灰色作為主要背景——截圖顯示的是溫潤的米白色(#F4EDE9)。
- 避免: 模糊的語言
- 避免: 細微或裝飾性的元素
- 避免: 低對比的色彩組合
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個大膽的編輯式與活動網站,用於國際表演藝術節慶。設計以巨大的、粗重的黑色(#000000)字體排印為主導,置於溫潤的米白色背景(#F4EDE9)之上。充滿活力的電光粉紅(#FB00C2)作為號召行動的主要強調色,而深紫色(#340068)則用於大型背景區塊與次要按鈕。字體排印是簡潔的幾何無襯線體,同時使用全大寫與句首大寫。佈局寬敞,運用全幅電影感攝影與簡潔的四欄網格來呈現內容。關鍵限制:避免按鈕使用圓角、避免使用多個相互競爭的明亮強調色、避免使用輕盈或裝飾性的字重。
en · zh-CN · zh-TW · ja · ko