Liquid Death
Heavy Metal Vending Machine
This design system feels like a heavy metal concert flyer brought to life as a direct-to-consumer brand. The aesthetic is built on brutalist principles: a stark palette of pure black and white, zero rounded corners, and aggressive, uppercase typography. This creates a hard, confrontational edge, deliberately rejecting the soft, approachable look of typical beverage companies. Splashes of antique gold in logos and links are the only moments of warmth, acting like a glint of metal on a matte black surface. The layout uses full-bleed, high-contrast sections, creating a jarring, powerful rhythm that mirrors the brand's 'Murder Your Thirst' tagline.
https://liquiddeath.comColor Palette
Accent
Neutrals
Typography
Type Scale
Minor Third (1.2) from 15px base
display60px · 700 · 1
56px56px · 700 · 1
heading45px · 700 · 0.62
40px40px · 700 · 1
heading-sm36px · 700 · 1.67
32px32px · 700 · 1
subheading24px · 700 · 1
18px18px · 400 · 1.67
Fonts
Display
Weight400, 500, 700
Sizes12–60px · 11 values
Line height1–2 · 8 values
Letter spacing0.0200em, 0.0310em, 0.0560em, 0.0630em
Fallback'Inter', 'Roboto', sans-serif
The single, dominant typeface used for everything from massive uppercase headlines to body copy. Its clean, geometric form provides a brutalist, no-nonsense foundation. Extensive use of uppercase at 700 weight for headings is the brand's signature voice.
Display
Weight400, 700
Sizes10–45px · 5 values
Line height1.00, 1.05, 1.20, 1.30
Letter spacing0.0560em
Fallback'Roboto Condensed', sans-serif
Used sparingly for subtitles and calorie counts where horizontal space is limited. Maintains the core Acumin feel in a more compact format.
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | ||
| Base unit | ||
| Card padding |
Border Radius
| Element | Value | Preview |
|---|
Guidelines
Do
- Use 0px border-radius for all buttons, inputs, cards, and containers.
- Set all major headlines in uppercase `Acumin Pro`.
- Rely on stark `Death Black` and `Bone White` for primary backgrounds and text.
- Use full-bleed, high-contrast black and white sections to structure the page.
- Reserve `Polished Gold` and `Antique Gold` for logotypes and hyper-specific accents.
- Maintain high-contrast text accessibility (AAA) for all body copy.
- Use sharp, rectangular product imagery on solid `Ash Gray` backgrounds.
Don't
- Never use rounded corners on any element.
- Do not use drop shadows or gradients for elevation.
- Avoid using sentence case for primary headlines.
- Don't use the gold colors for standard UI components like buttons or inputs.
- Do not introduce any soft or playful colors into the palette.
Component Preview
AI-generated examples showing how this design system looks when applied to real UI components.
New
Refero MCP
Give your AI agent real design taste
Thousands of real product screens and full user flows your coding agent can search and study before it builds.
# Liquid Death — Style Reference
> Heavy Metal Vending Machine
**Theme:** mixed
This design system feels like a heavy metal concert flyer brought to life as a direct-to-consumer brand. The aesthetic is built on brutalist principles: a stark palette of pure black and white, zero rounded corners, and aggressive, uppercase typography. This creates a hard, confrontational edge, deliberately rejecting the soft, approachable look of typical beverage companies. Splashes of antique gold in logos and links are the only moments of warmth, acting like a glint of metal on a matte black surface. The layout uses full-bleed, high-contrast sections, creating a jarring, powerful rhythm that mirrors the brand's 'Murder Your Thirst' tagline.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Death Black | `#000000` | `--color-death-black` | Primary text, core UI backgrounds, filled buttons. Establishes the dominant, aggressive tone. |
| Bone White | `#ffffff` | `--color-bone-white` | Text on dark backgrounds, primary page backgrounds. |
| Off-Black | `#151515` | `--color-off-black` | Body copy on light backgrounds, secondary UI elements. |
| Ash Gray | `#e3e3e3` | `--color-ash-gray` | Product grid background, subtle dividers. |
| Gravel Gray | `#727272` | `--color-gravel-gray` | Secondary text, disabled states, placeholder text. |
| Light Ash | `#f5f5f5` | `--color-light-ash` | Alternative light background color for section differentiation. |
| Charcoal | `#232323` | `--color-charcoal` | Hover states on dark elements. |
| Input Border | `#999999` | `--color-input-border` | Default border color for text input fields. |
| Polished Gold | `#d2ac5a` | `--color-polished-gold` | Accents, special links, logotype details — a premium, metallic highlight against the stark monochrome. |
| Antique Gold | `#8a6d35` | `--color-antique-gold` | Hover state for gold accents, secondary logotype details. |
## Tokens — Typography
### Acumin Pro — The single, dominant typeface used for everything from massive uppercase headlines to body copy. Its clean, geometric form provides a brutalist, no-nonsense foundation. Extensive use of uppercase at 700 weight for headings is the brand's signature voice. · `--font-acumin-pro`
- **Substitute:** 'Inter', 'Roboto', sans-serif
- **Weights:** 400, 500, 700
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 36px, 40px, 56px, 60px
- **Line height:** 1.00, 1.05, 1.13, 1.20, 1.29, 1.50, 1.67, 2.00
- **Letter spacing:** 0.0200em, 0.0310em, 0.0560em, 0.0630em
- **Role:** The single, dominant typeface used for everything from massive uppercase headlines to body copy. Its clean, geometric form provides a brutalist, no-nonsense foundation. Extensive use of uppercase at 700 weight for headings is the brand's signature voice.
### acumin-pro-condensed — Used sparingly for subtitles and calorie counts where horizontal space is limited. Maintains the core Acumin feel in a more compact format. · `--font-acumin-pro-condensed`
- **Substitute:** 'Roboto Condensed', sans-serif
- **Weights:** 400, 700
- **Sizes:** 10px, 16px, 18px, 20px, 45px
- **Line height:** 1.00, 1.05, 1.20, 1.30
- **Letter spacing:** 0.0560em
- **Role:** Used sparingly for subtitles and calorie counts where horizontal space is limited. Maintains the core Acumin feel in a more compact format.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1 | — | `--text-caption` |
| body-sm | 14px | 1.5 | — | `--text-body-sm` |
| body | 16px | 1.67 | — | `--text-body` |
| subheading | 24px | 1.2 | — | `--text-subheading` |
| heading-sm | 36px | 1.13 | — | `--text-heading-sm` |
| heading | 45px | 1.05 | — | `--text-heading` |
| display | 60px | 1 | — | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
### Border Radius
| Element | Value |
|---------|-------|
| tags | 0px |
| cards | 0px |
| inputs | 0px |
| buttons | 0px |
### Layout
- **Card padding:** 24px
## Components
### Primary Action Button
**Role:** Key CTAs like 'Shop Now' or 'Add to Cart'.
A solid rectangle with background: `Death Black` (#000000), text: `Bone White` (#ffffff), padding: 8px 16px, and border-radius: 0px. Text is uppercase `Acumin Pro`.
### Secondary Action Button
**Role:** Less prominent actions like 'Join the Contest'.
An outlined rectangle with background: transparent, text & 1px border: `Death Black` (#000000), padding: 13px, and border-radius: 0px. Text is uppercase `Acumin Pro`.
### Full-Width Banner CTA
**Role:** Major section-level calls to action, e.g., 'Join the Club'.
A full-width block link with background: `Death Black` (#000000), text: `Bone White` (#ffffff), and a right-aligned chevron. It is always rectangular with a 0px radius.
### Text Input Field
**Role:** For email capture and forms.
A sharp-cornered field with background: `Bone White` (#ffffff), text: `Death Black` (#000000), and a 1px border in `Input Border` (#999999). Padding is typically 8px 12px with 0px radius.
### Navigation Link
**Role:** Main site navigation items.
Uppercase text in `Acumin Pro` 500, color `Off-Black` (#151515). No underline or background decoration on hover.
### Modal Overlay
**Role:** Popup for email signup or promotions.
A semi-transparent `Gravel Gray` (#727272) layer covers the page, with a centered rectangular container in `Ash Gray` (#e3e3e3) holding the content. All corners are sharp (0px radius).
## Do's and Don'ts
### Do
- Use 0px border-radius for all buttons, inputs, cards, and containers.
- Set all major headlines in uppercase `Acumin Pro`.
- Rely on stark `Death Black` and `Bone White` for primary backgrounds and text.
- Use full-bleed, high-contrast black and white sections to structure the page.
- Reserve `Polished Gold` and `Antique Gold` for logotypes and hyper-specific accents.
- Maintain high-contrast text accessibility (AAA) for all body copy.
- Use sharp, rectangular product imagery on solid `Ash Gray` backgrounds.
### Don't
- Never use rounded corners on any element.
- Do not use drop shadows or gradients for elevation.
- Avoid using sentence case for primary headlines.
- Don't use the gold colors for standard UI components like buttons or inputs.
- Do not introduce any soft or playful colors into the palette.
- Avoid subtle gray-on-gray text combinations.
- Don't use lifestyle photography; focus on the product or provocative concepts.
## Elevation
This design actively avoids drop shadows. Depth and hierarchy are achieved exclusively through high-contrast color blocking—placing `Bone White` elements on `Death Black` backgrounds or vice versa. This creates a flat, graphic, and intentionally harsh layering style.
## Imagery
The visual language is provocative and product-focused, mirroring a heavy-metal aesthetic. Photography is high-contrast, often featuring stark product shots on plain backgrounds, or humorous, slightly absurd concepts (like drinking from a faucet). Imagery is used in full-bleed sections or as contained, sharp-edged blocks. There are no lifestyle photos; the can is the hero. Graphic elements include detailed, skull-based logotypes reminiscent of band art, rendered in black, white, and gold.
## Layout
The layout is built on a foundation of alternating, full-bleed content bands. The page structure often starts with a complex hero and transitions into a series of stark black, white, or light gray sections with a strong vertical rhythm. Content within sections is typically centered and max-width, creating a pillar of text and visuals down the screen. Grids are used for product listings, following a simple, rigid 3 or 4-column structure with no frills. The overall impression is one of powerful, rhythmic, and confrontational organization.
## Agent Prompt Guide
### Quick Color Reference
- **Page Background**: `#ffffff` (Bone White) / `#e3e3e3` (Ash Gray)
- **Dark Section Background**: `#000000` (Death Black)
- **Text**: `#151515` (Off-Black) on light, `#ffffff` (Bone White) on dark
- **CTA Button**: `#000000` background, `#ffffff` text
- **Accent**: `#d2ac5a` (Polished Gold)
### Example Component Prompts
1. **"Create a primary CTA button with the text 'MURDER NOW'. It must have a `Death Black` (#000000) background, `Bone White` (#ffffff) uppercase text, 0px border-radius, and padding of 8px 16px. Use the `Acumin Pro` font at 700 weight."**
2. **"Generate a product grid section on an `Ash Gray` (#e3e3e3) background. Each card should have 0px radius, no border, and no shadow. The product title should be uppercase `Acumin Pro` weight 700 in `Death Black` (#000000)."**
3. **"Design a full-width promotional banner. The background is `Death Black` (#000000). The headline 'JOIN THE CLUB' should be in `Bone White` (#ffffff), uppercase `Acumin Pro` font, centered, with a small white chevron to the right."**
## Similar Brands
- **MSCHF** — Similar counter-culture, internet-native brand voice with a stark, often brutalist digital presence.
- **Thrasher Magazine** — Shares a gritty, unapologetic aesthetic rooted in a subculture, with bold, often gothic typography.
- **Balenciaga (under Demna)** — Employs a similar brutalist web design with stark typography, minimal color, and a focus on product in a harsh context.
- **Kith** — High-end streetwear e-commerce with a similar product-first, grid-based layout and monochrome palette, though Kith is less aggressive.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-death-black: #000000;
--color-bone-white: #ffffff;
--color-off-black: #151515;
--color-ash-gray: #e3e3e3;
--color-gravel-gray: #727272;
--color-light-ash: #f5f5f5;
--color-charcoal: #232323;
--color-input-border: #999999;
--color-polished-gold: #d2ac5a;
--color-antique-gold: #8a6d35;
/* Typography — Font Families */
--font-acumin-pro: 'Acumin Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-acumin-pro-condensed: 'acumin-pro-condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1;
--text-body-sm: 14px;
--leading-body-sm: 1.5;
--text-body: 16px;
--leading-body: 1.67;
--text-subheading: 24px;
--leading-subheading: 1.2;
--text-heading-sm: 36px;
--leading-heading-sm: 1.13;
--text-heading: 45px;
--leading-heading: 1.05;
--text-display: 60px;
--leading-display: 1;
/* Typography — Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
/* Layout */
--card-padding: 24px;
/* Border Radius */
--radius-sm: 2px;
--radius-md: 5px;
/* Named Radii */
--radius-tags: 0px;
--radius-cards: 0px;
--radius-inputs: 0px;
--radius-buttons: 0px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-death-black: #000000;
--color-bone-white: #ffffff;
--color-off-black: #151515;
--color-ash-gray: #e3e3e3;
--color-gravel-gray: #727272;
--color-light-ash: #f5f5f5;
--color-charcoal: #232323;
--color-input-border: #999999;
--color-polished-gold: #d2ac5a;
--color-antique-gold: #8a6d35;
/* Typography */
--font-acumin-pro: 'Acumin Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-acumin-pro-condensed: 'acumin-pro-condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1;
--text-body-sm: 14px;
--leading-body-sm: 1.5;
--text-body: 16px;
--leading-body: 1.67;
--text-subheading: 24px;
--leading-subheading: 1.2;
--text-heading-sm: 36px;
--leading-heading-sm: 1.13;
--text-heading: 45px;
--leading-heading: 1.05;
--text-display: 60px;
--leading-display: 1;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
/* Border Radius */
--radius-sm: 2px;
--radius-md: 5px;
}
```
