精選 · 開放 · 免費

Magic Spoon

一個大膽、俏皮的 DTC 麥片品牌，運用深紫色調與強烈的排版，將懷舊情懷與現代健康理念相連結。

01

設計氣質 DNA

一個為注重健康的成年人重新構思的、充滿活力與懷舊感的麥片品牌。

02

色彩

在乾淨的白色背景上建立高對比的紫色識別系統，並以產品攝影的鮮明色彩作為點綴。

03

字型

geometric-sans · humanist-sans

• display48px · 900
• heading24px · 700
• body16px · 400
• caption13px · 400

排版主要使用 Poppins 作為展示與內文字型，Mabry 用於品牌標誌元素。 · 標題與行動呼籲按鈕的文字大量轉換為大寫。 · 內文採用中性的 400 字重，以確保在鮮明的色盤上具有良好的可讀性。

04

間距

標準的 4px 基礎網格，導覽區間距較緊湊，首圖區塊則留有寬裕的 padding。

05

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

1px solid rgba(63,7,145,0.2)

rgba(0, 0, 0, 0.1) 0px 20px 60px 0px · rgba(0, 0, 0, 0.08) 0px 15px 50px 0px · rgba(0, 0, 0, 0.25) 0px 5px 15px 0px

06

版面

標準電商結構：公告列、固定式導覽、全寬分割式首圖區塊，後接產品網格。

07

動效與互動

彈窗（如 Cookie 同意視窗）採用流暢的淡入與向上滑動效果。 · 首圖區塊的產品影像採用浮動、類似視差的運動效果。 · 按鈕 hover 狀態時，背景與顏色立即過渡。

按鈕色彩反轉或細微的透明度變化，並伴隨快速的 0.15s 背景過渡。 · 互動元素（如「BUILD YOUR OWN BUNDLE」）呈現視覺下沉或縮放變形。

08

組件

• button 藥丸形按鈕，採用實心紫色填充或透明背景搭配紫色邊框，並使用大寫、粗體排版。
• card 產品卡片具有柔和的圓角（28px）和細微陰影，通常包含浮動的產品影像。
• chip 小型、圓潤的藥丸形徽章，用於「暢銷」等標籤，採用實色背景填充。
• input 簡潔的矩形輸入欄位，邊框細微，聚焦時過渡至高亮狀態。
• hero 全寬分割式佈局，一側為大尺寸排版標題，另一側為浮動且動態定位的產品影像。

09

文案語氣與禁用清單

• 語氣 自信、俏皮且注重健康。
• 標題風格 大膽、大寫且具衝擊力，常使用超大字體大小以主導視覺層級。
• 按鈕文案 以行動為導向且具命令感，以全大寫藥丸形按鈕呈現。

• 不要使用精緻的襯線字體——截圖顯示的是粗體的幾何與人文無襯線字體。
• 不要將佈局扁平化為嚴格的網格——截圖顯示了重疊的浮動產品影像。
• 不要使用單色或柔和的配色方案——截圖顯示了鮮明的紫色與多彩的產品照片。
• 不要依賴小寫的句式大小寫作為標題——截圖顯示了強烈的大寫文字轉換。
• 不要為互動元素使用尖銳、未圓角的角——截圖顯示了寬裕的藥丸形狀。
• 不要在主要導覽中避免使用顏色——截圖顯示了深色背景搭配鮮明的文字與點綴色。
• 避免: 小巧、精緻的襯線字型。
• 避免: 柔和、單色或完全灰階的色彩方案。
• 避免: 缺乏重疊或浮動元素的嚴格網格佈局。
• 避免: 低調、不張揚的品牌形象。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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