liquid_death___style_reference:
  info: "> Heavy Metal Vending Machine"

  theme: "mixed"

  info: "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:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Death Black | `#000000` | `--color-death-black` | Primary text, core UI backgrounds, filled buttons. Establishes the dominant, aggressive tone. |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Text on dark backgrounds, primary page backgrounds. |"
    info: "| Off-Black | `#151515` | `--color-off-black` | Body copy on light backgrounds, secondary UI elements. |"
    info: "| Ash Gray | `#e3e3e3` | `--color-ash-gray` | Product grid background, subtle dividers. |"
    info: "| Gravel Gray | `#727272` | `--color-gravel-gray` | Secondary text, disabled states, placeholder text. |"
    info: "| Light Ash | `#f5f5f5` | `--color-light-ash` | Alternative light background color for section differentiation. |"
    info: "| Charcoal | `#232323` | `--color-charcoal` | Hover states on dark elements. |"
    info: "| Input Border | `#999999` | `--color-input-border` | Default border color for text input fields. |"
    info: "| Polished Gold | `#d2ac5a` | `--color-polished-gold` | Accents, special links, logotype details — a premium, metallic highlight against the stark monochrome. |"
    info: "| 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:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.67 | — | `--text-body` |"
      info: "| subheading | 24px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.13 | — | `--text-heading-sm` |"
      info: "| heading | 45px | 1.05 | — | `--text-heading` |"
      info: "| display | 60px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| 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."

      info: "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."

      info: "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:

    info: "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:

    info: "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:

    info: "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:
      - "**\"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.\"**"
      - "**\"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).\"**"
      - "**\"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;
        }