OpenDesign·你的设计资产库

网页参考

Liquid Death

一个叛逆、不羁的饮料品牌,运用哥特朋克美学销售健康补水饮品。

BrandBoldE-commerce

封面待补录,可通过原站查看设计。

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

  • display40px · 700
  • heading32px · 700
  • subheading24px · 700
  • body16px · 400
  • caption14px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Liquid Death 采用叛逆、受朋克启发的美学风格,其特点是高对比度的黑白图像、粗体大写字体和独特的金属金色点缀。布局围绕沉浸式全宽产品摄影和极具冲击力的文案展开。关键颜色包括浅灰背景 (#E6E6E6)、深黑 (#000000) 以及用于品牌元素的金属金 (#8A6D35)。字体严重依赖几何无衬线字体,采用粗体字重和大写转换。关键设计规则:避免交互元素使用圆角,保持文案的冲击力与幽默感,并使用大型、有力的标题而非微妙或精致的文本。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。