精選 · 開放 · 免費
Liquid Death
叛逆、不羈的飲料品牌,採用哥德龐克美學販售健康補水飲品。
brandboldecommerce
01
設計氣質 DNA
叛逆不羈龐克補水反主流文化
一個販售水的龐克搖滾能量飲料品牌
02
色彩
#8A6D35Accent
#000000Ink
#151515Ink soft
#E6E6E6BG
#F5F5F5BG soft
#040404BG quiet
#737373Muted
rgba(227, 227, 227, 1.0)Line
高對比調色盤,在淺灰色、深黑色與獨特的金屬金色強調色之間交替,後者用於品牌標識。
03
字型
geometric-sans · humanist-sans
- display
40px · 700 - heading
32px · 700 - subheading
24px · 700 - body
16px · 400 - caption
14px · 400
所有導覽連結使用大寫字母 · 大型展示標題使用緊湊的字間距 · 所有主要標題維持粗體字重 (700)
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
150px
8px 基礎網格,搭配寬裕的垂直留白(頂部 150px / 底部 56px),用於主視覺區段。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 5px
lg · 10px
pill · 999px
輸入框使用 1px solid rgba(0, 0, 0, 0.15);按鈕使用 1px solid rgb(0, 0, 0)
0px 4px 12px 0px rgba(0, 0, 0, 0.15) · 0px 0px 18px 0px rgba(0, 0, 0, 0.2)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的內容,搭配大型、全寬的主視覺橫幅與醒目的覆蓋式彈出視窗。
07
動效與互動
220msmicro
500mssmall
800msmedium
cubic-bezier(0, 0, 0.2, 1)easing
hover 狀態下的流暢淡入與變換過渡 · 彈出式覆蓋層的細微透明度過渡
互動元素上的顏色變化與細微變換。 · 按鈕上的即時視覺回應。
08
組件
- button 透明背景,搭配粗黑邊框與大寫文字;無 border-radius。
- card 產品影像無可見的容器邊框。
- input 白色背景,搭配細黑邊框與佔位符文字。
- hero 全寬背景影像,搭配大型、粗體字型和明確的行動號召按鈕。
09
文案語氣與禁用清單
- 語氣 不羈、幽默且略帶侵略性。
- 標題風格 簡短、有力且常帶有諷刺意味的陳述。
- 按鈕文案 非正式且大膽的用語,如「HELL YES」或「SHOP NOW」。
- 不要在主要按鈕上使用圓角 — 截圖顯示為方形/矩形形狀
- 不要使用細微或柔和的字型排版 — 截圖顯示為粗體、高對比的標題
- 不要使用多彩、活潑的調色盤 — 截圖顯示為嚴格的單色基底搭配單一金色強調
- 不要使用小巧、精緻的 UI 元素 — 截圖顯示為大型、厚重的輸入框和按鈕
- 不要使用乾淨、空靈的美學 — 截圖顯示為密集、寫實的背景和繁忙的影像
- 不要使用友善、小寫的標題 — 截圖顯示為具侵略性、大寫的文字
- 避免: 正式的企業語言
- 避免: 過度專業的術語
- 避免: 溫和或被動的措辭
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Liquid Death 採用叛逆、受龐克啟發的美學,其特徵是高對比度的黑白影像、粗體大寫字型以及獨特的金屬金色強調。佈局以沉浸式、全寬的產品攝影和具侵略性的訊息為核心。主要顏色包括淺灰色背景 (#E6E6E6)、深黑色 (#000000) 和金屬金色 (#8A6D35) 用於品牌元素。字型嚴重依賴幾何無襯線字體,以粗體字重和大寫變換呈現。關鍵設計規則:避免在互動元素上使用圓角、保持具侵略性與幽默的文案,並使用大型、有力的標題而非細微或精緻的文字。
en · zh-CN · zh-TW · ja · ko