# Liquid Death — Marketing Site Design Spec > 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Neutrals | 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 | ### Accent | 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. ## 3. Typography Rules - `Acumin Pro` — the single family across the whole site; headlines, nav, body, buttons. - The "Liquid Death" wordmark is a custom blackletter/gothic logotype (rendered as artwork). | 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. ## 4. Component Stylings ### Buttons — sharp, bold - **Outline (on dark heroes)**: transparent, 1px white border, text white, radius `0px`, Acumin Pro 16px/700 UPPERCASE +1px tracking, height `56px`, padding `16px 40px`. - **Solid (on light store)**: bg black `#000000`, text white, radius `0px`, same type, height `50px`. - Secondary/product controls appear at a small `5px` radius. ### Nav - Over the hero: white "Liquid Death" blackletter logotype left, centered UPPERCASE Acumin Pro 700 nav (Beverages, Merch, Store Locator, Sell Your Soul, About, Timewaster 5000), account/bag icons right; a white utility bar with a shipping line above. ### Cards / product tiles - Product tiles at `5px` radius over campaign backgrounds; subtle shadow `rgba(0,0,0,.15) 0 4px 12` where present. ### Inputs - Not deeply captured; sharp-cornered. ## 5. Layout Principles - Full-bleed campaign hero: vivid coloured gradient/photography with product cans on one side and a colossal stacked UPPERCASE headline + outline CTA on the other. - Rotating hero carousel (prev/next arrows). - Below the hero the storefront is a white canvas with black type and product grids. - Irreverent section copy and merch throughout. ## 6. Depth & Elevation - Radii: `0px` on primary buttons; `5px` on cards/secondary; `50%/100%` on icon circles; small `1–2px` minor. - Elevation: mostly flat; subtle card shadows `rgba(0,0,0,.15) 0 4px 12`, larger `rgba(0,0,0,.2) 0 26px 80` on overlays. - Structure from full-bleed imagery and bold type, not heavy shadows. ## 7. Motion - Hero image carousel with prev/next arrows. Otherwise restrained. Exact durations/easings not captured. ## 8. Backgrounds, Effects & WebGL - Full-bleed **campaign photography / vivid gradient** heroes (e.g. a violet field with product cans) — the primary source of colour. - White store surfaces below; occasional near-black sections. - No CSS gradients as tokens (hero gradients are imagery), no canvas/WebGL observed. ## 9. Do's and Don'ts ### Do - Lead with a full-bleed, vividly coloured campaign hero and product imagery; carry the metal through the blackletter logotype. - Set headlines in BOLD UPPERCASE Acumin Pro (700) at line-height 1.0 so they stack into dense blocks. - Use sharp 0px buttons — white outline on dark heroes, black fill on the light store — with +1px tracking. - Keep the store chrome black on white; reserve metallic gold `#cba14f` as the one heritage accent. - Write irreverent, deadpan copy ("Murder Your Thirst", "Sell Your Soul"). ### Don't - Don't assume it is an all-black brutalist canvas — the store is white and the heroes are colourful. - Don't add a second type family or light display weights; display is 700 UPPERCASE. - Don't round the primary buttons or lean on heavy shadows. - Don't scatter decorative colour into the chrome; colour lives in campaign imagery. ## 10. Responsive Behavior - Not captured (desktop 1512px only). A cookie/consent banner is present; the site localizes (e.g. /en-au). ## 11. Agent Prompt Guide Quick token reference: - Canvas `#ffffff` (store) / campaign hero imagery · Text `#000000` · Muted `#696969` · Gold `#cba14f` · Link `#2563eb` - Font: `Acumin Pro` (one family) · Display 60/60 700 UPPERCASE · Nav 14/700 UPPER · Body 16 · Radius 0px button / 5px card · Button height 50–56px - Buttons: white 1px outline on dark heroes / black fill on light, sharp 0px, Acumin Pro 16/700 +1px UPPER · Blackletter logotype supplies the metal Use the Liquid Death design language: heavy-metal branding for canned water, delivered NOT as an all-black canvas but as a clean white storefront lit by full-bleed, vividly coloured campaign heroes (e.g. a violet gradient with product cans) carrying a blackletter/gothic "Liquid Death" logotype and gleefully irreverent copy ("Murder Your Thirst", "Sell Your Soul"). 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. Chrome stays black on white; metallic gold `#cba14f` is the one heritage accent and vivid colour arrives through campaign hero imagery, never decorative UI. Elevation is mostly flat with subtle card shadows. Feels: heavy-metal, deadpan, bold, irreverent. Avoid: assuming an all-black brutalist canvas, a second type family or light display weights, rounded primary buttons, heavy shadows, and decorative colour in the chrome.