60 lines
5.0 KiB
Markdown
60 lines
5.0 KiB
Markdown
# 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 |