Design System Inspiration of Panera (iOS)

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

Role	Light Mode	Dark Mode
Bread Tan	`#D8B271`	`#D8B271`
Soup Orange	`#E07A2F`	`#E88A42`
Berry Red	`#B0324B`	`#C44A63`
Gold Star (reward / rating / Sip Club)	`#F2B705`	`#F4C42E`
Sip Club Coffee	`#5A3A22`	`#7A5436`

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

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Screen Title	Poppins	32pt	800	1.2	-0.5pt	"Good morning", screen headers
Hero / Reward Headline	Poppins	26pt	700	1.25	-0.3pt	"You're 2 visits from a reward"
Section Header	Poppins	22pt	700	1.3	-0.2pt	"Order Favorites", "Soups"
Card / Item Title	Poppins	18pt	600	1.3	-0.1pt	Item-detail name, large card name
Item Name (list)	Poppins	15pt	600	1.35	0pt	Menu-row item name
Body	Inter	16pt	400	1.5	0pt	Item descriptions, paragraph copy
Meta / Calorie	Inter	14pt	400	1.4	0pt	"720 cal", "Ready in 12–17 min"
Price	Poppins	14pt	700	1.3	0pt	"$7.59" item price
Reward Tag	Poppins	12pt	700	1.0	0.4pt (uppercase)	"FREE WITH 2,500 PTS"
Button	Poppins	16pt	700	1.0	0.2pt	Primary/secondary buttons
Pill / Chip	Inter	13pt	600	1.0	0.1pt	Filter chips, pickup/delivery toggle
Tab Label	Inter	10pt	600	1.0	0.1pt	Bottom tab labels
Caption	Inter	12pt	500	1.4	0pt	Fine print, disclaimers

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.

Level	Treatment	Use
Flat (Level 0)	No shadow	Menu rows, page content, dividers
Raised (Level 1)	`rgba(60,40,10,0.06) 0 2px 8px`	Photo cards, rewards card
Floating (Level 2)	`rgba(60,40,10,0.10) 0 4px 16px`	Sticky CTA bar, store selector
Sheet (Level 3)	`rgba(40,30,10,0.16) 0 -4px 24px`	Cart sheet, customization sheet, store picker
Modal Overlay	`rgba(20,15,5,0.4)`	Dim behind sheets and modals

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

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	List photos 80pt; hero photo 240pt; single-column menu
iPhone 13/14/15	390pt	Standard layout
iPhone 15/16 Pro	393pt	Dynamic Island accommodated in transparent top nav
iPhone 15/16 Pro Max	430pt	List photos 100pt; hero photo 360pt
iPad (portrait)	768pt	2-column menu grid; rewards card spans top; content max 720pt centered
iPad (landscape)	1024pt+	3-column menu grid; persistent category sidebar

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

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

FilesExpand file tree

DESIGN.md

Latest commit

History