Create a complete design system and UI framework for a modern restaurant ordering platform called "BBQ House".

The goal is not to generate individual pages only, but to create a scalable component system, visual language and reusable UI foundation that will be used across:

• customer web application;

• administration dashboard;

• future customer mobile app;

• future courier app;

• future admin mobile app.

The system should feel like a real commercial product design system similar to Stripe, Linear, Notion, Vercel or modern food delivery platforms.

Technical Context

Frontend stack:

• Next.js App Router

• React

• TypeScript

• Tailwind CSS

• shadcn/ui

• Zustand

The generated design system must be realistic for implementation using this stack.

Design Goals

The interface should communicate:

• premium quality food;

• trust;

• speed;

• comfort;

• simplicity;

• appetite;

• professionalism.

The design should prioritize:

• fast ordering flow;

• readability;

• accessibility;

• mobile usability;

• conversion.

Avoid:

• visual clutter;

• excessive shadows;

• overly luxury restaurant aesthetics;

• outdated restaurant website styles;

• skeuomorphism.

Visual Direction

Style:

Modern dark-first interface with warm food-oriented accents.

Inspiration:

• Linear

• Vercel

• Uber Eats

• DoorDash

• Stripe Dashboard

• Apple Wallet

• Arc Browser UI

The system should look modern in 2026 standards.

Color System

Create a complete semantic color system.

Primary palette:

• charcoal black

• warm dark gray

• orange accents

• fire red accents

• warm beige backgrounds

Semantic colors:

• success

• warning

• error

• info

• disabled

• active

• hover

• selected

Create tokens instead of hardcoded colors.

Example:

--background

--foreground

--card

--card-foreground

--primary

--secondary

--muted

--accent

--destructive

--border

--input

--ring

Support:

• dark theme

• light theme

Dark theme should be the primary design target.

Typography System

Create a full typography scale.

Required styles:

• Hero

• H1

• H2

• H3

• H4

• Body Large

• Body

• Caption

• Label

• Price Large

• Price Small

Prices should have dedicated typography styles.

Typography should be optimized for:

• food cards

• dashboards

• tables

• mobile screens

Spacing System

Create an 8-point spacing system.

Include:

• spacing tokens

• container sizes

• grid rules

• responsive breakpoints

Radius System

Create a consistent radius scale:

• small

• medium

• large

• extra large

The product should feel soft and modern.

Shadow System

Create subtle shadow levels:

• card

• dropdown

• modal

• popover

• floating action

Avoid heavy shadows.

Iconography

Use outline icons.

Requirements:

• modern

• consistent stroke width

• scalable

Icons must work in:

• customer app

• admin dashboard

Component Library

Create reusable components for the entire ecosystem.

Foundation Components

• Button

• IconButton

• Input

• Textarea

• Select

• Checkbox

• Radio

• Switch

• Slider

• Badge

• Avatar

• Tooltip

• Separator

• Skeleton

• Spinner

• Progress

For every component generate:

• default state

• hover

• active

• disabled

• loading

• error

Layout Components

• Container

• Section

• PageHeader

• Sidebar

• Topbar

• BottomNavigation

• Tabs

• Breadcrumbs

• Drawer

• Sheet

• Dialog

• Popover

Restaurant Components

• ProductCard

• ProductGrid

• ProductListItem

• CategoryChip

• PriceDisplay

• DiscountBadge

• AvailabilityBadge

• QuantitySelector

• CartItem

• PromoCodeInput

• LoyaltyCard

• AddressCard

• OrderCard

• OrderTimeline

• DeliveryZoneCard

Dashboard Components

• StatsCard

• KPI Card

• Chart Card

• Revenue Card

• Activity Feed

• Data Table

• Filter Bar

• Search Input

• Status Badge

• Pagination

• Empty State

• Export Button

Tables

Design a modern enterprise table component.

Support:

• sorting

• filtering

• searching

• pagination

• bulk actions

• row actions

• loading states

• empty states

Forms

Create a complete form system.

Support:

• validation

• helper text

• error text

• loading

• success state

Modals

Create reusable modal patterns:

• confirmation modal

• delete modal

• form modal

• success modal

• error modal

Status System

Create visual systems for:

Order Status:

• New

• Accepted

• Preparing

• Ready for delivery

• Delivering

• Completed

Payment Status:

• Pending

• Paid

• Failed

• Refunded

Product Status:

• Active

• Disabled

• Out of stock

Dashboard Design Language

Admin dashboard should feel:

• enterprise

• efficient

• data dense

• modern

Use:

• Bento Grid layouts

• KPI widgets

• charts

• compact tables

Mobile First Strategy

The design system must support:

• Desktop

• Tablet

• Mobile

Mobile ordering experience is a priority.

Special attention to:

• catalog

• cart

• checkout

• profile

Accessibility

Requirements:

• keyboard navigation

• proper contrast

• focus states

• screen reader support

Follow WCAG standards where possible.

Deliverables

Generate:

• design tokens

• typography scale

• color system

• component library

• dashboard patterns

• restaurant specific components

• interaction states

• responsive behavior

• dark theme

• light theme

The final result should look like a production-ready UI framework that could realistically become the foundation of a commercial food delivery platform.