What is Panera's primary brand color?

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.

What typefaces does Panera use, and what are good substitutes?

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.

Why does Panera use a warm parchment background rather than white?

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.

What is Panera's button style?

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.

Can I use this DESIGN.md to build a food-delivery or restaurant marketing page?

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.

Panera Design System

Panera's marketing design system as a DESIGN.md file.

About Panera DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source panerabread.com

Food & Delivery

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.

What makes it distinct

Two-typeface display splitChampion 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 namesforest 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 geometryevery primary button on the page is 29px–1000px radius; no rounded-rectangle CTAs exist in the captured surface
Midnight near-black as inktext 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 canvassoft-white (#f4f3e6) appears as the primary off-white background, a cream tone 15 points warmer than pure white

Live at panerabread.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

panerabread.com

Explore Panera

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Panera design system FAQ

Common questions about Panera's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Panera — official site

Panera's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.