---
version: alpha
name: "Panera"
website: "https://www.panerabread.com"
description: >-
  A fast-casual bakery-cafe brand whose marketing site layers two custom typefaces — the display-heavy Champion at 66px for hero banners and the humanist Sequel Sans at 15–18px for every body moment — over a nature-rooted palette anchored in forest green, midnight near-black, and a warm parchment canvas, with pill-shaped CTAs in deep green and no chromatic brand accents on the marketing chrome; the system signals wholesome sourcing through botanical token names (hearty-green, mother-bread, soft-white, sun-dapple) rather than through photography filters or brand-color saturation.

seo:
  title: "Panera Design System for React — forest green, Champion display, 16 components"
  metaDescription: "Panera's marketing design system as a DESIGN.md file. Forest green on midnight, Champion display type at 66px, Sequel Sans body, pill CTAs, 16 colors, 12 typography tokens, 16 components. For React and AI tools."
  highlights:
    - "Two-typeface display split — Champion for hero banners (uppercase condensed) and Sequel Sans for all body, nav, and CTA copy; the combination reads café chalkboard meets contemporary sans"
    - "Botanical token names — forest greens encoded as hearty-green, panera-green, and mother-bread in CSS custom properties; the naming layer signals brand intention, not just visual choice"
    - "Pill-only CTA geometry — every primary button on the page is 29px–1000px radius; no rounded-rectangle CTAs exist in the captured surface"
    - "Midnight near-black as ink — text runs on a forest-green-tinted black (#011400) rather than neutral charcoal; the tint connects every body element to the produce-fresh positioning"
    - "Warm parchment canvas — soft-white (#f4f3e6) appears as the primary off-white background, a cream tone 15 points warmer than pure white"
  tags:
    - "Food & Delivery"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Panera's marketing site runs an unusual typographic double act: Champion — a thick, uppercase condensed display face borrowed from editorial posters — carries the hero banners, while Sequel Sans, a contemporary humanist sans, handles every other reading surface from nav links to loyalty copy to the footer copyright line. Where most fast-casual brands (Chipotle, Chick-fil-A, Shake Shack) anchor on a single workhorse sans or a slab serif that does both jobs, Panera separates "shout" from "speak" into two entirely different font families. The hero headline "MAKE IT A STUFFER" reads like a sandwich-board announcement; the body reads like a thoughtful café menu card. The contrast is the brand's typographic signature.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 16 color tokens drawn from a midnight near-black canvas, four gradient steps of forest green (hearty-green through panera-green through a lighter green to chartreuse), warm parchment off-whites, and a single watermelon-pink as an accent present in the CSS but absent from the marketing chrome. Twelve typography tokens span Champion and Sequel Sans across hero, heading, subhead, body, and label tiers. Four radius tokens run from 8px standard to a 1000px pill. Sixteen components cover the pill-shaped CTA button, the green-on-parchment hero banner, the loyalty card module, the nav strip, and the footer column layout.

    Feed this file to Claude or Cursor and it will reproduce Panera's specific moves: forest-green CTAs on warm-parchment backgrounds rather than on white, Champion uppercase-condensed for any promotional banner headline, Sequel Sans at 15px for body and interactive copy, and pill geometry for every button. The system is worth studying for its botanical naming layer — the CSS custom properties use names like `--pnra-color-midnight`, `--pnra-color-mother-bread`, and `--pnra-color-soft-white` that tell a story about sourcing and warmth rather than simply encoding visual values.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.panerabread.com"
      title: "Panera — official site"
      description: "Panera's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Panera's primary brand color?"
      answer: "Panera's primary brand voltage is forest green — specifically the CSS variable `--pnra-color-panera-green` (#576c1d), a muted, earthy olive-green that appears on CTA buttons and nav elements across the page. A darker variant named `--pnra-color-hearty-green` (#1d4321) carries the deeper forest tone on hover states and section accents. The palette runs four steps of green total: the deep hearty-green at #1d4321, the mid-tone panera-green at #576c1d, a lighter green at #4c753f, and a bright chartreuse (#e0eb60) declared in the CSS but rarely rendered in the captured marketing surface. Unlike fast-casual brands that make red the hero color, Panera commits fully to green across every interactive element."
    - id: "typography"
      title: "What typefaces does Panera use, and what are good substitutes?"
      answer: "Panera runs two typefaces: Champion (a thick condensed display face, uppercase only) for hero banners and large promotional headlines, and Sequel Sans (a contemporary humanist sans-serif) for all body copy, navigation links, subheads, CTAs, and UI labels. Champion is a licensed display family; the closest open-source substitute for the all-caps banner role is Bebas Neue or Anton at similar weights. Sequel Sans is a proprietary face; Inter or DM Sans transfers cleanly at the same 15–18px body sizes. The display-body split — two distinct families rather than weight variations of one — is the defining typographic pattern. Do not attempt to collapse this to a single family; the brand distinction between announce and inform tiers is intentional."
    - id: "canvas-color"
      title: "Why does Panera use a warm parchment background rather than white?"
      answer: "Panera's off-white background is soft-white (#f4f3e6), named `--pnra-color-soft-white` in the CSS — a warm, slightly yellow-tinted cream that reads as parchment rather than clinical white. The choice signals the artisan-bakery positioning: parchment suggests bread paper, kraft bags, and baked-good warmth. The system also uses `--pnra-color-extra-light-clay` (#eae9e6) for shadow and border accents — a slightly gray variant of the same warm-neutral range. Both tones sit 15–40 perceptual lightness points warmer than pure white. The midnight near-black ink (#011400) has a green tint that connects to the same botanical warmth."
    - id: "button-style"
      title: "What is Panera's button style?"
      answer: "Every primary CTA button on the Panera marketing site uses pill geometry — a border-radius of 29px on the captured 'Start an Order' buttons, with the CSS declaring a 1000px radius token for the maximum-pill variant. The fill is forest green (#576c1d or #1d4321), the label is white Sequel Sans at 15px / bold, and the height is approximately 44px. There is no flat or rounded-rectangle button variant in the marketing surface. This pill-only commitment is absolute — even the loyalty-join button and the rewards CTAs follow the same geometry. The pill aligns the brand's warmth signals: organic shapes, no sharp corners."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a food-delivery or restaurant marketing page?"
      answer: "Yes — feed this file to Claude or any AI coding tool and it will reproduce Panera's specific design moves. The key patterns: Champion uppercase-condensed for promotional banner headlines, Sequel Sans at 15px for body and interactive copy, forest-green (#576c1d) CTAs on warm parchment (#f4f3e6) backgrounds, pill-geometry buttons at 29px–1000px radius, and midnight near-black (#011400) ink with a green undertone. The botanical token names (hearty-green, mother-bread, soft-white) are in the file and can be used as semantic references in Tailwind config or CSS custom properties. One caveat: Champion and Sequel Sans are licensed; substitute Bebas Neue and Inter respectively in open-source projects."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#576c1d"
  primary-dark: "#1d4321"
  primary-mid: "#4c753f"
  chartreuse: "#e0eb60"
  ink: "#011400"
  ink-neutral: "#000000"
  ink-muted: "#6f6f75"
  canvas: "#ffffff"
  surface-1: "#f4f3e6"
  surface-2: "#eae9e6"
  watermelon: "#ff978f"
  hairline: "#000000"

typography:
  display-xl:
    fontFamily: "champion, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 66px
    letterSpacing: 0
  display-lg:
    fontFamily: "champion, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0
  display-md:
    fontFamily: "champion, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 34px
    letterSpacing: "-0.1px"
  heading-lg:
    fontFamily: "ringside, \"Helvetica Neue\", helvetica, arial, sans-serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 39px
    letterSpacing: 0
  heading-md:
    fontFamily: "ringside, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: "-0.2px"
  subhead-lg:
    fontFamily: "sequel-sans, \"Helvetica Neue\", helvetica, arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 26px
    letterSpacing: "-0.2px"
  subhead-md:
    fontFamily: "sequel-sans, \"Helvetica Neue\", helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: "-0.2px"
  body-lg:
    fontFamily: "sequel-sans, \"Helvetica Neue\", helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: "0.11px"
  body-md:
    fontFamily: "sequel-sans, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: "0.11px"
  body-sm:
    fontFamily: "sequel-sans, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.11px"
  label-md:
    fontFamily: "sequel-sans, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: 0
  caption:
    fontFamily: "sequel-sans, \"Helvetica Neue\", helvetica, arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0

rounded:
  none: "0px"
  md: "8px"
  lg: "16px"
  pill: "29px"
  full: "1000px"

spacing:
  xs: "10px"
  sm: "15px"
  md: "16px"
  base: "20px"
  lg: "24px"
  xl: "40px"
  2xl: "50px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "15px 24px"
    height: "44px"
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "15px 24px"
    height: "44px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "15px 24px"
    height: "44px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "10px 16px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "10px 16px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
  hero-banner:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.lg}"
    padding: "40px 50px"
  menu-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.subhead-md}"
    rounded: "{rounded.md}"
    padding: "16px"
    borderColor: "{colors.surface-2}"
  loyalty-card:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "10px 16px"
    height: "44px"
    borderColor: "{colors.surface-2}"
  eyebrow-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "0"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    padding: "45px 50px"
---

## Overview

Panera's marketing site is built on a two-voice typographic model that most restaurant brands avoid. **Announce and inform.** Champion — a thick, uppercase condensed display face — handles every banner headline; Sequel Sans, a contemporary humanist, handles navigation, body copy, CTAs, and loyalty program text. The two families never swap roles. Where Chipotle and Sweetgreen run a single workhorse typeface across every scale, and where most QSR brands reach for a custom slab to do both jobs, Panera splits the work across two distinct identities: the loud declaration and the calm explanation are visually different languages.

The palette is anchored in four steps of forest green — `{colors.primary-dark}` through `{colors.primary}` through `{colors.primary-mid}` — plus a midnight near-black ink (`{colors.ink}`) with a green undertone baked in via the CSS variable `--pnra-color-midnight` (#011400). Below the green tier, the surface is warm parchment rather than pure white: soft-white (#f4f3e6) and extra-light-clay (#eae9e6) carry the canvas and card surfaces. The CSS custom properties use botanical names — hearty-green, mother-bread, soft-white, sun-dapple, panera-green — that signal sourcing intent at the token level.

**Key Characteristics:**
- Champion uppercase-condensed at 32–66px for every promotional headline — hero banners, promotional chips, and menu section titles.
- Sequel Sans at 15px / 400 for body and interactive copy; 15px / 700 for button labels; 22px / 500 for subheads — all on the same family with weight doing the differentiation.
- Forest green CTAs (`{colors.primary}` — #576c1d) on warm parchment (`{colors.surface-1}` — #f4f3e6) rather than on white.
- Pill-only button geometry — 29px radius on captured buttons, 1000px declared as the pill token. No rounded-rectangle CTAs anywhere in the marketing surface.
- Midnight ink with a green tint (`{colors.ink}` — #011400) carries all body text and borders, connecting every text element to the botanical palette.
- Loyalty program module runs the darkest hearty-green (#1d4321) as a full-bleed card, inverting to white text — the only dark-surface moment in the system.
- Botanical token naming layer in CSS custom properties creates a legible story at the code level before any visual rendering.

## Colors

### Brand

- **Panera Green** (`{colors.primary}` — #576c1d): frequency 19. Used as text (9), border (9), background (1). The mid-tone forest green — fills primary CTA buttons and nav accents across the page. Wired in CSS as `--pnra-color-panera-green`.
- **Hearty Green** (`{colors.primary-dark}` — #1d4321): frequency 6. Used as text (3), border (3). The deep forest tone — carries loyalty card backgrounds and active state fills. Named `--pnra-color-hearty-green` in the CSS.
- **Mid Green** (`{colors.primary-mid}` — #4c753f): frequency 18. Used as text (9), border (9). An intermediate green step between hearty-green and panera-green; appears on secondary interactive elements without a declared CSS variable name.
- **Chartreuse** (`{colors.chartreuse}` — #e0eb60): frequency 2. A bright yellow-green declared as `--pnra-color-chartreuse`; appears in promotional accent contexts but is rare in the captured surface.

### Surface

- **Soft White** (`{colors.surface-1}` — #f4f3e6): frequency 3, all as background fills. The primary parchment canvas — named `--pnra-color-soft-white`. 15 perceptual points warmer than pure white; carries the hero banner and card backgrounds.
- **Extra Light Clay** (`{colors.surface-2}` — #eae9e6): frequency 5 (4 as shadow, 1 as border). A slightly grayer parchment used for shadow stops and hairline borders. Named `--pnra-color-extra-light-clay`.
- **Canvas** (`{colors.canvas}` — #ffffff): pure white, used on the top-nav background and where parchment would contrast too heavily against photography.

### Text

- **Ink** (`{colors.ink}` — #011400): frequency 58. Used as text (29), border (29). The midnight near-black with a green undertone — carries every body element and border line across the page. Named `--pnra-color-midnight`.
- **Ink Neutral** (`{colors.ink-neutral}` — #000000): frequency 240, used as text (120) and border (118). The dominant structural dark — shadow and the heaviest text instances. Named `--pnra-color-black`.
- **Ink Muted** (`{colors.ink-muted}` — #6f6f75): frequency 2. A cool-neutral mid-gray for secondary labels; appears only twice in the captured surface.

### Accent

- **Watermelon** (`{colors.watermelon}` — #ff978f): frequency 1, background only. A warm salmon-pink declared as `--pnra-color-light-watermelon`; appears on a single promotional accent in the captured surface. The only chromatic departure from the green-and-earth palette.

## Typography

### Font Families

The system runs three typefaces: **Champion** for all uppercase display and hero banners, **Sequel Sans** for all body, navigation, button, and subhead copy, and **Ringside** for intermediate heading tiers (34–32px). Champion and Ringside are licensed typefaces; Sequel Sans is also proprietary. Fallbacks for all three walk to `"Helvetica Neue", Helvetica, Arial, sans-serif`.

The Champion / Sequel Sans split is the defining typographic move. The two families have radically different personalities — Champion is poster-weight condensed, Sequel Sans is open and humanist — and Panera uses both without cross-contamination.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 66px | 400 | 66px | Hero banner h1 — "MAKE IT A STUFFER" (Champion, uppercase condensed) |
| `{typography.display-lg}` | 38px | 400 | 40px | Section headline — "FLAVOR STARTS HERE" (Champion) |
| `{typography.display-md}` | 32px | 400 | 34px | Medium promotional headlines (Champion) |
| `{typography.heading-lg}` | 34px | 400 | 39px | Editorial heading tier (Ringside) |
| `{typography.heading-md}` | 32px | 400 | 32px | Sub-section headings (Ringside) |
| `{typography.subhead-lg}` | 22px | 500 | 26px | Menu category subheads (Sequel Sans) |
| `{typography.subhead-md}` | 18px | 700 | 18px | Product name labels (Sequel Sans) |
| `{typography.body-lg}` | 18px | 400 | 22px | Lead paragraph text (Sequel Sans) |
| `{typography.body-md}` | 15px | 400 | 22px | Default body and nav link text (Sequel Sans) |
| `{typography.body-sm}` | 13px | 400 | 18px | Secondary labels and small captions (Sequel Sans) |
| `{typography.label-md}` | 15px | 700 | 22px | Button labels and emphasis (Sequel Sans) |
| `{typography.caption}` | 10px | 400 | 12px | Fine print, icon labels (Sequel Sans) |

### Principles

Champion tops out at 66px in the hero — the loudest moment — and descends to 32px for secondary banners. It always renders uppercase; there is no mixed-case instance in the captured surface. Sequel Sans handles everything else, with weight (400 for body, 700 for buttons and labels) doing the differentiation within the family rather than size. The `{typography.display-xl}` token at 66px / weight 400 is unusual: the face is inherently heavy by its design, so the weight property is 400 even though the visual weight reads as bold.

### Note on Font Substitutes

Champion and Ringside are licensed. **Bebas Neue** or **Anton** replicate the uppercase-condensed personality of Champion at open-source cost. Sequel Sans is proprietary; **Inter** or **DM Sans** transfer cleanly at the same 15–18px body sizes. Maintain the two-family split — attempting to replace both with a single face that covers both registers loses the brand's announce/inform distinction.

## Layout

### Spacing System

- **Base unit:** 15px — the dominant structural padding value, appearing 12 times in the extracted surface (used as vertical section rhythm).
- **Tokens:** `{spacing.xs}` 10px · `{spacing.sm}` 15px · `{spacing.md}` 16px · `{spacing.base}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.2xl}` 50px.
- **Hero section padding:** 40px top, 50px horizontal on the banner cards.
- **Card internal padding:** 16px standard; 24px on the loyalty full-bleed card.
- **Nav item padding:** 15px vertical, 0px horizontal gap between nav items, with CTA button at 40px horizontal padding.

### Grid & Container

- **Max content width:** ~1280px at desktop.
- **Hero banner:** full-width parchment card with the hero image spanning edge-to-edge behind the overlaid headline and CTA stack.
- **Below-fold:** 2-column editorial grid (two promotional panels side-by-side), collapsing to a single column for the loyalty module.
- **Footer:** multi-column link directory — 5 columns of navigation links on ink-black background.

### Rhythm

The page alternates between a full-bleed hero banner and constrained editorial bands. The loyalty module breaks the pattern by introducing the darkest surface (hearty-green, #1d4321) as a full-bleed departure before returning to parchment. Vertical spacing is generous — 15px is the base rhythm unit with sections sitting at 40–50px of breathing room.

## Elevation

The system has a **hairline-and-clay elevation model**. There are no traditional drop shadows in the captured surface — depth comes from `{colors.surface-2}` (#eae9e6, used 4 times as shadow) to define card boundaries against the parchment canvas. The extra-light-clay tone provides just enough contrast to lift cards without introducing shadow blur.

- **Flat (no shadow):** hero, nav, footer, promotional banner panels.
- **Clay lift:** card surfaces use the `{colors.surface-2}` as a soft 1px shadow or border to separate from the parchment canvas.
- **Surface inversion:** the loyalty card (`{component.loyalty-card}`) uses hearty-green fill — the single dark-surface elevation in the system.

## Shapes

The radius language is **pill-first** with an 8px standard for card containers:

- `{rounded.none}` 0px — the footer and full-bleed hero panels.
- `{rounded.md}` 8px — menu cards, text inputs, and interior card elements.
- `{rounded.lg}` 16px — larger promotional cards and the loyalty module container.
- `{rounded.pill}` 29px — all CTA buttons on the captured page.
- `{rounded.full}` 1000px — the declared maximum-pill token for badge and tag variants.

There is no 4px tier. Even small inputs default to 8px. The pill-only CTA commitment is absolute — no rounded-rectangle button appears anywhere in the marketing surface.

## Components

**`button-primary`** — Forest-green `{colors.primary}` fill, white text, Sequel Sans bold label, 29px pill radius, 15×24px padding. "Start an Order" is the canonical instance, appearing three times on the page in identical treatment.

**`button-primary-hover`** — Deepens to hearty-green `{colors.primary-dark}` (#1d4321) on hover. The single darker step in the green scale.

**`button-secondary`** — Transparent fill, forest-green text and border, pill radius. Used for tertiary actions.

**`top-nav`** — White `{colors.canvas}` surface, 56px height. The Panera wordmark-logotype sits flush left; Locations, Menu, Gift Cards, and Catering links center; Sign In / Join MyPanera and "Start an Order" CTA pill flush right.

**`nav-link`** — Transparent background, midnight ink text in `{typography.body-md}`, 10×16px padding.

**`hero-heading`** — Transparent background, midnight ink text in `{typography.display-xl}` (Champion, 66px / 400). The promotional banner headline.

**`hero-banner`** — Parchment `{colors.surface-1}` background, 16px radius on the card container, 40×50px padding. The hero photography fills the right two-thirds; the headline and CTA stack left.

**`section-heading`** — Transparent background, midnight text in `{typography.display-lg}` (Champion). Used for "FLAVOR STARTS HERE" and "MYPANERA REWARDS."

**`body-paragraph`** — Default midnight running-text at `{typography.body-md}`.

**`body-paragraph-muted`** — Cool-neutral `{colors.ink-muted}` for secondary copy.

**`card`** — Parchment surface, midnight text, 8px radius, 16px padding. The standard content card for promotional panels.

**`menu-card`** — White surface with extra-light-clay border, midnight text in `{typography.subhead-md}` (Sequel Sans 18px / 700). Menu item thumbnail cards.

**`loyalty-card`** — Hearty-green `{colors.primary-dark}` fill, white text, 16px radius, 24px padding. The MyPanera loyalty module — the single dark-canvas surface in the marketing system.

**`text-input`** — White surface, midnight text, extra-light-clay border, 8px radius, 10×16px padding, 44px height.

**`eyebrow-label`** — Transparent background, small Sequel Sans 13px / 400 for above-heading context labels.

**`footer`** — Ink-black `{colors.ink}` surface, white text in `{typography.body-md}`, 45×50px padding. Five-column link directory with social icons.

## Do's and Don'ts

**Do** use Champion only for uppercase promotional banners and headline moments. The face has no lowercase character in this brand context; mixing it with sentence-case copy breaks the announce/inform split.

**Do** fill all CTAs with forest green (`{colors.primary}` — #576c1d) on parchment backgrounds (`{colors.surface-1}` — #f4f3e6). The green-on-parchment pairing is the system's most distinctive visual moment; swapping to white backgrounds flattens it to generic QSR styling.

**Do** maintain pill geometry on every button. The 29px radius is not a rounded rectangle — it is a true pill, and mixing in 4–8px radius buttons disrupts the organic warmth signal.

**Do** use `{colors.ink}` (#011400) for all text and border elements rather than `{colors.ink-neutral}` (#000000). The green-tinted midnight reads warmer and connects every text element to the botanical palette.

**Don't** use the chartreuse (#e0eb60) as a CTA fill or text color. It appears twice in the captured surface in promotional accent contexts only; at full-weight fills it clashes with the earthy-green range. Use `{colors.primary}` instead.

**Don't** render body copy in Champion. Sequel Sans carries all informational text — body, labels, nav links, sub-heads. Champion at body sizes (15px) would be unreadable and off-brand.

**Don't** introduce dark-surface sections beyond the loyalty module pattern. The hearty-green `{colors.primary-dark}` full-bleed card works because it appears once, late in the page. Multiple dark sections erode its impact.

**Don't** mix the watermelon pink (`{colors.watermelon}` — #ff978f) with the forest-green range as co-equal accents. The watermelon is a promotional accent for seasonal campaigns — placing it beside forest green reads as a competing brand signal.

## Known Gaps

- **Hover and focus states:** documented for `{component.button-primary-hover}` only; focus rings, active press states, and disabled tints are not captured from the marketing surface.
- **Mobile layout:** the captured surface is desktop-width (1280px). Nav collapses to a hamburger and the hero banner reflows to a stacked single-column; neither is represented in the component tokens.
- **Dark mode:** the captured marketing surface is light-only. No dark variant is declared in the CSS custom properties.
- **Menu product surface:** the full /menu pages run a denser card grid with pricing, allergen badges, and calorie counts — a richer surface with more component types than the homepage exposes.
- **Loyalty program states:** the MyPanera module on the homepage shows only the unauthenticated join state. Authenticated member states with tier badges, points counters, and reward cards are not represented.
- **Animation:** the hero banner cycles through promotional content on a timer; easing curves and transition timing are not captured in this spec.