精選 · 開放 · 免費

Giganticcandy

一個大膽、受都會啟發的糖果品牌電商網站，使用超大尺寸的展示字體和高對比佈局。

01

設計氣質 DNA

滑板場貼紙美學遇上高級糖果品牌。

02

色彩

高對比度，以單色調為主，搭配單一高彩度強調色（番茄紅），並策略性地使用純白與純黑。

03

字型

geometric-sans · humanist-sans

• display96px · 700
• heading48px · 700
• body16px · 400

展示文字與標題使用大寫字母變換。 · 內文設定為 1.8 的寬裕行高以提升可讀性。 · 大型展示文字採用緊湊的字距。

04

間距

垂直節奏基於 4px 格線，較大的區塊則使用寬裕的內距。

05

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

使用主色墨色的 1px 實心邊框。

06

版面

內容採用單欄居中佈局，主視覺圖片則為全出血。

07

動效與互動

hover 狀態的流暢過渡 · 主視覺元素的視差或緩慢淡入

按鈕上細微的透明度變化或色彩反轉。 · 最小反饋，依賴標準的游標變化。

08

組件

• button 實心黑底搭配白色大寫文字，或以墨色勾勒邊框。
• card 產品卡片於乾淨的白色背景上展示產品圖片。
• hero 全視口區塊，搭配大型、有氛圍的攝影背景與大膽、居中的排版。

09

文案語氣與禁用清單

• 語氣 俏皮、大膽，略帶不羈。
• 標題風格 簡短、有力，且始終使用大寫。
• 按鈕文案 直接且以行動為導向，常用「購物」或「滾動」。

• 不要使用細小、精緻的排版 — 畫面截圖顯示的是大型、粗體的展示文字。
• 不要使用柔和、粉彩色的色盤 — 畫面截圖顯示的是高對比的黑、白、紅橙配色。
• 不要使用複雜的多欄佈局 — 畫面截圖顯示的是簡潔的單欄居中佈局。
• 不要使用圓潤、泡泡狀的形狀 — 畫面截圖顯示的是銳利、以矩形為主的元素。
• 不要使用微妙、隱藏的導覽 — 畫面截圖顯示的是清晰、固定的頁首與顯眼的連結。
• 不要使用襯線字體作為標題 — 當前畫面截圖顯示的是幾何與 grotesque 無襯線字體。
• 避免: 正式或企業化的語言
• 避免: 微妙或低調的主張
• 避免: 細小、低調的排版

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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