---
version: alpha
name: Bucks Sauce
description: Loud condiment-aisle energy — a punchy hot-sauce brand built on a fiery red-orange accent, near-black ink on warm cream, fat rounded buttons, and a bold geometric sans that shouts off the shelf. Playful, appetite-forward, e-commerce direct.
data_quality: low

colors:
  # Canvas + ink
  background: "#fdf6ec"
  surface: "#ffffff"
  surface-warm: "#fbeede"
  ink: "#1a1410"
  ink-secondary: "#5c5249"
  ink-muted: "#8a7d70"

  # Brand accents — the heat
  primary: "#e8401f"          # Hot Sauce Red
  accent-orange: "#f5871f"    # Chili Orange
  accent-yellow: "#f7c948"    # Mustard Yellow
  accent-green: "#3f8f4f"     # Jalapeño Green

  # On-color
  on-primary: "#ffffff"
  on-accent: "#1a1410"

  # Functional
  border: "#e7d9c5"
  border-strong: "#1a1410"
  success: "#3f8f4f"
  link: "#e8401f"
  link-hover: "#c5310f"

typography:
  display-hero:
    fontFamily: "Bricolage Grotesque, Arial Black, sans-serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Bricolage Grotesque, Arial Black, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Bricolage Grotesque, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.4px
  eyebrow:
    fontFamily: "Bricolage Grotesque, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 1.2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  price:
    fontFamily: "Bricolage Grotesque, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.2px
  button-ui:
    fontFamily: "Bricolage Grotesque, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.4px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.link-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-yellow:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  badge:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.on-accent}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-green:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 20px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  banner-announcement:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    padding: 8px 16px
---

# Bucks Sauce Design System

## Overview

Bucks Sauce is a direct-to-consumer hot-sauce brand, and its website is built to do one job loudly: make you want to put a bottle in the cart. The visual language is condiment-aisle maximalism filtered through clean modern e-commerce — a warm cream canvas (`{colors.background}`) that reads like butcher paper or a kitchen wall, near-black ink (`{colors.ink}`) for honest readability, and a single fiery red-orange (`{colors.primary}`) that carries every call to action like a drop of heat on the tongue.

The palette is appetite-forward. The hero red-orange is flanked by a chili orange (`{colors.accent-orange}`), a mustard yellow (`{colors.accent-yellow}`), and a jalapeño green (`{colors.accent-green}`) — the colors of the ingredients themselves. These accents are used confidently and at scale: full-bleed color blocks, fat pill buttons, chunky badges. Nothing is timid. Where a SaaS brand whispers, Bucks Sauce yells, because the shelf it competes on is loud.

Typography leans into that bravado. Headlines run in a bold geometric grotesque (Bricolage Grotesque here as the closest Google match) at heavy weights (700–800) with tight tracking, giving them a packed, label-stamp punch. Body copy drops to a clean neutral sans (Inter) so product descriptions, ingredients, and heat-level explainers stay legible. Prices and buttons borrow the display face to keep the commercial moments feeling branded, not generic.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of clinical white — appetite, not lab
- Single hot red-orange accent (`{colors.primary}`) owns every primary CTA
- Ingredient-derived secondary palette: chili orange, mustard yellow, jalapeño green
- Heavy geometric display sans (700–800) for headlines, clean Inter for body
- Fat fully-rounded pill buttons (`{rounded.pill}`) with generous padding
- Chunky pill badges for heat levels, "new", and "bestseller" tags
- Hard black-outlined secondary buttons for contrast against the cream
- Bold, blocky, playful — built to shout off the shelf

## Colors

### Canvas + Ink
- **Cream** (`{colors.background}`): Page background — warm, appetizing, paper-like.
- **White** (`{colors.surface}`): Product cards, inputs, raised surfaces.
- **Warm Surface** (`{colors.surface-warm}`): Tinted feature blocks and section bands.
- **Ink** (`{colors.ink}`): Headlines and body — near-black with warmth, not pure black.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, fine print.

### Brand Accents
- **Hot Sauce Red** (`{colors.primary}`): The heat — primary CTAs, links, key emphasis.
- **Chili Orange** (`{colors.accent-orange}`): Secondary energy, gradients, illustration.
- **Mustard Yellow** (`{colors.accent-yellow}`): Badges, highlight buttons, callouts.
- **Jalapeño Green** (`{colors.accent-green}`): Freshness/availability tags, "in stock" cues.

### Functional
- **Border** (`{colors.border}`): Soft warm hairlines on cards and inputs.
- **Border Strong** (`{colors.border-strong}`): Hard black outline on secondary buttons.
- **Link** (`{colors.link}`) / **Link Hover** (`{colors.link-hover}`): Inline links track the brand red.
- **On Primary** (`{colors.on-primary}`): White text on red/green fills.
- **On Accent** (`{colors.on-accent}`): Dark ink on yellow fills for contrast.

## Typography

### Font Family
- **Display**: `Bricolage Grotesque` — bold geometric grotesque for headlines, prices, buttons, eyebrows.
- **Body**: `Inter` — neutral, legible sans for paragraphs, descriptions, captions.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — packaging-loud headline |
| `section-heading` | Section titles |
| `card-title` | Product names, feature titles |
| `eyebrow` | Uppercase-tracked kickers and badge text |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text, descriptions |
| `body-medium` | Emphasized inline copy |
| `price` | Product pricing |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, fine print, banner copy |

### Principles
- **Heavy where it counts**: headlines at 700–800 with tight tracking for shelf-stamp impact; body stays at 400 for comfort.
- **Display borrows into commerce**: prices and buttons use the display face so every buy-moment feels branded.
- **Two-family discipline**: only Bricolage Grotesque + Inter — no third typeface despite the playful tone.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; sections breathe with `{spacing.3xl}`–`{spacing.4xl}` vertical padding.

### Grid & Container
- Max content width ~1200px, centered.
- Product grid: 3–4 columns desktop, 2 on tablet, 1 on mobile.
- Hero: bold headline + bottle imagery, often over a warm or color-blocked band.
- Feature bands alternate cream and warm-tint (`{colors.surface-warm}`) sections.

### Whitespace Philosophy
- **Generous but confident**: big type and big buttons, with enough air that the loud color doesn't overwhelm.
- **Color as separator**: full-bleed accent bands divide sections more than rules or borders do.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed imagery |
| `sm` | 6px | Tags, small chips |
| `md` | 10px | Inputs, small cards |
| `lg` | 16px | Product cards |
| `xl` | 24px | Feature blocks |
| `pill` | 9999px | Buttons, badges, heat-level tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-product}`).

### Buttons
- **`button-primary`** — Hot red fill, white text, full pill, fat 14×28 padding. The "Add to Cart".
- **`button-secondary`** — White with a hard black outline; pill; for "Shop all" / secondary actions.
- **`button-yellow`** — Mustard fill, dark ink — playful highlight CTA.

### Badges
- **`badge`** — Mustard pill with dark uppercase-tracked text (heat level, "new").
- **`badge-green`** — Jalapeño green pill, white text ("in stock", "fresh batch").

### Cards
- **`card-product`** — White, soft warm border, `{rounded.lg}`. Bottle shot + name + price.
- **`card-feature`** — Warm-tinted block, `{rounded.xl}`, roomy padding for storytelling.

### Inputs
- **`input`** — White, warm border, `{rounded.md}`. Focus switches border to brand red.

### Navigation
- **`nav-bar`** — Cream sticky header, display-face links, red pill cart CTA right.

### Banner
- **`banner-announcement`** — Full-width red bar, white caption text (free shipping / heat warning).

## Do's and Don'ts

### Do
- Lead every primary action with Hot Sauce Red (`{colors.primary}`)
- Keep the canvas warm cream (`{colors.background}`), not clinical white
- Use heavy display weights (700–800) on headlines for shelf-stamp punch
- Use fat fully-rounded pill buttons with generous padding
- Pull secondary accents from the ingredient palette (orange/yellow/green)
- Put dark ink on yellow fills, white on red/green fills

### Don't
- Don't dilute the red into pastels — the heat must stay saturated
- Don't introduce a cool/blue accent — the palette is warm appetite-forward
- Don't set body copy in the display face — Inter carries the long reads
- Don't use thin/light weights on headlines — this brand is bold
- Don't square off the buttons — the pill shape is part of the personality

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs, hamburger nav |
| Tablet | 600–1024px | 2-column product grid, condensed hero |
| Desktop | >1024px | 3–4 column grid, full hero, sticky nav |

### Collapsing Strategy
- Hero headline scales 64px → ~36px, keeps heavy weight and tight tracking.
- Product grid: 4 → 2 → 1 column.
- Nav collapses to hamburger; cart pill stays visible.
- Announcement banner stays full-width at all sizes.

> Note: data_quality is low — the live site is behind a Vercel security checkpoint that blocks automated fetches. Tokens above are reconstructed from the Bucks Sauce hot-sauce brand identity (warm cream canvas, saturated red-orange heat accent, ingredient-derived secondaries, bold geometric display type). Re-capture with a real browser session to confirm exact hex/font values.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Bucks Sauce. Brand names and trademarks belong to their respective owners.