Heavy-metal branding for canned water — not the all-black brutalist canvas its reputation implies. A clean white Shopify storefront lit by full-bleed, vividly coloured campaign heroes (the home hero is a violet radial gradient with product cans) carrying a blackletter/gothic "Liquid Death" logotype and gleefully irreverent copy ("Murder Your Thirst", "Sell Your Soul", "Timewaster 5000"). One family does everything — Acumin Pro — with display headlines set BOLD (700), UPPERCASE and at line-height 1.0 so they stack into dense condensed blocks (60/60), nav at 14/700 UPPERCASE, body 16/400. Buttons are sharp 0px rectangles with +1px tracking: a white 1px outline on the dark heroes, a black fill on the light store, 50–56px tall; product cards use a small 5px radius with subtle rgba(0,0,0,.15) 0 4px 12 shadows. Chrome stays black on white; metallic gold #cba14f is the one heritage accent (plus blue #2563eb links) and vivid colour arrives through campaign hero imagery, never decorative UI.
Browse Liquid Death in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: liquiddeath.com (live DOM, computed styles), 2026-07-25 (desktop 1512px, AU store). Coverage: home. Account: needs-dashboard. Responsive: breakpoints not captured. Motion: hero carousel only; not captured in detail.
Liquid Death's site weaponises heavy-metal branding for canned water. The identity is not an all-black canvas as the reputation suggests — it is a white Shopify storefront lit by full-bleed, vividly coloured campaign heroes (a violet gradient with product cans on the home hero) carrying a blackletter/gothic "Liquid Death" logotype, colossal condensed UPPERCASE headlines and gleefully irreverent copy ("Murder Your Thirst", "Sell Your Soul", "Timewaster 5000", "Death to Plastic"). The type does the heavy lifting: one family (Acumin Pro) set BOLD (700) and UPPERCASE at line-height 1.0 so headlines stack into dense blocks. Controls are sharp-cornered — white outlines on the dark heroes, black fills on the light store — and metallic gold is the one heritage accent. The mood is loud, deadpan and brutalist-adjacent, but the surface is a clean commerce site, not a black void. Feels: heavy-metal, deadpan, bold, irreverent.
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | Primary text, buttons, dark sections |
| near-black-1 | #151515 | Dark surface |
| near-black-2 | #232323 | Dark surface / card |
| gray-600 | #696969 | Secondary text |
| gray-550 | #737373 | Tertiary text |
| gray-500 | #555555 | Muted |
| gray-150 | #e6e6e6 | Dividers / inset |
| gray-100 | #f5f5f5 | Light section |
| gray-75 | #f8f8f8 | Inset panel |
| white | #ffffff | Store canvas, text on dark |
| Token | Hex | Role / usage |
|---|---|---|
| brand gold | #cba14f | Heritage metallic accent |
| gold-deep | #8a6d35 | Darker gold shade |
| link blue | #2563eb | Links / interactive |
| campaign violet | #5a31f4 (approx, image) | Campaign hero gradient (photographic, not a CSS token) |
Rule: chrome is black/white; gold is the one heritage accent; vivid colour arrives through full-bleed campaign hero imagery, not decorative UI.
Acumin Pro — the single family across the whole site; headlines, nav, body, buttons.| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Display (h1/h2) | Acumin Pro | 60 / 60 | 700 | normal | UPPERCASE |
| Section (mid) | Acumin Pro | 36–40 / 33–36 | 700 | -0.4px | UPPERCASE |
| Nav | Acumin Pro | 14 / 21 | 700 | normal | UPPERCASE |
| Body | Acumin Pro | 16 | 400 | normal | sentence |
| Button | Acumin Pro | 16 | 700 | +1px | UPPERCASE |
Patterns: display type is BOLD (700), UPPERCASE and set at line-height 1.0 so it stacks into dense condensed blocks. One family everywhere; the blackletter logotype supplies the metal.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.