---
version: alpha
name: "Tony's Chocolonely"
description: "Token-first design system reference for Tony's Chocolonely — an activist Dutch chocolate brand whose design mirrors its ethos: loud, unequal, deliberately disruptive."

colors:
  # Surface / canvas
  background: "#eb0000"     # Tony's signature red — the primary hero canvas
  surface: "#ffed00"        # Tony's yellow — secondary surface, CTA backgrounds
  surface-blue: "#006be1"   # Tony's blue — alternate section canvas (--color_tonys-blue)
  surface-elevated: "#ffffff"

  # Text / ink
  ink: "#000000"
  on-background: "#ffffff"
  on-surface: "#000000"

  # Brand accents — all sourced from CSS variables
  primary: "#eb0000"        # --color_tonys-red
  on-primary: "#ffffff"
  primary-container: "#ffed00"  # --color_tonys-yellow

  # Flavor palette (named exactly as CSS variables)
  flavor-yellow: "#ffed00"       # --color_tonys-yellow (nougat / caramel classic)
  flavor-nougat-yellow: "#ffe000" # --color_nougat-yellow
  flavor-hazelnut-crunch: "#dce10a" # --color_hazelnut-crunch (lime-yellow)
  flavor-almond-green: "#78c828"  # --color_almond-green
  flavor-hazelnut-green: "#009e00" # --color_hazelnut-green
  flavor-crispy-wafer-blue: "#00afbe" # --color_crispy-wafer-blue (teal)
  flavor-dark-milk-blue: "#50afe2"    # --color_dark-milk-blue
  flavor-tonys-blue: "#006be1"        # --color_tonys-blue
  flavor-pretzel-purple: "#6464be"    # --color_pretzel-purple
  flavor-cinnamon-purple: "#aa5abe"   # --color_cinnamon-biscuit-purple
  flavor-raspberry-pink: "#ff60a6"    # --color_raspberry-pink
  flavor-caramel-biscuit-pink: "#d7005a" # --color_caramel-biscuit-pink
  flavor-caramel-orange: "#ff7400"    # --color_caramel-orange
  flavor-cookie-caramel-orange: "#ffaa2d" # --color_cookie-caramel-orange

  # State / interaction
  focus-ring: "#000000"
  text-hover: "#3f3f44"  # was rgba(63, 63, 68, 0.4) shadow tint — Google format requires hex

  # Borders
  border: "#000000"

  # Shadow tints
  shadow-soft: "#3f3f44"  # was rgba(63, 63, 68, 0.4) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Chocolate letter, Georgia, serif"
    fontSize: 223px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: 0px
  display:
    fontFamily: "Chocolate letter, Georgia, serif"
    fontSize: 160px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  display-sub:
    fontFamily: "Chocolate letter, Georgia, serif"
    fontSize: 117px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: 0px
  heading-section:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: 0px
  heading-sub:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.29
    letterSpacing: 0px
  heading-3:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.09
    letterSpacing: -0.18px
  body-large:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.07
    letterSpacing: 0px
  button-ui:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.07
    letterSpacing: -0.15px
  caption:
    fontFamily: "American Typewriter, Courier New, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 36px
  2xl: 48px
  3xl: 64px
  4xl: 114px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    border: 1px solid {colors.border}
  button-primary-hover:
    backgroundColor: "{colors.on-background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    border: 1px solid {colors.border}
  button-secondary:
    backgroundColor: "{colors.on-background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    border: 1px solid {colors.border}
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-flavor:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 20px
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 20px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
---

# Tony's Chocolonely Design System

## Overview

Tony's Chocolonely is a Dutch activist chocolate brand, and its website is designed as a direct expression of that mission: confrontational, joyful, unapologetically loud. The page opens on a hero of Tony's Red (`{colors.primary}`) — a saturated emergency-signal red that reads less like a retail homepage and more like a protest banner. The enormous Chocolate letter display typeface at 160–223px stretches and wraps across the viewport with a tight `0.85` line-height, creating dense typographic slabs that read like hand-painted signs. "CRAZY ABOUT CHOCOLATE" is the visual greeting — as much political declaration as product headline.

The flavor system is the second act of the design language. Tony's packages each chocolate variety in a distinct, historically deliberate color: Tony's Yellow for classic milk, hazelnut-crunch acid yellow, almond lime-green, pretzel purple, raspberry hot pink, dark milk sky blue. The website inherits this chromatic vocabulary directly — product tiles, section backgrounds, and CTA variations all pull from the same 14 named CSS flavor variables (`--color_tonys-red`, `--color_tonys-yellow`, `--color_hazelnut-green`, and so on). This is not a brand that applies a palette to products; the products ARE the palette, and the site is a mosaic of them.

Underneath the chromatic energy sits a deliberately unglamorous typographic workhorse: American Typewriter, a slab-serif typeface associated with activist journalism, typewritten manifestos, and anti-corporate communication. At weight 700 it handles every heading, nav item, button label, and UI string on the site — the choice is a political statement as much as an aesthetic one. Its irregular, slightly uneven letterforms contrast starkly with the ultra-fluid Chocolate letter display face above. Together they produce a visual system that feels hand-assembled, energetic, and morally earnest rather than polished or premium.

**Key Characteristics:**
- Tony's Red (`{colors.primary}`) as the dominant canvas — never a neutral opening, always a declaration
- Chocolate letter display face at 117–223px, `0.85` line-height — slab-like stacked letter-forms as image
- American Typewriter at weight 700 for every UI element — activist journalism aesthetic, typewritten earnestness
- 14 named flavor CSS variables (`--color_tonys-yellow`, `--color_almond-green`, etc.) as the entire chromatic system
- Near-zero corner radius (`{rounded.sm}` at 2px on buttons, `{rounded.none}` everywhere else) — zero softening, zero premium polish
- Tony's Yellow (`{colors.surface}`) and white as the two button states — bold graphic contrast
- Unequal chocolate-block motif: asymmetric grid layouts mirror the brand's "unequal bars" packaging design
- No gradients, no shadows of note — saturation and contrast do all of the work
- Product tiles inherit their section's flavor color — the page is a living flavor menu
- American Typewriter's typewriter roots keep all digital text feeling hand-typed and personal

## Colors

### Primary Canvas
- **Tony's Red** (`{colors.primary}`): The dominant hero background, navigation bar, and primary brand surface. Derived from `--color_tonys-red: #EB0000`. This is not a CTA accent — it IS the background. The experience begins in red.
- **Tony's Yellow** (`{colors.surface}`): Secondary canvas color, primary CTA button background, and the default interactive accent. From `--color_tonys-yellow: #FFED00`. Maximum warm contrast against red.
- **Tony's Blue** (`{colors.surface-blue}`): Tertiary section canvas from `--color_tonys-blue: #006BE1` — used for alternate hero and product moments.
- **White** (`{colors.surface-elevated}`): Neutral inset surface, modal backgrounds, and text-on-dark contrast reversal.

### Flavor Palette
Tony's maps each product variety to a specific hex value, surfaced as CSS custom properties. Every flavor tile, section accent, and product card inherits one of these 14 values:
- Nougat Yellow (`{colors.flavor-nougat-yellow}` `#FFE000`), Hazelnut Crunch (`{colors.flavor-hazelnut-crunch}` `#DCE10A`), Almond Green (`{colors.flavor-almond-green}` `#78C828`)
- Hazelnut Green (`{colors.flavor-hazelnut-green}` `#009E00`), Crispy Wafer Teal (`{colors.flavor-crispy-wafer-blue}` `#00AFBE`), Dark Milk Blue (`{colors.flavor-dark-milk-blue}` `#50AFE2`)
- Pretzel Purple (`{colors.flavor-pretzel-purple}` `#6464BE`), Cinnamon Purple (`{colors.flavor-cinnamon-purple}` `#AA5ABE`)
- Raspberry Pink (`{colors.flavor-raspberry-pink}` `#FF60A6`), Caramel Biscuit Pink (`{colors.flavor-caramel-biscuit-pink}` `#D7005A`)
- Caramel Orange (`{colors.flavor-caramel-orange}` `#FF7400`), Cookie Caramel Orange (`{colors.flavor-cookie-caramel-orange}` `#FFAA2D`)

### Text & Borders
- **Black** (`{colors.ink}`): Default text on light surfaces; button label on yellow CTAs.
- **White** (`{colors.on-background}`): Text on red, blue, and dark surfaces. Also the secondary button background.
- **Border Black** (`{colors.border}`): 1px solid border on white buttons and form fields.

### Shadow
- **Shadow Tint** (`{colors.shadow-soft}`): Extracted from `rgba(63, 63, 68, 0.4)` shadow on elevated overlays (modals, popovers). Flattened to `#3f3f44` for YAML compliance.

## Typography

### Font Family
- **Display**: `Chocolate letter` — a custom self-hosted serif display face (`chocolateletter.woff2`). Large, irregular letterforms with a hand-lettered quality. No webfont service — fully self-hosted. Closest publicly available approximation: `Alfa Slab One` or `Abril Fatface` (Google Fonts).
- **Body / UI / Headings**: `American Typewriter` — the entire UI layer. Self-hosted in bold (`american-typewriter-bold.woff2`) and semibold (`american-typewriter-semibold.woff2`). All slab-serif; typewriter character. Closest Google Font substitute: `Courier Prime` (limited) or `Roboto Slab` (structure only — the typewriter irregularity is unmatched).
- **Fallback stacks**: `Chocolate letter, Georgia, serif` for display; `American Typewriter, Courier New, monospace` for UI/body.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Massive hero headline, up to 223px — fills the full viewport width |
| `display` | Section hero statements, 160px — "CRAZY ABOUT CHOCOLATE" scale |
| `display-sub` | Supporting display moments at ~117px — secondary hero phrases |
| `heading-section` | American Typewriter 38px weight 700 — section headers, navigation labels |
| `heading-sub` | 28px weight 700, line-height 1.29 — card headings, modal titles |
| `heading-3` | 22px weight 700 — sub-section labels, product category names |
| `body-large` | 18px weight 700 — emphasized body and short promotional callouts |
| `body` | 16px weight 400 — standard reading text, product descriptions |
| `nav-link` | 15px weight 700 — top navigation links, footer nav |
| `button-ui` | 15px weight 600, slight negative tracking — all interactive labels |
| `caption` | 13px weight 400 — metadata, legal disclaimers, micro labels |

### Principles
- **Chocolate letter is sculpture**: The display face operates at sizes so large (117–223px) that each letter becomes an illustration — the font IS the hero image. Always flush left; never centered at these sizes.
- **American Typewriter is the voice of reason**: Every UI element — from a 38px section head to a 13px caption — is set in this single typeface. Unity through constraint.
- **Weight 700 is the default**: American Typewriter almost always appears bold. Weight 400 is reserved for descriptive body copy. Weight 600 appears only on button labels as a functional mid-point.
- **Negative leading on display**: Line-height `0.85` at hero sizes creates intentional letter-overlap and dense stacking — the opposite of airy editorial spacing.
- **No italic, no condensed variants**: The system resists stylistic variation. The typefaces are used as-is, without optical tricks.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with 12px as the most common observed value in the UI).

Spacing is simultaneously tight (12px between elements within tiles, 6px micro-gaps) and bold (36px section padding, 64px+ between major content zones). The juxtaposition creates a packed-but-legible energy.

### Grid & Container
- Max content width: approximately 1440px
- Breakpoints: 480px, 640px, 767–768px, 900px, 1024px, 1300px, 1440px, 1920px
- Hero: full-bleed red canvas, display type fills the width, flavor tile carousel below
- Product grid: asymmetric, reflecting the brand's "unequal bars" philosophy — tiles vary in width and height, not a uniform grid
- Country selector: horizontal row of square yellow/white tiles on red — geographic diversity as visual texture
- Footer: dark sections with dense multi-column link layout

### Whitespace Philosophy
- **Color is space**: Tony's uses solid color background shifts instead of whitespace to separate content zones. A red-to-yellow section change IS the visual separator.
- **Tight internal layout**: Within any given section, elements pack together with 6–12px gaps — the brand ethos of "no empty filler" applies spatially.
- **The display type IS the whitespace**: At 160–223px, headlines physically fill the page — the rest of the layout shrinks around them.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default — all product tiles, buttons, page sections |
| Hairline (Level 1) | `1px solid #000000` | White buttons, form fields, outlined interactive elements |
| Dialog Lift (Level 2) | `rgba(63, 63, 68, 0.4) 0px 4px 10px 0px` | Modals, popovers, the "Welcome to Tony's!" geolocation dialog |
| Focus Ring | `3px solid #000000` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Tony's Chocolonely is essentially shadow-free. One shadow value was extracted (on the geolocation modal), and zero shadow values appear on product tiles, buttons, or navigation. The visual hierarchy is created entirely through saturated color contrast — a red section with yellow tiles carries more hierarchy signal than any shadow stack could. Shadows would be decorative noise on a page where every element is already shouting in color.

## Shapes

The complete radius scale is declared in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All section backgrounds, product tiles, text inputs, nav bar, flavor cards |
| `sm` | 2px | Buttons only — a barely-perceptible softening, not a design statement |
| `pill` | 9999px | Rarely used; decorative circular badge elements only |

Tony's shape language is almost entirely square. The `2px` button radius is so subtle it reads as sharp in practice. This restraint mirrors the unequal chocolate bar packaging: no soft, friendly curves — the edges are deliberate, the shapes are graphic.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Yellow (`{colors.surface}`) background, black text, 2px radius, 1px black border. The default interactive call-to-action. Used for "go to your local chocolate shop" and "add to cart" — the yellow is the signal.
- **`button-secondary`** — White (`{colors.on-background}`) background, black text, same border treatment. Used when a second action appears alongside the primary yellow button (e.g., "no thank you, I'm fine here").
- **`button-primary-hover`** — Background and text invert: white background on hover with black text maintained. The border remains; the fill swaps.
- **`button-secondary-hover`** — Inverts to yellow (`{colors.surface}`) on hover, mirroring the primary button.

### Cards

**Flavor Tile**
- Background: flavor-specific CSS variable (one of the 14 named flavor colors)
- Radius: `{rounded.none}` — hard-edged rectangles matching the chocolate bar block aesthetic
- Padding: 24px
- Content: product image centered, name in American Typewriter weight 700, flavor descriptor below
- No shadow — color contrast carries visual separation from the red background

**Geolocation Modal**
- Background: `{colors.surface-elevated}` (white) with an `8px solid {colors.primary}` border
- Shadow: `rgba(63, 63, 68, 0.4) 0px 4px 10px 0px`
- Typography: American Typewriter 22px weight 700 for the heading; body at 16px weight 400
- CTAs: `{components.button-primary}` (yellow) + `{components.button-secondary}` (white) stacked vertically

### Inputs

Email capture input (`{components.input}`): white background, no border, no radius (`{rounded.none}`), left-side-only padding (20px left, 0px elsewhere). Inline placement inside a red or black section with adjacent yellow submit button. The sparse padding is functional minimalism matching the typewriter aesthetic.

### Badges

Square red badges in American Typewriter weight 700 at caption size — no pill treatment. Used for promotional labels and product availability tags.

### Navigation

- Top bar: promotional copy in small American Typewriter on yellow-on-black
- Main nav: full-width red bar, logo centered or left, links in weight 700 American Typewriter white
- Hover: 0.15s color/background-color transition via `cubic-bezier(0.4, 0, 0.2, 1)`
- Mobile: collapses to hamburger with full-screen red overlay menu

## Do's and Don'ts

### Do
- Open hero sections on Tony's Red (`{colors.primary}`) — neutral or white canvases are off-brand
- Use Chocolate letter for display text only — it exists at 117px+ scale, not as a heading typeface
- Set American Typewriter at weight 700 for all headings, nav, and button labels — weight 400 is for body paragraphs only
- Apply the flavor CSS variables (`--color_tonys-yellow`, `--color_almond-green`, etc.) to match each product's tile to its packaging color
- Keep button radius at `{rounded.sm}` (2px) — avoid any meaningful rounding; the brand is graphic, not friendly
- Use yellow (`{colors.surface}`) as the primary CTA color — it pops on red and anchors the interactive hierarchy
- Let display type fill the viewport — Chocolate letter at 160px+ IS the hero image; photography is secondary
- Use solid color blocks for section separation — borders, dividers, and whitespace are not the Tony's way
- Apply tight line-height (`0.85`) on Chocolate letter at display sizes — the dense stacking is intentional

### Don't
- Don't soften the palette — no pastels, no tints, no gradients. Tony's colors are fully saturated brand values
- Don't introduce rounded corners beyond 2px — pill-radius CTAs or rounded cards contradict the unequal-bar identity
- Don't use American Typewriter at weight 400 for headings — the typewriter look works only when bold
- Don't add elevation shadows to product tiles or cards — color contrast IS elevation in this system
- Don't center display type on large viewports — Chocolate letter headlines are flush left and kinetic
- Don't create new flavor colors that aren't in the 14 named CSS variables — the flavor palette is a closed system
- Don't use Tony's Red as a CTA button color — it's the canvas, not the action signal
- Don't implement the system with Inter or any geometric sans — American Typewriter's slab irregularity is not a substitute
- Don't add decorative elements (textures, patterns, overlays) — the flat color blocks carry all the visual energy

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column, Chocolate letter drops to 60–80px, stacked CTAs |
| Mobile | 480–767px | Single-column layout, 80–120px hero type, 2-up flavor grid |
| Tablet | 768–1024px | Side-by-side hero possible, 3-up flavor grid, full nav bar |
| Desktop | 1024–1300px | 4-up product grid, 160px display type, full multi-column layout |
| Large Desktop | ≥1300px | Maximum 223px display, 1440px container, 5+ flavor tiles across |

### Touch Targets
- Yellow CTA buttons: min 44px tap height with 10px 20px padding
- Flavor tiles: full tile is the tap target (no nested interactive zones)
- Navigation links: 44px minimum tap height via vertical padding

### Collapsing Strategy
- **Nav**: Horizontal link bar collapses to hamburger below 768px; full-screen red overlay on open
- **Hero display type**: 223px (desktop) → 120px (tablet) → 72px (mobile) — weight stays 400, font stays Chocolate letter
- **Flavor grid**: asymmetric multi-column → uniform 2-up → 1-up on smallest mobile
- **Section backgrounds**: Full-bleed color blocks maintain at every breakpoint — just height changes

### Image Behavior
- Product can/wrapper images scale with their containing flavor tile
- No art-direction reframing — the flavor tiles compress rather than crop
- Logo always present at full fidelity; never collapses to a monogram

---

## Agent Prompt Guide

### Quick Color Reference
- Hero Canvas: Tony's Red (`{colors.primary}` `#EB0000`)
- Primary CTA: Tony's Yellow (`{colors.surface}` `#FFED00`)
- Secondary CTA / Modal: White (`{colors.surface-elevated}` `#ffffff`)
- Text on Red/Dark: White (`{colors.on-background}`)
- Text on Yellow/White: Black (`{colors.ink}` `#000000`)
- Focus Ring: Black (`{colors.focus-ring}`)
- Border: Black (`{colors.border}`)

### Example Component Prompts

- "Create a hero section on Tony's Red (`#EB0000`) background. Set the headline 'CRAZY ABOUT CHOCOLATE' in Chocolate letter (fallback Georgia, serif) at 180px, weight 400, line-height 0.85, color white. Left-aligned, flush to the container edge. Below the headline, place a yellow (`#FFED00`) CTA button in American Typewriter weight 600 at 15px, 2px border-radius, 10px 20px padding, 1px solid black border."
- "Build a flavor tile card on Tony's Yellow (`#FFED00`) background — no border-radius, 24px padding, no shadow. Product name in American Typewriter 28px weight 700, color black. Flavor descriptor below in 16px weight 400. Product image centered at top of the tile, square crop."
- "Design a geolocation selection modal: white background (`#ffffff`) with 8px solid red (`#EB0000`) border. Heading 'Welcome to Tony's!' in American Typewriter 22px weight 700. Two stacked buttons: primary in yellow (`#FFED00`) with black text ('go to your local chocolate shop'), secondary in white with black text and 1px solid border ('no thank you, I'm fine here'). Both 2px radius, 10px 20px padding."
- "Create a navigation bar on Tony's Red (`#EB0000`). Logo centered or left. Navigation links in American Typewriter 15px weight 700, white, with 0.15s `cubic-bezier(0.4, 0, 0.2, 1)` color transition on hover. No background blur, no border — solid red through scroll."
- "Design a product flavor grid section. Section background: Tony's Red (`#EB0000`). 4 tiles across, each on its own flavor color (yellow `#FFED00`, almond green `#78C828`, dark milk blue `#50AFE2`, pretzel purple `#6464BE`). No border-radius on tiles. Tile heading in American Typewriter 22px weight 700. Asymmetric widths encouraged — tiles do not need to be equal width."
- "Build a promotional banner — full-bleed Tony's Yellow (`#FFED00`) background, American Typewriter 38px weight 700 headline in black, centered or left-aligned. Below: white secondary CTA button with 1px solid black border and 2px radius."

### Iteration Guide

1. Start with Tony's Red (`{colors.primary}`) as the default canvas — every session opens in red
2. Chocolate letter is display-only: use for any text that would be the hero visual (headlines 80px+). Below that, switch to American Typewriter
3. American Typewriter weight 700 everywhere in the UI layer — never a geometric sans-serif substitute
4. Yellow (`{colors.surface}`) is the interactive signal — apply only to primary CTAs, not to decorative elements
5. Match product tiles to their flavor CSS variable — never invent new colors; the 14-color flavor system is closed
6. Keep radius at 2px (`{rounded.sm}`) maximum on interactive elements — the brand's edges are deliberate
7. No shadows on product tiles or layout cards — saturated color contrast replaces elevation entirely
8. Color block shifts replace whitespace — when a new section starts, change the background color rather than adding vertical padding

---

## 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 Tony's Chocolonely. Brand names and trademarks belong to their respective owners.