精選 · 開放 · 免費

Config Figma

大膽前衛的實驗性研討會活動網站，以趣味抽象藝術與高對比暗色模式為特色。

01

設計氣質 DNA

一個充滿趣味的實驗性設計研討會網站，採用粗體排版與高對比抽象藝術。

02

色彩

以高對比暗色模式為基礎，搭配鮮明飽和的圖形強調色。

03

字型

grotesque-sans · monospace

• display80px · 400
• h132px · 400

導覽與 UI 元素中的文字通常採用全大寫形式。 · 較大尺寸的文字會套用極負值的字間距。

04

間距

一致性使用 4px 基礎單位作為內距與間距的基準。

05

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

互動邊框使用 1px solid rgba(255, 255, 255, 0.24)。

06

版面

左側配置文字內容，右側搭配抽象圖形構圖。

07

動效與互動

標準色彩與背景變化採用 150ms 平滑過渡效果。 · 複雜元素的變形過渡效果則使用較長的 500ms。

透過標準 CSS 過渡效果實現色彩變化。 · 標準的指標互動。

08

組件

• button 全大寫文字連結搭配 1px 邊框，或實心反白按鈕。
• card 重疊的抽象圖形區塊作為裝飾元素。
• chip 文字導覽連結採用全大寫樣式。
• input 極簡的平面文字輸入框（非主要特色）。
• hero 分割版面，左側為大型文字錯誤訊息，右側為堆疊的抽象藝術圖形。

09

文案語氣與禁用清單

• 語氣 直接、清晰、不浮誇。
• 標題風格 大型、全大寫或極粗體的無襯線字體聲明。
• 按鈕文案 全大寫文字連結，通常帶有邊框。

• 避免使用柔和低飽和度的色彩組合 — 螢幕截圖顯示的是高對比黑色背景搭配鮮明的青、綠、橙、黃色圖形。
• 避免使用襯線或裝飾性字體 — 螢幕截圖顯示的是簡潔幾何的 grotesque-sans 字體。
• 避免使用柔和陰影 — 螢幕截圖顯示的是平面的重疊圖形元素，無景深效果。
• 避免導覽使用小寫字母 — 螢幕截圖顯示選單項目如 AGENDA 和 SPEAKERS 均為全大寫。
• 避免所有內容置中對齊 — 螢幕截圖顯示的是左對齊文字搭配右對齊圖形的配置。
• 避免使用複雜多步驟表單 — 螢幕截圖顯示的是極簡直接的文字連結與按鈕。
• 避免: 虛軟的行銷文案
• 避免: 過於複雜的句式結構
• 避免: 襯線字體

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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