# Design System Inspired by Heinz

## 1. Visual Theme & Atmosphere

The Heinz design system embodies bold, appetite-driven energy rooted in the brand's 155-year heritage. It balances classic, heritage-forward typography with a vibrant, modern color palette that celebrates both the iconic red tomato heritage and contemporary food culture. The system prioritizes warmth, authenticity, and accessibility, with generous whitespace and clear hierarchy that guides users through product discovery and culinary inspiration. Visual elements emphasize product imagery with rounded corners and layered depth, creating an inviting, tactile experience that feels both premium and approachable.

**Key Characteristics**
- Bold, heritage-inspired typography with modern refinement
- Iconic deep burgundy paired with warm cream accents
- High contrast for readability and accessibility
- Generous spacing and breathing room throughout layouts
- Rounded corner treatments that soften industrial edges
- Warm, natural color palette evoking fresh ingredients
- Clear visual hierarchy supporting product-centric storytelling

## 2. Color Palette & Roles

### Primary
- **Heinz Heritage Red** (`#D6001C`): Primary brand color for CTAs, headers, and brand touchpoints; represents tomato heritage and energy
- **Deep Burgundy** (`#540B26`): Secondary brand accent for depth, hover states, and premium positioning
- **Warm Cream** (`#FEF1DD`): Primary background for warm, inviting surfaces and contrast against reds

### Accent Colors
- **Burgundy Red** (`#A6192E`): Secondary CTA and accent for product cards and featured sections
- **Muted Rose** (`#AF3043`): Tertiary accent for secondary interactions and subtle emphasis
- **Heritage Rose** (`#B84758`): Softer accent for hover states and gentle emphasis
- **Natural Green** (`#007A40`): Secondary accent representing fresh, natural ingredients
- **Burnt Orange** (`#D15800`): Warm accent for special categories and mustard products

### Interactive
- **Pure White** (`#FFFFFF`): Button backgrounds and interactive surfaces; primary interactive base
- **Dark Charcoal** (`#1D1D1D`): Text on light backgrounds; primary readable text color
- **Light Border Gray** (`#E5E7EB`): Subtle borders and dividers; most versatile neutral
- **Ghost Gray** (`#616161`): Secondary text and muted content

### Neutral Scale
- **Off-White** (`#F7F7F7`): Secondary background surfaces
- **Cream Background** (`#FFF9F1`): Warm neutral background for content sections
- **Soft Cream** (`#FCF9F0`): Lightest neutral background variant
- **Pure Black** (`#000000`): Maximum contrast text; use sparingly for emphasis

### Surface & Borders
- **Border Gray** (`#E5E7EB`): Default border color for inputs, cards, and dividers
- **Light Gray** (`#F7F7F7`): Card and container backgrounds

### Semantic / Status
- **Error Red** (`#D6001C`): Error states, validation failures, destructive actions
- **Error Dark** (`#B70B0B`): Darker error variant for secondary error messaging
- **Warning Yellow** (`#E5A526`): Warning states and cautionary messaging
- **Warning Muted** (`#E8B54F`): Secondary warning for contextual alerts

## 3. Typography Rules

### Font Family
**Primary:** HeinzLabelBold, Georgia, serif (display and headings)
**Secondary:** HeinzSansRegular, HeinzSansBold, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif (body and UI)
**Fallback:** Georgia, Helvetica, Arial, sans-serif

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|-----------------|-------|
| Display H1 | HeinzLabelBold | 144px | 400 | 144px | 0px | Hero headlines; use sparingly |
| Heading H2 | HeinzLabelBold | 96px | 400 | 96px | 0px | Section headers; major divisions |
| Heading H3 | HeinzSansBold | 16px | 600 | 24px | 0px | Card titles and subsections |
| Body | HeinzSansRegular | 14px | 400 | 21px | 0px | Primary content paragraph text |
| Link | HeinzSansRegular | 16px | 400 | 24px | 0px | Navigation links and CTAs |
| Button | HeinzSansRegular | 16px | 400 | 24px | 0px | Interactive button text |
| Caption | HeinzSansRegular | 12px | 400 | 18px | 0px | Small labels and metadata |
| Code | Monaco, monospace | 13px | 400 | 20px | 0px | Technical content |

### Principles
- Use **HeinzLabelBold** sparingly for maximum impact on hero and primary headings
- Maintain 1.5x line height multiplier for readability across all text
- Prioritize contrast ratios ≥ 4.5:1 for WCAG AA compliance
- Headings (H1–H3) use high-contrast dark text on light or red backgrounds
- Body text defaults to `#1D1D1D` on light backgrounds
- Links are underlined and inherit semantic color (dark on light, white on dark)

## 4. Component Stylings

### Buttons

**Primary Button (CTA)**
- Background: `#540B26`
- Text Color: `#FFFFFF`
- Font: HeinzSansRegular, 16px, 400
- Padding: `16px 28px`
- Border Radius: `9999px`
- Border: `0px solid transparent`
- Height: `64px`
- Min Width: `246px`
- Line Height: `24px`
- Hover: Background `#A6192E`, cursor pointer
- Active: Background `#D6001C`
- Disabled: Background `#E5E7EB`, Text Color `#616161`, cursor not-allowed

**Secondary Button (Outlined)**
- Background: `#FFFFFF`
- Text Color: `#1D1D1D`
- Font: HeinzSansRegular, 16px, 400
- Padding: `8px 16px`
- Border Radius: `8px`
- Border: `2px solid #C5C5C5`
- Height: `44px`
- Min Width: `170px`
- Line Height: `24px`
- Hover: Background `#F7F7F7`, Border Color `#1D1D1D`
- Active: Background `#E5E7EB`
- Disabled: Border Color `#E5E7EB`, Text Color `#616161`

**Ghost Button (Icon)**
- Background: `transparent`
- Text Color: `#262627`
- Font: HeinzSansRegular, 16px, 400
- Padding: `2px 2px`
- Border Radius: `0px`
- Border: `0px solid transparent`
- Height: `44px`
- Width: `44px`
- Line Height: `16px`
- Hover: Background `rgba(0, 0, 0, 0.05)`
- Active: Background `rgba(0, 0, 0, 0.1)`

**Circular Button (Icon Round)**
- Background: `transparent`
- Text Color: `#FFFFFF`
- Font: HeinzSansRegular, 16px, 400
- Padding: `0px`
- Border Radius: `9999px`
- Border: `2px solid #FFFFFF`
- Height: `52px`
- Width: `52px`
- Line Height: `24px`
- Hover: Background `rgba(255, 255, 255, 0.1)`, Border Color `#FFFFFF`
- Active: Background `rgba(255, 255, 255, 0.2)`

### Cards & Containers

**Product Card**
- Background: `#FFFFFF` or transparent on colored section
- Border Radius: `24px`
- Border: `0px solid transparent` or `1px solid #E5E7EB`
- Padding: `0px` (image edges at `0px 0px 24px 24px`)
- Box Shadow: `0px 4px 12px rgba(0, 0, 0, 0.08)`
- Hover: Box Shadow `0px 8px 20px rgba(0, 0, 0, 0.12)`, transform: translateY(-2px)

**Content Card**
- Background: `#FFF9F1`
- Border Radius: `24px`
- Padding: `32px 40px`
- Border: `1px solid #E5E7EB`
- Text Color: `#1D1D1D`
- Heading Font: HeinzSansBold, 16px, 600

**Section Container**
- Background: `#FFFFFF` or `#FEF1DD` (alternating)
- Padding: `48px 40px` (mobile: `24px 16px`)
- Max Width: `1440px`
- Margin: `0 auto`
- Border: `0px solid transparent`

### Inputs & Forms

**Text Input (Default)**
- Background: `#FFFFFF`
- Text Color: `#000000`
- Font: HeinzSansRegular, 16px, 400
- Padding: `0px` (internal padding via height)
- Border Radius: `0px`
- Border: `1px solid #C1C1C1`
- Height: `40px`
- Line Height: `24px`
- Hover: Border Color `#1D1D1D`
- Focus: Border Color `#D6001C`, outline: `0px`, box-shadow: `0px 0px 0px 3px rgba(214, 0, 28, 0.1)`
- Disabled: Background `#F7F7F7`, Border Color `#E5E7EB`, Text Color `#616161`

**Search Input**
- Background: `transparent`
- Text Color: `#1D1D1D`
- Font: HeinzSansRegular, 16px, 400
- Padding: `0px`
- Border Radius: `0px`
- Border: `0px none`
- Height: `44px`
- Line Height: `16px`
- Placeholder: Color `#616161`
- Focus: Border Bottom `2px solid #D6001C`

**Form Label**
- Font: HeinzSansBold, 14px, 600
- Color: `#1D1D1D`
- Margin Bottom: `8px`
- Display: block

**Error Message**
- Font: HeinzSansRegular, 12px, 400
- Color: `#D6001C`
- Margin Top: `4px`
- Display: block

### Navigation

**Header Navigation**
- Background: `#D6001C`
- Height: `80px`
- Padding: `0px 24px`
- Display: flex
- Align Items: center
- Text Color: `#FFFFFF`
- Link Font: HeinzSansRegular, 16px, 400
- Link Padding: `24px 16px`
- Link Hover: Background `#A6192E`, Border Bottom `2px solid #FEF1DD`
- Logo: Max Height `40px`

**Mobile Navigation**
- Background: `#D6001C`
- Drawer Width: `100%` or `280px`
- Drawer Overlay: `rgba(0, 0, 0, 0.5)`
- Item Padding: `16px 24px`
- Item Font: HeinzSansRegular, 16px, 400
- Item Hover: Background `#A6192E`

**Breadcrumb Navigation**
- Font: HeinzSansRegular, 14px, 400
- Color: `#616161`
- Separator: `/` at `#616161`
- Active Link: Color `#1D1D1D`, font-weight 600
- Padding: `12px 0px`

### Badges & Labels

**Featured Badge**
- Background: `#FFCF00` (mustard yellow for "Fan Favorite")
- Text Color: `#000000`
- Font: HeinzSansBold, 12px, 600
- Padding: `4px 8px`
- Border Radius: `2px`
- Shape: Star or rounded rectangle

**Status Badge**
- Background: `#E5E7EB`
- Text Color: `#1D1D1D`
- Font: HeinzSansBold, 12px, 600
- Padding: `4px 8px`
- Border Radius: `12px`
- Variants: Info, Success (`#007A40`), Warning (`#E5A526`), Error (`#D6001C`)

## 5. Layout Principles

### Spacing System
**Base Unit:** `4px`

**Scale & Usage:**
- `4px`: Minimal gaps, icon spacing
- `8px`: Tight component padding, small gaps
- `12px`: Small margin, label spacing
- `16px`: Button padding, component spacing
- `20px`: Medium gaps between sections
- `24px`: Card padding, section gutters
- `32px`: Content padding, medium spacing
- `40px`: Container padding, heading spacing
- `48px`: Section padding, major content divisions
- `64px`: Large spacing between sections
- `80px`: Hero spacing, full-width gaps

### Grid & Container
- **Max Width:** `1440px`
- **Gutters:** `24px` (desktop), `16px` (tablet), `12px` (mobile)
- **Columns:** 12-column grid system
- **Margins:** Content centered with `max-width: 1440px; margin: 0 auto;`
- **Sections:** Full-width backgrounds with centered content containers
- **Aspect Ratios:** Product images 1:1 or 16:9; hero images 16:9

### Whitespace Philosophy
Whitespace is generous and intentional, creating visual breathing room and emphasizing product imagery. Each section is distinctly separated with full-height container padding (`48px`–`80px`). Cards and components use consistent `24px`–`32px` internal padding. Empty space around typography hierarchy guides reading flow and creates visual hierarchy without additional visual elements.

### Border Radius Scale
- `0px`: Input fields, navigation, structural elements
- `2px`: Micro badges and small labels
- `8px`: Secondary buttons, small containers
- `24px`: Product cards, primary content containers, image bottom corners
- `9999px`: Circular buttons, icon buttons, full-height rounded elements

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (0) | No shadow | Backgrounds, typography, structural elements |
| Raised (1) | `box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08)` | Subtle cards, input focus states |
| Elevated (2) | `box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08)` | Standard product cards, modal surfaces |
| Floating (3) | `box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.12)` | Hover card state, dropdown menus, overlays |
| Modal (4) | `box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15)` | Modal dialogs, primary overlays |

**Shadow Philosophy:** Shadows are subtle and warm-toned, reflecting natural lighting. Elevation increases with interaction urgency and importance. Hover states apply +1 elevation level for clear feedback. Shadows never exceed `0.15` opacity to maintain readability and flat-design principles. On red backgrounds, shadows use darker opacities (`0.15`–`0.2`) for sufficient contrast.

## 7. Do's and Don'ts

### Do
- Use **Heinz Heritage Red** (`#D6001C`) for primary CTAs and brand moments
- Apply **Deep Burgundy** (`#540B26`) for primary buttons and premium states
- Maintain minimum `16px` touch target height for mobile interactive elements
- Use **HeinzLabelBold** exclusively for H1–H2 hero headings only
- Combine warm neutrals (`#FEF1DD`, `#FFF9F1`) with deep reds for high contrast
- Include sufficient whitespace (`24px`–`40px` padding) inside cards and containers
- Apply `border-radius: 24px` consistently to product cards and major containers
- Use `line-height: 1.5x` multiplier for body text and captions for readability
- Test all interactive elements for ≥4.5:1 contrast ratio (WCAG AA)
- Layer elevation shadows on hover to provide clear interaction feedback

### Don't
- Mix **HeinzLabelBold** with body text or secondary UI elements
- Use pure black (`#000000`) on red backgrounds without white separation
- Apply shadows with opacity > `0.15` to maintain modern flat-design aesthetic
- Create buttons smaller than `44px` height on touch-enabled devices
- Combine multiple accent colors in a single component or card
- Use borders with radius > `24px` for rectangular containers
- Allow text to run without ample line-height on screens < `768px` width
- Apply more than two font weights per component (avoid weight bloat)
- Stack shadows deeper than Level 3 (`0px 20px 40px`) on standard UI components
- Reduce padding below `16px` on desktop; maintain `12px` minimum on mobile

## 8. Responsive Behavior

### Breakpoints

| Breakpoint | Width | Key Changes |
|------------|-------|-------------|
| Mobile | `< 640px` | Single column, `16px` padding, `32px` section gaps, `12px` button padding, `80px` header with hamburger |
| Tablet | `640px`–`1024px` | 2 columns, `24px` padding, `48px` section gaps, full header navigation |
| Desktop | `1024px`–`1440px` | 3+ columns, `40px` padding, `64px` section gaps, full-width navigation |
| Large | `> 1440px` | Fixed `1440px` max-width, centered margin, `80px` padding sides |

### Touch Targets
- **Minimum Height:** `44px` for all interactive elements
- **Minimum Width:** `44px` for icon buttons
- **Minimum Padding:** `8px` horizontal, `12px` vertical inside buttons
- **Spacing Between Targets:** `8px` minimum gap to prevent accidental touches
- **Tap Feedback:** Visual change (hover state) within `100ms` of touch initiation

### Collapsing Strategy
- **Navigation:** Desktop horizontal menu (`80px` height) → Tablet reduced menu (`64px` height) → Mobile hamburger drawer (`100vh` height with overlay)
- **Product Grid:** Desktop 4-column (3 gap: `24px`) → Tablet 2-column (2 gap: `24px`) → Mobile 1-column (full width minus `16px` gutters)
- **Typography:** Desktop H1 `144px` → Tablet H1 `96px` → Mobile H1 `64px` (scale 0.67x)
- **Padding:** Desktop `48px` → Tablet `32px` → Mobile `24px` (linear reduction)
- **Card Radius:** Desktop `24px` → Mobile `16px` (slight reduction for legibility at smaller screens)
- **Modal Dialogs:** Desktop centered overlay (`90% width`, max `600px`) → Mobile full-screen drawer with safe-area insets

## 9. Agent Prompt Guide

### Quick Color Reference
- **Primary CTA:** Heinz Heritage Red (`#D6001C`) on white or cream backgrounds
- **Primary Button:** Deep Burgundy (`#540B26`) with white text
- **Background (Warm):** Cream (`#FEF1DD`) or Soft Cream (`#FFF9F1`)
- **Background (Neutral):** Off-White (`#F7F7F7`) or Pure White (`#FFFFFF`)
- **Heading Text:** Dark Charcoal (`#1D1D1D`) on light backgrounds; White (`#FFFFFF`) on red backgrounds
- **Body Text:** Dark Charcoal (`#1D1D1D`) on light; Ghost Gray (`#616161`) for secondary text
- **Borders & Dividers:** Light Border Gray (`#E5E7EB`)
- **Error/Validation:** Error Red (`#D6001C`)
- **Card Container:** White (`#FFFFFF`) with `border-radius: 24px`, `box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08)`

### Iteration Guide
1. **Color Foundation:** Always default to Deep Burgundy (`#540B26`) for primary buttons; Heinz Red (`#D6001C`) for error states and secondary emphasis. Pair with Cream (`#FEF1DD`) for warm, approachable backgrounds.

2. **Typography Priority:** Use HeinzLabelBold (`144px`, `96px`) exclusively for display/H1–H2 headings. All UI text (buttons, links, nav) uses HeinzSansRegular or HeinzSansBold at `14px`–`16px` with `1.5x` line-height minimum.

3. **Spacing Consistency:** Apply `16px` internal padding for small components, `24px`–`32px` for cards, `40px` for sections. Mobile reduces by `50%` (e.g., `8px` → `16px`).

4. **Elevation & Depth:** Standard cards use `box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08)`; hover adds shadow to `0px 8px 20px rgba(0, 0, 0, 0.12)`. Never exceed `0.15` opacity.

5. **Border Radius Patterns:** Product cards and major containers = `24px`; buttons = `9999px` (pills) or `8px` (rounded rect); badges = `2px` or `12px` (chips).

6. **Interactive Feedback:** All hover states increase elevation +1 level and shift color slightly warmer (e.g., `#540B26` → `#A6192E`). Focus states add `0px 0px 0px 3px rgba(214, 0, 28, 0.1)` outline.

7. **Responsive Scaling:** H1 scales from `144px` (desktop) → `96px` (tablet) → `64px` (mobile). Padding scales `48px` (desktop) → `32px` (tablet) → `24px` (mobile). Grid columns: 4 → 2 → 1.

8. **Accessibility Requirement:** Maintain ≥4.5:1 contrast ratio for all text. Use `#1D1D1D` on light backgrounds and `#FFFFFF` on dark/red backgrounds. Provide visible focus states (outline or background change).

9. **Mobile Touch Targets:** Minimum `44px` height for buttons/inputs; `8px` gap between adjacent targets. Reduce card padding from `32px` (desktop) to `16px` (mobile) to maximize screen real estate while maintaining legibility.

10. **Brand Voice:** Every UI decision should evoke warmth, heritage, and appetite. Use red and burgundy for action/emotion; cream/warm neutrals for calm, inviting spaces. Prioritize product imagery with clean typography and generous whitespace.