精選 · 開放 · 免費

Master & Dynamic

Master & Dynamic 透過簡潔、影像驅動的電商網站，以克制、工業感的美學呈現其高端音訊硬體產品。

01

設計氣質 DNA

一個展示精工細作音訊硬體的高端設計藝廊

02

色彩

極簡的黑、白、灰色調，讓高品質的產品攝影主導視覺體驗

03

字型

grotesque-sans · geometric-sans

• display52px · 400
• heading41px · 700
• body-lg20px · 400
• body18px · 400
• body-sm16px · 400

導覽列與類別標籤使用大寫字母變換 · 全文採用緊湊字距（負向字距調整） · 單行文字元素的行高與字體大小一致

04

間距

以 4px 為基準，主要倍數為 4倍 (16px)、6倍 (24px) 與 12倍 (48px)

05

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

1px solid rgba(74, 74, 74, 0.12)

rgba(0, 0, 0, 0.5) 0px 5px 15px 0px

06

版面

全寬主視覺影像搭配置中文字覆蓋層；三欄式功能網格；內容對齊的文字區塊

07

動效與互動

選單與覆蓋層互動使用淡入淡出過渡 · 互動元素使用平滑的顏色與 background-size 過渡 · 懸停狀態變化細膩，採用150毫秒時長

背景顏色、文字顏色、box-shadow 與邊框過渡，時長150毫秒，使用 ease-in-out · 細微的縮放或透明度回饋

08

組件

• button 膠囊形按鈕，深色填充搭配白色文字，或深色邊框的外框式設計；文字採大寫
• card 極簡卡片，採邊到邊的產品攝影，圖像式卡片無可見邊框或陰影
• chip 小型膠囊形篩選器，帶有邊框與大寫文字
• input 簡潔的文字輸入框，帶有細微底線邊框，樣式極簡
• hero 全出血高品質產品攝影，文字覆蓋層在影像上左對齊

09

文案語氣與禁用清單

• 語氣 自信、高端且簡潔；聚焦於產品特性與品牌哲學
• 標題風格 直接的產品名稱與效益陳述，常以大寫或緊湊字距的展示字體呈現
• 按鈕文案 簡單、行動導向的動詞，如「立即購買」、「進一步了解」、「繼續」，置於膠囊形按鈕中

• 勿使用裝飾性襯線體——截圖顯示所有展示與內文均採用簡潔的怪誕風/幾何無襯線體系統
• 勿使用高飽和度的強調色——截圖顯示嚴格的單色調色盤，僅包含黑、白與灰色
• 勿在卡片上使用厚重的陰影或邊框——截圖顯示邊到邊的產品攝影，表面處理極簡
• 勿使用圓潤或俏皮的圓角半徑——截圖顯示一致的緊湊圓角 (4-8px) 或膠囊形狀 (9999px)
• 勿使用寬鬆的字距——截圖顯示所有文字尺寸均採用緊湊的負向字距
• 勿以文字擠滿版面——截圖顯示充裕的留白與大型主視覺影像主導視覺層次
• 勿使用多種字重——截圖顯示主要使用 Regular (400) 字重，僅極少使用 Bold (700)
• 勿使用裝飾性背景——截圖顯示純白、黑或灰色背景，讓產品攝影提供視覺趣味
• 避免: 過度使用技術術語
• 避免: 銷售式的緊迫感用語
• 避免: 裝飾性字體
• 避免: 文字後方繁雜的背景
• 避免: 圓潤友善的美學風格
• 避免: 霓虹或高飽和度的強調色

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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