精選 · 開放 · 免費
Athletic Brewing
一個大膽、靈感源於自然的電子商務體驗，專為高級無酒精啤酒而設計。
beveragedtc
01
設計氣質 DNA
無酒精啤酒運動風品質注重健康活躍
一個高級的戶外生活風格品牌，恰好釀造啤酒
02
色彩
#EBD923Accent
#003A5DInk
#FFFFFFBG
#414042Muted
rgba(0,58,93,1.0)Line
深海軍藍與明亮黃色的高對比搭配，用於大膽、充滿活力的溝通。
03
字型
condensed-sans · geometric-sans
- display
64px · 900 - display-sm
40px · 900 - body
16px · 400 - caption
12px · 400
所有標題使用全形大寫 · 元素間保持充足的垂直間距 · 確保文字與背景之間的高對比度
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬敞、空氣感的間距，讓產品得以呼吸。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 16px
lg · 16px
pill · 10000px
1px solid rgb(0, 58, 93)
rgba(0, 0, 0, 0.08) 0px 4px 16px 0px · rgba(0, 0, 0, 0.04) 0px 2px 10px 5px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
內容居中，配有顯眼的頂部導覽列和全寬度的促銷橫幅。
07
動效與互動
100msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
100毫秒的快速轉場，用於懸停狀態 · 200毫秒的緩入緩出，用於顯示/隱藏變化 · 300毫秒的轉場，用於背景顏色變化
互動元素上的微小色彩變化或陰影增強。 · 按鈕上的微互動提供即時回饋。
08
組件
- button 高對比的主要按鈕（黃色背景，海軍藍文字），採用膠囊形圓角。
- card 以圖片為主的產品卡片，帶有清晰的標籤（例如：「暢銷品」）。
- chip 用於產品屬性的小型膠囊形標籤。
- input 乾淨、簡約的表單欄位，帶有標準邊框樣式。
- hero 大型的分割版面或全版出血區塊，配以大膽的字型和高品質攝影圖片。
09
文案語氣與禁用清單
- 語氣 自信、積極且使命驅動。
- 標題風格 大膽、祈使句式，且經常使用全形大寫。
- 按鈕文案 直接且以行動為導向，例如「立即探索」或「查詢門市」。
- 不要使用纖細或輕盈的字重作為標題——截圖顯示的是粗壯的900字重字型
- 不要使用柔和或粉彩色調的配色方案——截圖顯示的是高飽和度的海軍藍、青綠色和黃色
- 不要使用圓角方形或柔和的按鈕邊角——截圖顯示的是極致的膠囊形圓角
- 不要使用小巧、密集且內距緊湊的版面——截圖顯示的是寬敞的留白和大型的觸控目標
- 不要使用裝飾性的襯線字型——截圖使用的是乾淨、運動風的無襯線字型
- 不要使用深色模式作為主要主題——截圖使用的是淺色背景搭配深色文字
- 避免: 被動或過於正式的語言
- 避免: 與產品無關的複雜術語
- 避免: 過於雜亂或擁擠的視覺版面
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
The Athletic Brewing 網站是一個高級的 DTC 電子商務平台，專營無酒精啤酒。它使用深海軍藍 (#003A5D) 和鮮明黃色 (#EBD923) 在白色背景上形成高對比配色，營造出大膽而充滿活力的感覺。字型以窄版無襯線體為主用於展示，幾何無襯線體為主用於內文，標題幾乎總是使用全形大寫。關鍵設計特點包括寬敞的間距、膠囊形按鈕和高品質的生活風格攝影圖片。重要的是，不要使用纖細的字重、柔和的顏色或按鈕的方形邊角。版面配置寬敞且居中，優先考慮產品的可見性和明確的行動號召。
en · zh-CN · zh-TW · ja · ko