精選 · 開放 · 免費

Peak Design

一個視覺導向、以產品為核心的品牌，將粗獷的戶外美學與精緻的極簡設計相融合。

01

設計氣質 DNA

一本高端戶外裝備型錄，結合了現代設計作品集。

02

色彩

攝影是主要的色彩來源；UI 提供一個由深淺灰色組成的中性、高對比框架。

03

字型

geometric-sans · humanist-sans · monospace

• display40px · 700
• headline32px · 700
• body16px · 400

按鈕標籤與導覽連結使用大寫與字距調整。 · 大型展示標題使用緊湊的負字距。 · 維持墨色與背景元素之間的高對比度。

04

間距

整體使用統一的 4px 基礎網格進行填充與間距，確保版面結構化。

05

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

極簡的 1px 實線邊框，使用主要墨色並設定低透明度，以實現微妙的分隔。

0px 0px 4px 0px rgba(0, 0, 0, 0.04)

06

版面

全出血的攝影主視覺，搭配置中內容與用於產品列表的 12 欄網格。

07

動效與互動

覆層與彈窗使用平滑的 opacity 與 visibility 過渡。 · 互動元素在 hover 與 click 時使用快速的 transform（scale）過渡。

細微的 opacity 變化或 background-color 轉換（0.2s cubic-bezier）。 · 立即的 transform scale（0.15s ease-out），隨後執行操作。

08

組件

• button 高對比的實色背景（白色或深色），搭配大寫文字與寬裕的填充（8px 16px 或 12px 24px）。
• card 乾淨、無邊框的容器，其中產品圖片是主要元素，輔以極簡的排版。
• chip 膠囊形狀的元素（border-radius: 32px 至 9999px），用於分類或標籤。
• input 簡潔的矩形輸入框，帶有 1px 實線邊框與 4px 的 border-radius。
• hero 全出血、高品質的攝影背景，搭配大型置中的展示文字與顯眼的行動呼籲按鈕。

09

文案語氣與禁用清單

• 語氣 自信、直接且高端。
• 標題風格 粗體、大寫且高對比。
• 按鈕文案 以行動為導向、大寫且高度易讀。

• 不要使用多彩的漸層背景——網站依賴乾淨的實色（#FBFDFC）或全出血攝影。
• 不要使用裝飾性的襯線字體——排版嚴格使用幾何與人文無襯線體。
• 不要使用過度圓潤、俏皮的組件——按鈕與輸入框使用微妙的 4px 至 8px border-radius。
• 不要使用小而低對比度的文字作為行動呼籲——標題與按鈕需粗體、大寫且高度易讀。
• 不要使用複雜、多層次的陰影——層級感透過單一、極為微妙的 box-shadow 來處理。
• 不要使用繁忙、雜亂的版面——每個元素都需有寬裕的呼吸空間（16px 至 24px 的間距）。
• 避免: 過度使用明亮、人工的強調色。
• 避免: 與攝影競爭的雜亂版面。
• 避免: 感覺過於俏皮的圓潤、「泡泡感」UI 元素。
• 避免: 缺乏衝擊力的小而精緻的字體。
• 避免: 複雜的漸層或裝飾性背景圖案。
• 避免: 不一致的填充或間距。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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