ui-ux-master 1.2.0 → 1.5.0

package/references/brand-method-enterprise-trust-hub.md

@@ -0,0 +1,298 @@
+# Brand Method: Enterprise Trust Hub
+
+Use this skill when building for B2B SaaS, enterprise software, infrastructure, finance, healthcare, industrial, or any context where the buyer is a professional making a high-stakes purchasing decision.
+
+Reference brands: Microsoft, Cisco, Oracle, SAP, IBM, Siemens, Salesforce, GE, Goldman Sachs, JPMorgan Chase, Philips, HSBC, Bank of America.
+
+---
+
+## When to Apply This Method
+
+Apply Enterprise Trust Hub when:
+- The buyer is a professional: IT decision-maker, CFO, compliance officer, procurement team.
+- The sales cycle is long (weeks to months), involving multiple stakeholders.
+- Proof of security, compliance, reliability, and ROI must be on the page.
+- The primary CTA is "Contact Sales", "Request Demo", or "Get Pricing".
+- The product is B2B software, infrastructure, finance, healthcare systems, or industrial.
+
+Do not apply when:
+- The buyer is a consumer (use Product Cinema, Playful Familiarity, or Conversion Simplicity).
+- Brand storytelling is the primary goal (use Editorial Brand World).
+- The product is simple and direct sign-up (use Conversion Simplicity).
+
+---
+
+## Layout Structure
+
+### Header
+- Logo left.
+- Mega-navigation: audience/role, product/solution, industry, resources, pricing (if available), login, primary CTA ("Get Demo" or "Contact Sales").
+- Mega-nav dropdowns: clean grids of links with icons, grouped by category.
+- Sticky on scroll.
+
+### Homepage Structure (in order)
+1. **Hero** — clear value proposition (what it does + for whom + key outcome). Primary CTA above fold.
+2. **Social proof bar** — 5-8 recognizable customer logos, muted/grayscale.
+3. **Product capability overview** — 3-4 card/icon blocks, one capability each.
+4. **Solution or audience routing** — "For IT Teams | For Finance | For Operations" segmentation.
+5. **Feature deep-dive** — alternating image/text blocks, one feature per section.
+6. **Proof section** — metric cards ("40% faster", "99.99% uptime"), case study card(s).
+7. **Security / compliance** — badges, certifications, brief copy (SOC2, ISO 27001, HIPAA, GDPR).
+8. **CTA section** — "Start Free Trial" or "Talk to Sales", with objection-handling copy.
+9. **Resource section** — whitepaper, webinar, or docs teaser.
+
+### Solution / Product Pages
+- Clear breadcrumb.
+- Hero: product name, value prop, screenshot/diagram, CTA.
+- Feature sections: alternating layout, screenshot or diagram + explanation.
+- Integration section: compatible tools/platforms logos.
+- Pricing teaser (or full pricing page link).
+- Case study or customer quote.
+- Related products/solutions.
+- Footer CTA.
+
+### Navigation
+- Mega-navigation with grouped links.
+- Role/industry segmentation in nav or above nav.
+- Search available in nav.
+- Mobile: hamburger → accordion mega-nav.
+
+---
+
+## Color Scheme
+
+### Primary Palette by Sub-category
+
+**Enterprise Tech / SaaS (Microsoft, Salesforce, IBM)**
+- Background: `#FFFFFF`
+- Primary: `#0078D4` (Microsoft blue), `#00A1E0` (Salesforce), `#1F70C1` (IBM)
+- Surface: `#F4F6F9`
+- Text: `#323130` or `#1A1A1A`
+- Secondary text: `#605E5C`
+- CTA: primary color as background, white text
+- Hover: darken 10%
+- Border: `#EDEBE9`
+- Success: `#107C10`
+- Warning: `#D83B01`
+- Error: `#A4262C`
+
+**Finance / Banking (Goldman Sachs, JPMorgan, HSBC)**
+- Background: `#FFFFFF`
+- Primary: Navy `#003366` or `#002D72`
+- Gold accent: `#C8A96E` or `#B8860B` (sparingly, for premium signals)
+- Surface: `#F7F8FA`
+- Text: `#1A1A2E`
+- CTA: navy background, white text
+- Secondary CTA: outlined navy
+
+**Healthcare / Pharma (Philips, 3M)**
+- Background: `#FFFFFF`
+- Primary: `#0072CE` (calm blue) or `#00A7B5` (teal)
+- Surface: `#F0F7FF`
+- Text: `#1A2B3C`
+- Accent for health: teal, green — calming, clinical trust
+
+**Industrial / Infrastructure (Siemens, GE)**
+- Background: `#FFFFFF`
+- Primary: `#009999` (Siemens teal) or `#0067B1` (GE blue)
+- Surface: `#F5F5F5`
+- Text: `#333333`
+- Accent: brand teal or blue, never decorative
+
+### Rules
+- Conservative palette: blue, white, and neutral grays carry enterprise trust.
+- Never use bright orange, yellow, or green as primary CTA in a finance or healthcare context.
+- Security section: dark background with trust icons is acceptable and expected.
+- Proof metrics: use brand color for the number, neutral for the description.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| H1 / hero headline | 36-52px | 600-700 | Clear value prop |
+| H2 / section title | 26-36px | 600-700 | |
+| H3 / feature title | 18-22px | 600 | |
+| Body | 15-17px | 400 | 1.6-1.7 line-height |
+| Proof metric | 40-60px | 700-800 | Tabular numerals |
+| Metric label | 14-16px | 400 | Below the number |
+| CTA | 14-16px | 600 | |
+| Navigation | 14px | 500 | |
+| Badge / certification | 11-12px | 600 | All-caps or bold |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| Enterprise SaaS | Segoe UI (Microsoft), Salesforce Sans, or Inter |
+| Finance | Georgia (editorial), Helvetica Neue, or IBM Plex Sans |
+| Healthcare | Source Sans Pro, Open Sans, Roboto |
+| Industrial | Roboto, Noto Sans, or system font |
+
+### Rules
+- Avoid decorative or display typefaces — clarity and authority over style.
+- Body text line-height must be ≥ 1.6 — enterprise docs are information-dense.
+- Metric numbers: use `font-variant-numeric: tabular-nums` and a display weight.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Icon gaps |
+| `--space-sm` | 8px | Inline elements |
+| `--space-md` | 16px | Card padding, form inputs |
+| `--space-lg` | 24-32px | Section inner padding |
+| `--space-xl` | 48-64px | Between major sections |
+| `--space-2xl` | 80-96px | Hero and CTA sections |
+
+- Enterprise pages are information-dense by design — tighter than consumer pages.
+- Never so dense that scanning is difficult: group related content, use dividers or cards.
+- Card padding: 24-32px. Cards should feel substantial, not cramped.
+
+---
+
+## Motion and Interaction
+
+### Principles
+- Animation is minimal and purposeful — this is a professional context, not entertainment.
+- Proof metric numbers can count up on scroll: `0 → 40%`, duration 800ms, ease-out.
+- Feature illustrations: subtle fade-in on scroll.
+- No parallax, no cinematic scrolling, no custom cursors.
+
+### Key Component States
+| Component | States |
+|---|---|
+| Primary CTA | Default, hover (darken 8%), active (darken 12%), focus (ring), loading, disabled |
+| Secondary CTA | Default (outlined), hover (fill lightly), focus |
+| Accordion / FAQ | Collapsed, expanded (smooth 200ms height transition), focus |
+| Mega-nav dropdown | Closed, opening (200ms fade + translate), open, closing |
+| Form input | Default, focused (border color), filled, error (red border + message), success |
+| Customer logo | Default (grayscale 50%), hover (full color 100%) |
+
+### Form UX
+- Label above input always (not inside as placeholder-only).
+- Inline validation: only after user leaves the field (blur), not on keystroke.
+- Submit: clear loading state, success message, error recovery.
+- Required fields: marked with `*` and explained ("* Required").
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Single column. Mega-nav → hamburger + accordion. Proof metrics stack. CTA full-width. Feature sections stack vertically. |
+| Tablet 768px | 2-column feature sections. Mega-nav collapses. |
+| Desktop 1024px | Full mega-nav. 3-column capability grid. Alternating feature layout. |
+| Wide 1440px+ | Content max-width 1200-1440px centered. No full-bleed backgrounds except CTA/footer. |
+
+- Mobile: mega-nav must work as well as desktop — executives use phones.
+- Mobile: proof metrics still prominent — enterprise buyers research on mobile.
+
+---
+
+## Accessibility Requirements
+
+- Mega-nav: keyboard-navigable with arrow keys within mega-nav dropdowns. `Escape` closes. Focus returns to trigger.
+- Proof metrics: `aria-label="40 percent faster"` — not just "40%".
+- Customer logos: `alt="[Company Name] logo"` or `aria-label` if CSS background.
+- Form: every input has a `<label>`. Error messages are programmatically associated (`aria-describedby`). Required fields marked with `aria-required="true"`.
+- Accordion: `aria-expanded`, `aria-controls`, button as trigger.
+- Tables (pricing, comparison): use `<th scope="col/row">`, proper header association.
+- Color: never use color alone to communicate status — pair with icon or text.
+- PDF downloads: ensure PDFs are tagged and accessible (mention this in handoff).
+- Security / certification badge images: `alt` text names the certification.
+- All text: minimum 4.5:1 contrast.
+
+---
+
+## UX Principles for This Method
+
+1. **Route by role, not by product.** Enterprise buyers think "I'm a CTO" not "I want product SKU 7."
+2. **Proof before promise.** Show the customer logos, the metrics, the case study early. Enterprise buyers are skeptical.
+3. **Make complex simple.** Diagrams, progressive disclosure, comparison tables — never walls of feature bullets.
+4. **Respect the sales cycle.** Provide self-serve research paths (docs, pricing, case studies) AND demo/contact paths.
+5. **Security and compliance are features.** They belong on the product page, not buried in footer.
+6. **Trust is earned incrementally.** Layer proof throughout the page: logos → metric → case study → cert → CTA.
+7. **Forms are gates, not walls.** Ask for minimum information at each stage. Qualify progressively.
+
+---
+
+## Component Specs
+
+### Proof Metric Card
+```
+Background: white or very light surface
+Border: 1px solid var(--border) or none
+Padding: 32px 24px
+Metric number: 48-60px, brand primary, font-weight 700
+Label: 14-16px, text-secondary, margin-top 8px
+Optional icon: 24-32px, muted brand color, above number
+Border-radius: 8px
+```
+
+### Customer Logo Strip
+```
+Display: flex, gap 32-48px, align-items: center, flex-wrap: wrap
+Logo image: grayscale filter 80-100%, opacity 0.5-0.6
+Logo image hover: filter none, opacity 1.0, transition 200ms
+Max-height per logo: 32-40px
+Heading above: "Trusted by teams at" in muted text-secondary
+```
+
+### Mega-Navigation Dropdown
+```
+Position: absolute, full-width or column-aligned below nav
+Background: white
+Shadow: 0 8px 24px rgba(0,0,0,0.08)
+Padding: 24-32px
+Grid: 3-4 columns of grouped links
+Link groups: heading (11px, all-caps, text-muted), links (14px, weight 400)
+Icon per link: 16-20px, brand color
+Open/close: aria-expanded, transition 200ms opacity + translateY
+```
+
+### CTA Section
+```
+Background: brand primary or dark surface
+Padding: 64-80px
+H2: 28-36px, white/contrasting
+Sub-copy: 16-18px, secondary white
+CTA button: white background, brand-colored text, or outlined
+Secondary CTA: outlined, white border, white text
+Spacing between CTAs: 16px
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not bury the CTA below the fold without any CTA in the hero.
+- Do not use vague value propositions ("We make business better") — be specific about what, for whom, and the outcome.
+- Do not require registration to read case studies or pricing pages.
+- Do not show a wall of features without diagrams, screenshots, or social proof.
+- Do not use stock photography of people shaking hands or smiling at laptops — use real product screenshots.
+- Do not hide pricing — at minimum, acknowledge it exists and offer a pricing page.
+- Do not use small fonts for compliance/security copy — it must be readable.
+- Do not mix consumer design patterns (countdown timers, emoji-heavy copy) in an enterprise context.
+- Do not use `color: red` for all error states — also provide icon and text.
+
+---
+
+## QA Checklist
+
+- [ ] Hero value proposition is clear in 5 seconds without reading body text.
+- [ ] Customer logos visible above fold or within first scroll.
+- [ ] At least one proof metric with source/context.
+- [ ] Mega-nav keyboard navigable (arrow keys, Escape closes).
+- [ ] All form inputs have visible labels.
+- [ ] Form error messages are programmatically associated with inputs.
+- [ ] Security / compliance section present with specific certifications.
+- [ ] Mobile: mega-nav works as hamburger accordion.
+- [ ] Mobile: CTAs accessible without horizontal scroll.
+- [ ] All text meets 4.5:1 contrast.
+- [ ] Pricing is findable within 2 clicks or clearly explained.
+- [ ] Page loads LCP ≤ 2.5s (enterprise buyers measure performance).

package/references/brand-method-playful-familiarity.md

@@ -0,0 +1,284 @@
+# Brand Method: Playful Familiarity
+
+Use this skill when building for food and beverage retail, family brands, toys, children's platforms, casual consumer apps, or any context where the primary emotion is delight, comfort, and ease.
+
+Reference brands: McDonald's, KFC, Burger King, Domino's, Starbucks, LEGO, Nintendo, Coca-Cola, Nestlé, Colgate, Costco.
+
+---
+
+## When to Apply This Method
+
+Apply Playful Familiarity when:
+- The brand uses friendly, familiar, or joyful tone as a key differentiator.
+- The audience is broad: families, children, casual users, all age groups.
+- The primary task is order, find, or buy — but the experience should feel fun, not cold.
+- Brand characters, mascots, or iconic imagery are key recognition assets.
+
+Do not apply when:
+- The brand is luxury or premium (use Premium Restraint).
+- The product is enterprise software or professional tools (use Enterprise Trust Hub or Technical Authority).
+- The primary goal is brand storytelling without task completion (use Editorial Brand World).
+
+---
+
+## Layout Structure
+
+### Hero
+- Brand imagery dominant: food photography, character/mascot, product in context.
+- Warm, bright, inviting — the hero should make the user feel good immediately.
+- Headline: short, friendly, direct. "Order Now." "What are you craving?" "Start Building."
+- CTA: bold, large, visible — "Order Now", "Find a Store", "Shop Now."
+- Promotional strip: thin banner above or below hero with current offer.
+
+### Navigation
+- Clear, simple, icons + labels.
+- Categories visible in nav or below hero (not hidden in hamburger on desktop).
+- Key CTAs in nav: "Order Now", "Delivery", "Store Finder."
+- Mobile: bottom navigation bar (food ordering / consumer apps) OR clear hamburger.
+
+### Homepage Sections (in order)
+1. **Hero** — brand world, CTA, current promotion.
+2. **Featured offers / menu highlights** — 3-4 featured items with prices, large photos.
+3. **Order method selection** — Delivery / Takeaway / Dine-in (food brands).
+4. **Brand story snippet** — 1-2 paragraphs or a visual story block, friendly tone.
+5. **Loyalty / rewards** — app or rewards program teaser.
+6. **Location finder** — map or zip code input.
+
+### Menu / Product Page
+- Large food photography or product imagery.
+- Clear product name, price, description (friendly tone).
+- Customization options (size, extras, add-ons): large touch targets, visible choices.
+- "Add to Order" / "Add to Cart": prominent, colored, full-width on mobile.
+- Allergen info: accessible, visible, not buried.
+
+---
+
+## Color Scheme
+
+### Palette Archetypes
+
+**Fast Food (McDonald's, KFC, Burger King)**
+- McDonald's: `#FFC72C` (yellow) + `#DA291C` (red) on white
+- KFC: `#E4002B` (red) + `#000000` on white
+- Burger King: `#E8611A` (orange/red) + `#502314` (brown) + cream `#F5F0E5`
+- Rule: high-energy primaries, white background, CTA uses the brightest brand color.
+
+**Coffee / Comfort (Starbucks)**
+- Primary: `#00704A` (green)
+- Background: `#FFFFFF` or `#F9F4EE` (warm cream)
+- Accent: `#CBA258` (gold, reward tier)
+- Text: `#1E3932` (deep green)
+
+**Family Toys (LEGO)**
+- Primary: `#F5CC0A` (LEGO yellow) + `#D91F26` (red) + `#006CB7` (blue)
+- Background: `#FFFFFF`
+- Text: `#1A1A1A`
+- Use multiple brand colors in theme/product routing — each theme has its own color.
+
+**Family Food Brands (Nestlé, Colgate)**
+- Background: `#FFFFFF`
+- Primary: brand blue or red
+- Surface: light pastel of primary color at 10-20% opacity
+- Text: `#1A1A1A`
+- Warm accent: yellow or green for health cues
+
+**Gaming / Family Entertainment (Nintendo)**
+- Primary: `#E4000F` (red)
+- Background: `#FFFFFF`
+- Game character/art provides additional color
+- Text: `#1A1A1A`
+
+### Rules
+- Colors must be high-energy and identifiable — the brand color is the experience.
+- CTA must use the brand's most energetic color.
+- White backgrounds prevent color fatigue when using multiple brand colors.
+- Never use muted, desaturated tones for primary elements — that signals premium, not playful.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Hero headline | 32-56px | 700-900 | Friendly bold, may be condensed |
+| Section headline | 22-32px | 700 | |
+| Product name | 16-20px | 600-700 | |
+| Product description | 14-16px | 400 | Friendly tone, short |
+| Price | 18-24px | 700 | Tabular numerals, brand accent |
+| CTA | 15-18px | 700 | |
+| Navigation label | 13-14px | 500-600 | |
+| Promo badge | 11-13px | 700-800 | All-caps or bold |
+
+### Font Pairings
+| Brand type | Font |
+|---|---|
+| Fast food | Nunito Black / ExtraBold, Fredoka One, or brand custom |
+| Coffee / lifestyle | Lato Bold, Raleway, or circular |
+| Family toys | Nunito, Poppins, or Fredoka One |
+| Family food/health | Rounded Sans: Nunito, Quicksand, or Poppins |
+| Gaming consumer | Custom or Barlow, Exo 2, or Noto Sans Bold |
+
+### Rules
+- Use rounded fonts — sharp serifs and thin weights feel cold for playful brands.
+- Headlines must command attention immediately — heavy weight, high contrast.
+- Never use decorative fonts that sacrifice legibility.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Icon nudges |
+| `--space-sm` | 8px | Label margins |
+| `--space-md` | 16px | Card padding, button padding |
+| `--space-lg` | 24px | Between product cards |
+| `--space-xl` | 40-48px | Section separation |
+| `--space-2xl` | 64-80px | Hero padding |
+
+- Product grids: 16-20px gutters.
+- CTA buttons: generous padding (16px × 32px minimum) — must feel easy to tap.
+- Cards: 16px padding, 8-12px border-radius.
+
+---
+
+## Motion and Interaction
+
+### Principles
+- Microinteractions should delight — bouncy, friendly, never cold or mechanical.
+- Add-to-cart / Order: satisfying animation (checkmark pop, cart count bounce).
+- Promo banner: gentle left-right auto-scroll with pause on hover.
+- Product card: hop/lift on hover, 150ms.
+
+### Mascot / Character Animation
+- Character appears on key moments: empty cart ("Add your first item!"), order success, loyalty milestone.
+- Keep to a few frames — simple, not complex.
+- `prefers-reduced-motion`: replace all bounce/spring animations with instant transitions.
+
+### Loading
+- Skeleton: match card dimensions, shimmer animation.
+- Order confirmation: celebratory micro-animation (checkmark or confetti), then settled state.
+
+### Transitions
+- Button tap: scale `0.95` on press, bounce back, 150ms spring.
+- Card hover: `translateY(-4px)`, `box-shadow` lift, 150ms ease.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Hero: full-width, stacked CTA. Menu: single-column. Bottom nav bar. Large tap targets. Price prominent on card. |
+| Tablet 768px | 2-column menu grid. Nav visible. |
+| Desktop 1024px | 3-4 column product grid. Full nav visible. |
+| Wide 1440px+ | Max-width 1280px. Product grid up to 5 columns. |
+
+- Mobile is the primary experience for food ordering — optimize for thumb reach.
+- Bottom nav bar on mobile: 5 items max, icons + labels.
+- "Add to Order" button: sticky at bottom of product detail on mobile.
+
+---
+
+## Accessibility Requirements
+
+- Food photography alt text: describe the food item, not "image of food" — e.g., `alt="Big Mac burger with sesame bun, lettuce, cheese, and special sauce"`.
+- Menu customization: radio buttons or checkboxes with visible labels. `<fieldset>` + `<legend>` per option group.
+- Allergen info: must be a text element, visible by default, not only revealed on hover.
+- Bottom navigation: `role="navigation"`, `aria-label="Main navigation"`. Active item: `aria-current="page"`.
+- Promotions and badges: always include text content, not just color/icon.
+- Character/mascot images: `alt` describes the character's action, not just "mascot."
+- Order confirmation: `aria-live="polite"` for success message.
+- Touch targets: all buttons and links minimum 44×44px — critical for food ordering on mobile.
+- Promo banner: auto-scrolling must pause on focus and on `prefers-reduced-motion`.
+
+---
+
+## UX Principles for This Method
+
+1. **Make the primary task impossible to miss.** Ordering or finding a location is the job — never bury it.
+2. **Delight is earned through speed, not decoration.** A fast, frictionless order is more delightful than a bouncy animation on a slow page.
+3. **Familiarity is a feature.** Use recognizable patterns (bottom nav, large cards, price prominent) — users already know this language.
+4. **Food photography sells.** Invest in imagery. A great photo of food is worth 1000 feature descriptions.
+5. **Broad audience.** Someone's grandmother should be able to order without frustration. Do not assume tech literacy.
+6. **Loyalty creates habit.** Rewards and loyalty flows are high-value — design them to be simple and visible.
+
+---
+
+## Component Specs
+
+### Menu Product Card
+```
+Width: flexible
+Border-radius: 12px
+Background: white
+Border: 1px solid var(--border)
+Image: 16:9 or square, object-fit: cover, border-radius top
+Product name: 16-18px, weight 700, margin-top 12px
+Description: 13-14px, text-secondary, 2-line clamp
+Price: 16-20px, weight 700, brand accent color
+CTA: "Add" button, right-aligned or full-width, brand primary
+```
+
+### CTA Button (Playful)
+```
+Background: brand primary
+Text: white, 15-18px, weight 700
+Padding: 14-16px 28-36px
+Border-radius: 8-12px
+Hover: darken 8%, scale 1.02
+Active: scale 0.97, darken 12%
+Focus: 3px solid brand-darker, offset 2px
+Bounce animation on add-to-cart: scale 1.1 → 1.0, 200ms spring
+```
+
+### Loyalty Badge / Reward
+```
+Background: brand accent (gold or contrasting)
+Text: 12-13px, bold, white or dark
+Border-radius: 6-8px (pill: 20px)
+Icon: star or flame, 14px, inline
+Padding: 4px 10px
+Positioned: bottom-left of product card image (absolute)
+```
+
+### Promo Banner
+```
+Background: brand accent
+Text: 13-14px, bold, white or dark
+Height: 40-44px
+Auto-scroll interval: 4-5s
+Pause on hover + focus
+Indicator dots: below banner, small (6px), brand light color
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not hide the menu behind 3 clicks.
+- Do not use small, light, or thin typography — broad audiences include elderly users.
+- Do not use low-contrast food badges or promo text on colorful backgrounds.
+- Do not autoplay promotional audio.
+- Do not require account creation before viewing the menu.
+- Do not use dark patterns for upsells — every "add extra" must be a clear opt-in, not pre-checked.
+- Do not use countdown timers for items that are not actually time-limited.
+- Do not rely solely on color to convey allergen information.
+
+---
+
+## QA Checklist
+
+- [ ] Primary CTA ("Order Now", "Add to Cart") visible above fold on mobile.
+- [ ] Bottom nav (if used): all items labeled, accessible, active state clear.
+- [ ] Food photography loads with skeleton placeholder.
+- [ ] Menu customization uses `<fieldset>` + `<legend>` with keyboard-navigable options.
+- [ ] Allergen info visible as text, not hover-only.
+- [ ] All interactive elements ≥ 44×44px touch target.
+- [ ] "Add to Order" sticky button on mobile product detail.
+- [ ] Loyalty / rewards section reachable within 2 taps.
+- [ ] Order confirmation announces success to screen reader (`aria-live`).
+- [ ] `prefers-reduced-motion`: all bounce/spring animations replaced with instant transitions.
+- [ ] No pre-checked upsell options (dark pattern check).
+- [ ] Page loads in under 3s on 4G (food ordering is mobile-first, often on poor connections).