精选 · 开放 · 免费
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
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
悬停状态下的平滑淡入与变换过渡 · 模态覆盖层的微妙透明度过渡
交互元素上的颜色变化与微妙变换。 · 按钮的即时视觉反馈。
08
组件
- button 透明背景,粗黑色边框,大写文本;无圆角。
- 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