# EatIt design preview

**Personality:** Savor & Dispatch / Urban Spice

Rich culinary warmth meets high-precision logistical routing.

**Design read:** EatIt requires a sharp, operational marketplace visual system that handles high-tempo interactions across three distinct user roles: hunger-driven customers, fast-paced kitchen operators, and mobile couriers. The design balances appetizing food editorial aesthetics on public and discovery views with dense, high-contrast tactical utility for ticket management and live map dispatch.

## Taste dials
- Design variance: 7/10
- Motion intensity: 5/10
- Visual density: 6/10

## System
- Direction: Warm architectural bistro aesthetic combined with clean telemetry control surfaces.
- Default mode: light
- Display font: Outfit, sans-serif
- Body font: Plus Jakarta Sans, sans-serif
- Landing composition: Asymmetric hero with full-bleed culinary visual framing on the right, bold left-aligned manifesto callout, followed by a 3-column interactive pathway section breaking down Customer, Kitchen, and Driver roles.

## Surfaces

### landing
Navigation: Sticky top bar with EatIt wordmark, operational status indicator, public navigation links, and M-Auth Sign In primary action button.
- Public Marketplace Overview (/): Introduce the three-party marketplace network connecting diners, kitchens, and couriers, and provide direct authentication access.
  - hero-split: Discovery Catalog Grid - Limestone background with primary dark slate text, paprika accent button, and high-contrast telemetry card wrapper.
  - role-pathways: 3-column interactive role matrix - Elevated white surface cards over limestone base with subtle slate borders and distinct semantic badges.
  - workflow-timeline: Telemetry Map Split-View - Warm limestone band with structured line dividers and step badges in accent paprika and slate tones.
  - auth-callout: Dense Admin Metric Matrix - Dark slate inverse surface (#16181B) with bright white text and warm paprika CTA button.

### application
Navigation: Top navigation bar for customer discovery and orders; workspace navbar with role status toggles for kitchen operators and delivery drivers.
- Role Onboarding (/app/onboarding): Assign marketplace participant role (Customer, Restaurant Owner, Delivery Partner) upon M-Auth check-in.
  - role-selection-grid: Centered Selection Grid - Solid white card surfaces over warm limestone base with 1px slate borders.
- Customer Discovery & Menu Catalog (/app): Discover local restaurants, search specific dishes, filter food categories, and add meals to cart.
  - discovery-filter-strip: Discovery Catalog Grid - Limestone sticky bar with subtle 1px border separator.
  - restaurant-grid-section: Discovery Catalog Grid - Crisp white elevated cards with rounded imagery and crisp paprika badges.
- Order Tracking & Telemetry (/app/orders): Follow real-time order lifecycle progress from kitchen prep to live courier map tracking.
  - active-order-telemetry: Telemetry Map Split-View - High-contrast ticket panel with dark map view frame and crisp status badges.
- Kitchen Ticket Management (/app/restaurant): Manage store profile, menu items availability, and incoming order preparation workflow.
  - kanban-ticket-queue: Kitchen Kanban Ticket Board - High density cards with bold color-coded column headers and thick action buttons.
- Delivery Partner Dispatch (/app/delivery): Toggle driver availability, claim open delivery requests, and execute door-to-door drop-offs.
  - driver-dispatch-board: Telemetry Map Split-View - Crisp white panel overlay on dark map base with bright high-contrast action buttons.

### admin
Navigation: Sidebar-driven operational dashboard with persistent header token status indicator, quick tab switching between System Metrics, User Directory, and Live Marketplace Monitoring.
- Marketplace Supervision Panel (/admin): Provide platform operators real-time system metrics monitoring, user directory management, and full order network oversight.
  - admin-auth-header: Dense Admin Metric Matrix - Dark slate header bar (#16181B) with crisp 1px subtle slate border and contrast badge.
  - system-metrics-overview: Dense Admin Metric Matrix - Crisp white cards on limestone background with slate metric typography and warm paprika callout accents.
  - live-orders-monitoring: Telemetry Map Split-View - High-density data grid with zebra striping, explicit WCAG AA status pills, and monospaced order identifiers.
  - user-directory-management: Discovery Catalog Grid - Clean tabular design with distinct role badges (Paprika for Customer, Slate for Kitchen, Emerald for Driver).

## Generated image placements
- landing-01-hero-split: landing / / hero-split
- landing-02-role-pathways: landing / / role-pathways
- landing-03-workflow-timeline: landing / / workflow-timeline
- landing-04-auth-callout: landing / / auth-callout
- application-01-role-selection-grid: application /app/onboarding / role-selection-grid
- application-02-discovery-filter-strip: application /app / discovery-filter-strip
- admin-01-admin-auth-header: admin /admin / admin-auth-header