精选 · 开放 · 免费

Liquid Death

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

brandboldecommerce
Liquid Death 网站截图
↓ 下载设计系统包 (18 MB)在 OpenDesign 中打开

原站: https://liquiddeath.com

📦 浏览包内文件 →

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

所有导航链接使用大写字母 · 为大型展示标题使用紧凑的字间距 · 所有主标题保持粗体 (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

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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