精選 · 開放 · 免費

Films53 12

一個極簡風格的電影作品年表網站，在純黑的基底上運用粗獷的排版。

01

設計氣質 DNA

以極簡、現代的排版方式呈現的電影作品年表。

02

色彩

極簡、高對比的單色調，以營造最大的電影感衝擊。

03

字型

grotesque-sans

• display200px · 300
• headline68px · 300
• body14px · 300

所有文字皆為大寫 · 主要字重為輕體 (300) · 電影標題尺寸龐大且在視覺上佔主導地位

04

間距

不對稱且寬敞，運用充足的留白來區隔版式元素。

05

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

無可見邊框；完全依賴純粹的空間對比。

06

版面

自由流動的版式網格，標題散佈其間。

07

動效與互動

懸停時微妙的透明度或變形過渡效果。

游標變為指針；可能伴隨微妙的色彩或透明度變化。 · 立即導航至電影詳情頁。

08

組件

• button 無邊框或背景的簡單文字連結。
• card 無；佈局純粹由文字構成。
• chip 無。
• input 無。
• hero 位於視口頂端、橫跨整個螢幕的巨型標誌。

09

文案語氣與禁用清單

• 語氣 正式、檔案風格且具電影感。
• 標題風格 大寫、輕字重且字間距寬鬆。
• 按鈕文案 無傳統按鈕樣式的極簡文字連結。

• 不要使用粗體字重——截圖顯示僅使用輕體 (300) 排版。
• 不要添加投影或 3D 效果——截圖顯示的是扁平、高對比的設計。
• 不要使用明亮的強調色——截圖顯示的是嚴格的單色調色板，僅包含黑色與淡粉白色。
• 不要使用圓角或基於卡片的佈局——截圖顯示的是銳利、邊對邊的文字元素。
• 不要使用兩端對齊的文字對齊方式——截圖顯示的是混合了左對齊與右對齊，以營造動態感。
• 不要用圖示讓介面變得雜亂——截圖顯示幾乎純粹由文字構成的導航。
• 避免: 不使用粗體字重
• 避免: 不添加裝飾性邊框或陰影
• 避免: 不使用多種色彩或漸層

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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