精選 · 開放 · 免費

Markaware Jp

一個精緻的日系時尚電子商務體驗，結合畫廊式攝影與克制的排版。

01

設計氣質 DNA

一個寧靜的高端紡織品畫廊

02

色彩

中性、高調的調色盤，讓產品攝影提供所有色彩與質感。

03

字型

geometric-sans

• display48px · 400
• headline32px · 400
• body14px · 400

所有文字使用一致的幾何無襯線字體（ABCDiatype），字重 400。 · 品牌標誌採用寬間距大寫字距設定。 · 內文使用稍寬的字距（0.4px）以提升可讀性。

04

間距

透過主視覺圖片與內容區塊之間充裕的 padding（398px 至 70px）來維持垂直節奏。

05

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

所有互動元素與容器邊界使用 1px solid black，創造銳利的結構定義。

rgba(0,0,0,0.2) 0px 0px 18px 0px · rgba(0,0,0,0.3) 0px 12px 60px 0px · rgba(0,0,0,0.05) 0px 0px 2px 1px

06

版面

全出血主視覺圖片搭配四欄產品網格，維持 uniform 20px 間距。

07

動效與互動

覆蓋層（如「保持聯繫」彈出視窗）使用流暢的 opacity 與 visibility 過渡動畫（0.5 秒）。 · UI 元素揭示使用寬度與 max-width 過渡動畫（0.4 秒），搭配標準 cubic-bezier。

微妙的色彩或 opacity 變化，維持網站整體的克制感。 · 透過頁面過渡或彈出視窗揭示提供即時反饋。

08

組件

• button 膠囊形輪廓按鈕，黑色文字與透明背景，使用 100px border-radius。
• card 極簡卡片，包含大型產品圖片與下方小型左對齊標題，由淺色邊框分隔。
• chip 小型色票（黑色、米色、炭灰色、白色），用於產品變體選擇。
• input 簡潔的文字輸入欄位，帶有最小邊框，通常伴隨黑色底線或邊框。
• hero 桌面端採用分割式主視覺，圖片佔寬度約 60%，行動端則變為全寬。

09

文案語氣與禁用清單

• 語氣 寧靜、精緻且具資訊性，反映對材質品質與工藝的專注。
• 標題風格 清晰、具描述性且常帶技術性（例如「有機羊毛 2/80 熱帶」）。
• 按鈕文案 直接且功能性（例如「選購」、「加入郵件列表」、「閱讀更多」）。

• 不要使用高彩度強調色——調色盤嚴格單色且中性。
• 不要使用粗體字重——所有可見文字字重均為 400。
• 不要使用複雜的裝飾性背景——設計依賴於乾淨的攝影與留白。
• 不要在主要 UI 元素上使用圓角——網站在大多數容器上使用銳角，僅將膠囊形用於按鈕。
• 不要雜亂介面——佈局在所有元素之間保持充裕且有意圖的間距。
• 不要使用繁雜或多色的調色盤——產品色彩與攝影是唯一的色彩來源。
• 避免: 響亮的行銷術語
• 避免: 激進的銷售用語
• 避免: 過度使用驚嘆號
• 避免: 模糊、華麗而分散材質規格注意力的描述

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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