Design System — UI Kit

v2.0 · Zinc Dark Theme

Phase 3 Definition of Done Style Guide. Demonstrates all copy-owned shadcn/ui primitives, typography hierarchy, and financial font-mono formatting.

1. Buttons & Variants

2. Badges & Status Indicators

Default
Secondary
Success / Paid
Destructive / Cancelled
Outline
ROLE: ADMIN
STATUS: PREPARING

3. Cards & Financial Figures

Total Daily Revenue

£1,429.50

+14.2% from yesterday (VAT included: £68.07)

Active Kitchen Orders

18

Target prep time: 25 mins

Order Summary Sample

Order ID:AF-92041
Subtotal:£24.00
VAT (5%):£1.20
Delivery:£3.50
Total:£28.70

4. Interactive Modals & Overlays

5. Tabs & Skeleton Placeholders

Categories tab navigation with smooth active transitions:

Burgers & Sandwiches
Charcoal Grills
Wraps & Shawarma
Sides
Beverages

6. Form Controls (Inputs, Select & Checkboxes)