Panera DESIGN.md

1. Visual Theme & Atmosphere

Panera's iOS app feels like walking into a warm bakery-café. The canvas is a soft warm white (#FFFFFF with cream-tinted cards at #F4EFE1), never a clinical pure-white tech surface, because the brand is built on the idea of "fresh, warm, real food." The defining visual is food photography: every menu item — soups, sandwiches, salads, baked goods — is shown as a large, appetizing, full-color photo on a rounded card. Photography is the hero; the UI chrome recedes so the food does the selling. The single brand color is Panera Green (#4C8B2B, brightening toward #6BBE45 for emphasis and dark mode), used for the primary "Add to Order" / "Checkout" buttons, active tabs, the MyPanera rewards progress arc, and reward tags — and almost nowhere else. Action is signaled by this one green; everything else is warm neutral.

The two signature UI moments are the MyPanera rewards card and the menu-to-cart order flow. The rewards card sits near the top of Home as a green gradient banner showing the member's progress toward their next reward (a progress bar or coin-counter), Unlimited Sip Club renewal status, and unlockable freebies. It is the loyalty engine that drives repeat visits. The order flow is the core transaction: browse a category, tap a photo card, land on an item-detail screen with a big hero photo, a quantity stepper, customization rows (bread choice, add-ons, "No tomatoes"), calorie counts, and a sticky green "Add to Order" bar. From there a cart with pickup/delivery toggle leads to a green checkout. This menu → customize → cart → checkout spine is the product.

The color system around the green is warm and edible: bread tan (#D8B271), soup orange (#E07A2F), berry red (#B0324B) and a gold review/loyalty star (#F2B705) recur on cards, badges, and the Sip Club mark. Backgrounds are cream and oat, never stark. The rewards system uses green as "earned/available" and gold as the celebratory "star reward" accent.

Typography is a friendly geometric sans for brand/display moments (Panera's marketing uses a rounded humanist face — Poppins is the closest free analog) paired with a highly legible neutral sans for body and menu copy (Inter). On iOS both fall back to SF Pro. Hierarchy is product-like and appetite-forward: large warm screen titles, bold item names, readable descriptions, and prominent prices. The type system stays approachable — it should read like a neighborhood bakery menu board, not a fintech dashboard.

Key Characteristics:

• Warm white canvas (#FFFFFF) light / warm near-black (#14140F) dark — bakery-warm, never clinical or cold-gray
• Cream-tinted surfaces (#F4EFE1) on cards and rows — the "paper menu" feel
• Food photography is the hero — large rounded photo cards do the selling
• A single brand action color: Panera Green #4C8B2B (bright #6BBE45) for CTAs, active tabs, rewards arc, tags
• MyPanera rewards card — green gradient banner with progress + Unlimited Sip Club status near top of Home
• Menu → item detail (hero photo + stepper + customization) → cart (pickup/delivery) → green checkout spine
• Gold star #F2B705 as the celebratory "reward / Sip Club / rating" accent
• Quantity stepper and customization rows as the core ordering atoms
• Warm edible palette: bread tan, soup orange, berry red as photographic/badge accents
• Approachable geometric display sans + neutral body sans — neighborhood-bakery, not corporate
• Minimal navigation chrome: 5-tab bottom bar — Home / Order / Rewards / Favorites / Account

2. Color Palette & Roles

Primary (Interactive)

• Panera Green (#4C8B2B): Primary interactive color — "Add to Order", "Checkout", "Start Order" button background, active selections.
• Panera Green Bright (#6BBE45): Emphasis / dark-mode action color, rewards progress fill, success accents, link-like text.
• Panera Green Pressed (#3C6E22): Pressed state for primary buttons.
• Green Tint Surface (#EAF3E3): 10% green wash behind selected order options and applied-reward rows (light).

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas.
• Warm Cream (#F4EFE1): Card backgrounds, grouped rows, the "paper menu" surface.
• Oat Surface (#FAF6EC): Subtle elevated panels, search field fill.
• Surface Pressed (#EDE6D4): Pressed/selected rows.
• Divider (#E7E0CF): Hairline dividers between menu rows and sections.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#14140F): Primary dark canvas — warm near-black, NOT cold gray.
• Dark Surface 1 (#1E1E18): Cards, grouped rows, elevated surfaces.
• Dark Surface 2 (#28281F): Pressed rows, stepper/chip fills.
• Dark Divider (#33332A): Hairline dividers.

Text

• Text Primary Light (#2A2A1F): Primary body text — warm dark, NOT pure black.
• Text Secondary Light (#6C6655): Descriptions, metadata, calorie counts.
• Text Tertiary Light (#9C9684): Disabled, very low-emphasis.
• Text Primary Dark (#F3EFE4): Primary body on dark — warm cream-white.
• Text Secondary Dark (#B4AE9C): Secondary on dark.
• Text Tertiary Dark (#76705F): Disabled on dark.

Brand / Photographic Accents

Semantic

• Success Green (#4C8B2B light / #6BBE45 dark): Order placed, reward unlocked.
• Error Red (#D6452F light / #E0594B dark): Card declined, item unavailable.
• Warning Amber (#E07A2F): Store closing soon, limited availability.
• Info Green Tint (#EAF3E3 light / #1E2A18 dark): Applied-reward / saved-favorite background.

3. Typography Rules

Font Family

• Display / Brand: Poppins (by Indian Type Foundry / Jonny Pinhorn, SIL OFL) — geometric humanist sans, the closest free analog to Panera's warm rounded marketing face. Used for screen titles, item names, prices, reward headlines.
• Body / UI: Inter (by Rasmus Andersson, SIL OFL) — neutral high-legibility UI sans for descriptions, menu copy, metadata, calorie counts.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• iOS: SF Pro is the system fallback when Poppins/Inter aren't bundled — keep the warm, friendly tone.

Hierarchy

Principles

• Appetite-forward hierarchy: item names and prices are bold and prominent; descriptions stay readable but secondary — the photo + name + price is the unit.
• Display vs body split: Poppins carries brand/display warmth (titles, names, prices, reward headlines); Inter carries dense legible copy (descriptions, metadata).
• Weight concentrated at 400 / 500 / 600 / 700 / 800: regular body, medium captions, semibold names, bold prices and buttons, extrabold screen titles. No thin, no hairline.
• Warm dark text, never pure black: body text is #2A2A1F, preserving the bakery warmth.
• Dynamic Type first-class: titles, item names, body, prices, calories scale; tab labels, reward tags, chips stay fixed.

4. Component Stylings

Buttons

Primary Button ("Add to Order" / "Checkout" / "Start Order")

• Shape: Fully rounded pill, 999pt corner radius
• Background: #4C8B2B (Panera Green) light / #6BBE45 dark
• Text: #FFFFFF light / #14140F dark
• Padding: 14pt vertical, 28pt horizontal (full-width sticky variant: 16pt vertical)
• Font: Poppins 16pt weight 700
• Pressed: background #3C6E22 + scale 0.98
• Sticky cart variant: full-width, pinned bottom above tab bar, shows "Add to Order · $7.59"

Secondary / Outline Button ("Customize" / "Add to Favorites")

• Background: transparent
• Text: #4C8B2B light / #6BBE45 dark
• Border: 1.5pt #4C8B2B light / #6BBE45 dark
• Padding: 12pt vertical, 22pt horizontal
• Corner radius: 999pt (pill)
• Font: Poppins 14pt weight 600
• Pressed: background #EAF3E3 light / #1E2A18 dark

Pill / Toggle Button (Pickup / Delivery, filter chips)

• Background: #FAF6EC light / #28281F dark (selected: #4C8B2B / #6BBE45)
• Text: #2A2A1F / #F3EFE4 (selected: #FFFFFF / #14140F)
• Border: 1pt #E7E0CF / #33332A
• Padding: 10pt vertical, 18pt horizontal
• Corner radius: 999pt
• Font: Inter 13pt weight 600

Text Button ("View full menu" / "See all")

• Font: Inter 14pt weight 600
• Color: #4C8B2B light / #6BBE45 dark
• No underline; chevron › optional trailing
• Pressed: 60% opacity

Core Atoms

Menu Item Card (the core atom)

• Layout: leading square food photo (92pt list / full-width hero on detail), trailing name + description + price + add button
• Photo corner radius: 14pt
• Name: Poppins 15–18pt w600
• Description: Inter 12–14pt w400 #6C6655, 2-line clamp
• Price: Poppins 14pt w700
• Add button: 30pt green circle with white + glyph
• Reward tag (optional): "★ FREE WITH 2,500 PTS" in Poppins 12pt w700 #4C8B2B
• Row divider: 0.5pt #E7E0CF

MyPanera Rewards Card

• Background: linear gradient #4C8B2B → #6BBE45 (135°)
• Corner radius: 18pt
• Padding: 16pt all
• Label: "MYPANERA REWARDS" uppercase Poppins 11pt w700, 92% white
• Headline: "You're 2 visits from a reward" Poppins 19pt w700 #FFFFFF
• Subtext: Unlimited Sip Club / renewal status, Inter 12pt 92% white
• Progress bar: 6pt track rgba(255,255,255,0.28), fill #FFFFFF, 3pt radius
• Trailing chevron › to rewards detail

Quantity Stepper

• Container: pill, #FAF6EC / #28281F, 1pt #E7E0CF / #33332A border
• − / + glyphs: Poppins 16pt #4C8B2B / #6BBE45, 44pt hit area each
• Count: Poppins 15pt w700 #2A2A1F / #F3EFE4, centered
• Spacing: 16pt between glyphs and count

Customization Row

• Full-width, 52pt tall, leading label (Inter 16pt), trailing radio/checkbox or stepper
• Selected: leading #EAF3E3 tint / green checkmark #4C8B2B
• Add-on price suffix: "+$1.49" Inter 14pt #6C6655
• Divider: 0.5pt #E7E0CF

Reward / Loyalty Chip

• Pill, #FAF6EC / #28281F, 1pt border
• Leading 22pt green coin (gradient #6BBE45 → #4C8B2B)
• Text: "2,500 pts available" Poppins 13pt w700
• Used for available points, applied rewards, Sip Club status

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: #FFFFFF / #14140F at 94% with blur, 0.5pt top border #E7E0CF / #33332A
• Tabs (5): Home, Order, Rewards, Favorites, Account
• Icon size: 22pt
• Active color: #4C8B2B light / #6BBE45 dark (icon fills solid)
• Inactive: #9C9684 light / #76705F dark
• Labels: Inter 10pt w600, always shown

Top Nav (Item detail / Cart)

• Height: 44pt + safe area, transparent over hero photo (scrolls to opaque)
• Leading: back chevron in a 32pt translucent circle over photo
• Trailing: heart (favorite) + share, same translucent circle treatment
• Title: appears Poppins 17pt w600 when scrolled past hero

Category Strip (Order tab)

• Horizontal scroll of category chips/photos: Soups, Sandwiches, Salads, Bowls, Bakery, Drinks
• Active category: green underline 2pt #4C8B2B / #6BBE45
• Chip text: Inter 13pt w600

Input Fields

Search Bar ("Find a menu item")

• Height: 44pt
• Background: #FAF6EC / #28281F
• Border: none
• Corner radius: 999pt (pill)
• Leading magnifyingglass 16pt #6C6655 / #B4AE9C
• Placeholder: "Search the menu" Inter 14pt #9C9684
• Focus: 1.5pt #4C8B2B border

Address / Pickup Selector

• Full-width row, 56pt, leading location pin (green), title + subtitle stack
• Title: "Pickup at Cherry Creek" Poppins 15pt w600
• Subtitle: "Ready in ~15 min" Inter 13pt #6C6655
• Trailing chevron, tap opens store/address sheet

Distinctive Components

MyPanera Rewards Card — green-gradient progress banner; the loyalty engine pinned near top of Home (see Core Atoms).

Unlimited Sip Club Badge

• Coffee-cup glyph + "Unlimited Sip Club" label
• Background: Sip Club coffee #5A3A22 or green; gold star accent for active membership
• Used on Home banner and account screen to surface subscription status/renewal

Item Detail Hero

• Full-bleed food photo, 280–340pt tall
• Name, calories, price overlaid below on cream surface
• Customization rows + quantity stepper
• Sticky green "Add to Order · $7.59" bar pinned bottom

Reward Star Tag

• Inline "★ FREE WITH 2,500 PTS" tag on redeemable items
• Gold star #F2B705 + green text #4C8B2B
• Signals which menu items the member's points can unlock

Pickup / Delivery Toggle

• Segmented pill at top of cart
• Selected segment: green fill #4C8B2B, white text
• Unselected: transparent, #6C6655 text

Cart Summary Sheet

• Bottom sheet listing line items with thumbnail, name, qty stepper, price
• Subtotal / rewards-applied / total rows
• Green "Checkout" pill pinned bottom
• Applied reward row tinted #EAF3E3 with green checkmark

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 18, 20, 24, 28, 32, 40, 56
• Card vertical gap: 0 (rows divided by hairline) or 12pt (separated photo cards)
• Section top margin: 24pt
• Screen content inset: 16pt horizontal

Grid & Container

• iPhone: content at 16pt horizontal insets; hero photos full-bleed
• iPad: content at max-width 720pt centered, 24pt insets; menu in 2-column grid
• Menu list: single column of rows; featured items in horizontal photo carousel
• Category strip: horizontal scroll, 12pt gap between chips

Whitespace Philosophy

• Food breathes: photos get generous size and rounded corners; descriptions stay tight under names
• Rewards card is the anchor: it always sits in a calm zone near the top of Home with margin around it
• Sticky CTA never crowds: the green "Add to Order" bar floats with 16pt internal padding above the tab bar
• Warm dividers, not boxes: menu rows are separated by 0.5pt hairlines, not heavy card borders

Border Radius Scale

• Square (0pt): Full-bleed hero photos, dividers
• Subtle (6pt): Inline tags, small badges
• Standard (10pt): Small thumbnails, chips
• Comfortable (14pt): Menu photo cards, list food images
• Card (18pt): Rewards card, sheets, large surfaces
• Large (24pt): Modal top corners
• Pill (999pt): Buttons, toggles, search bar, reward chips, steppers
• Circle (50%): Add buttons, avatars, nav circles, reward coins

6. Depth & Elevation

Panera uses gentle, warm elevation — soft shadows that suggest fresh layers, never harsh tech drop-shadows.

Shadow Philosophy: shadows are warm-tinted (brown-amber, not neutral gray) so they read as natural depth against cream surfaces. The rewards card and food cards get a soft raise so they feel tangible; the sticky checkout bar floats just enough to read as "always available". On dark mode, shadows nearly vanish, so a 1pt #33332A divider/hairline becomes the elevation cue on sheets and the sticky bar.

Motion

• Add to Order: tapping the green CTA triggers a 200ms scale-bounce + the cart badge increments with a soft haptic; a brief "Added" toast slides up 250ms ease-out
• Quantity stepper: count number cross-fades + ticks 120ms; soft haptic on each tap
• Rewards progress: progress fill animates from old → new value over 600ms ease-out when a reward is earned; gold star sparkle on unlock
• Category switch: underline slides between categories 200ms ease-out; menu list cross-fades
• Item detail open: photo card expands into full-bleed hero with a 300ms shared-element-style transition (iOS push)
• Cart sheet: slides up 300ms ease-out; backdrop dims simultaneously
• Pickup/Delivery toggle: selected fill slides 180ms ease-out
• Pull to refresh (Home): bread-loaf / Panera mark spinner
• Haptic feedback: soft impact on Add to Order, stepper tap, reward unlock, toggle switch

7. Do's and Don'ts

Do

• Use warm white (#FFFFFF) with cream cards (#F4EFE1) in light — Panera is a bakery, not a tech app
• Use warm near-black (#14140F) for dark mode — NOT cold gray, NOT pure black
• Use warm dark text (#2A2A1F) — NOT pure black
• Keep Panera Green (#4C8B2B, bright #6BBE45) as the single action color — CTAs, active tabs, rewards arc
• Make food photography the hero — large rounded photo cards do the selling
• Pin the MyPanera rewards card near the top of Home — it's the loyalty engine
• Use the gold star (#F2B705) only for reward / Sip Club / rating moments
• Use fully-rounded pills for buttons and toggles — Panera's UI is soft and rounded
• Pin a sticky green "Add to Order · $price" bar on item detail
• Show calorie counts next to prices — it's a Panera signature
• Use the quantity stepper + customization rows as the ordering atoms

Don't

• Don't use pure white tech surfaces — the cream warmth is the brand
• Don't introduce a second brand action color — green is the only CTA color
• Don't use cold gray dark mode — keep it warm #14140F
• Don't use pure black (#000000) for body text — #2A2A1F warm dark is correct
• Don't make the green dark variant disappear on dark — use #6BBE45 for legible CTAs
• Don't bury the MyPanera rewards card — it must be prominent on Home
• Don't over-use the gold star — it's the celebratory loyalty accent, not decoration
• Don't use sharp rectangular buttons — Panera buttons are pills
• Don't hide prices or calories — they belong next to the item name
• Don't add heavy card borders around menu rows — use warm 0.5pt hairlines
• Don't animate aggressively — motion is gentle 180–600ms ease-out

8. Responsive Behavior

Device Sizes

Dynamic Type

• Screen titles, item names, descriptions, prices, calories: full scale
• Tab labels, reward tags, filter chips, stepper glyphs: FIXED (layout-sensitive)
• Photo card minimum sizes preserved; text truncates with ellipsis at extreme scales

Orientation

• All screens support rotation
• iPad split: category sidebar (landscape) + menu grid + cart panel
• Hero photos rotate freely; sticky CTA bar stays pinned bottom

Touch Targets

• Add button (circle): 30pt glyph, 44pt hit area
• Stepper − / +: 24pt glyph, 44pt hit area
• Tab bar icons: 22pt glyph, 44pt hit area
• Menu row: full-row tap, ≥ 100pt tall
• Primary buttons: 48pt tall minimum

Safe Area Handling

• Top: transparent nav respects safe area and Dynamic Island over hero photo
• Bottom: sticky CTA bar and tab bar respect home indicator
• Keyboard: search and address fields scroll above keyboard
• Sides: 16pt content inset

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Card surface (light): #F4EFE1
• Canvas (dark): #14140F
• Surface (dark): #1E1E18
• Divider: #E7E0CF light / #33332A dark
• Text primary: #2A2A1F light / #F3EFE4 dark
• Text secondary: #6C6655 light / #B4AE9C dark
• Panera Green (primary): #4C8B2B
• Panera Green Bright (dark CTA / accent): #6BBE45
• Panera Green Pressed: #3C6E22
• Green tint surface: #EAF3E3 light / #1E2A18 dark
• Gold star (reward): #F2B705
• Bread tan: #D8B271
• Soup orange: #E07A2F
• Berry red: #B0324B
• Error: #D6452F light / #E0594B dark

Example Component Prompts

• "Build the Panera MyPanera rewards card in SwiftUI: full-width rounded rectangle, 18pt corner radius, linear gradient #4C8B2B → #6BBE45 at 135°, 16pt padding. Top row: 'MYPANERA REWARDS' uppercase Poppins 11pt w700 white at 92% opacity, trailing chevron. Headline: 'You're 2 visits from a reward' Poppins 19pt w700 #FFFFFF. Subtext: 'Unlimited Sip Club renews May 28' Inter 12pt white 92%. Bottom: 6pt progress track rgba(255,255,255,0.28) with white fill at 64%, 3pt radius. Soft warm shadow rgba(60,40,10,0.06) 0 2px 8px."

• "Create a Panera menu item row: leading 92pt square food photo with 14pt corner radius, trailing column with name in Poppins 15pt w600 #2A2A1F, description in Inter 12pt w400 #6C6655 clamped to 2 lines, optional reward tag '★ FREE WITH 2,500 PTS' in Poppins 12pt w700 #4C8B2B, then a foot row with price 'Poppins 14pt w700' and a 30pt green circle add-button with a white +. Row divider 0.5pt #E7E0CF."

• "Build the Panera item-detail screen: full-bleed food hero photo 320pt tall, transparent top nav with back/heart/share in 32pt translucent circles. Below on cream #F4EFE1: item name Poppins 18pt w600, '720 cal · $7.59' Inter 14pt #6C6655. Customization rows (52pt, label + radio/checkbox, '+$1.49' suffix). Quantity stepper pill. Sticky bottom bar: full-width Panera Green #4C8B2B pill, Poppins 16pt w700 white, 'Add to Order · $7.59', floating shadow rgba(60,40,10,0.10) 0 4px 16px."

• "Render the Panera quantity stepper: pill container #FAF6EC (dark #28281F) with 1pt #E7E0CF border, − and + glyphs in Poppins 16pt #4C8B2B (dark #6BBE45) with 44pt hit areas, centered count in Poppins 15pt w700 #2A2A1F. Soft haptic + 120ms count cross-fade on each tap."

• "Build the Panera primary button: fully-rounded pill (999pt radius), background #4C8B2B (dark #6BBE45), text #FFFFFF (dark #14140F) in Poppins 16pt w700, 14pt vertical / 28pt horizontal padding. Pressed: background #3C6E22 + scale 0.98 + soft haptic."

• "Render the Panera bottom tab bar: 56pt + safe area, background #FFFFFF / #14140F at 94% with blur, 0.5pt top border. 5 tabs — Home, Order, Rewards, Favorites, Account — 22pt icons, active #4C8B2B (dark #6BBE45) with solid fill, inactive #9C9684 (dark #76705F), Inter 10pt w600 labels always shown."

Iteration Guide

1. Canvas is warm white #FFFFFF with cream cards #F4EFE1 in light, warm near-black #14140F in dark — never cold gray, never pure black
2. Text primary is warm dark #2A2A1F — NOT pure black; body Inter 400, names Poppins 600+
3. Panera Green #4C8B2B (bright #6BBE45 for dark/accent) is the ONLY action color — CTAs, active tabs, rewards arc, tags
4. Food photography is the hero — large rounded photo cards do the selling
5. The MyPanera rewards card (green gradient + progress) is the loyalty engine pinned near top of Home
6. Buttons and toggles are fully-rounded pills — Panera's UI is soft
7. Gold star #F2B705 is reserved for reward / Sip Club / rating moments only
8. The order spine is menu → item detail (hero photo + stepper + customization) → cart (pickup/delivery) → green checkout
9. Show calories next to prices — it's a Panera signature
10. Motion is gentle 180–600ms ease-out; soft haptics on Add to Order, stepper, reward unlock