2026 Modern SaaS Design System

Admin Styleguide

Zero-serif typography hierarchy using DM Sans throughout. Near-black `#18181B` text, mid-gray `#71717A` secondary text, refined vibrant terracotta (`#E05628`), modern green (`#16A34A`), and soft background washes.

1. Typography & Data Monospace Scale (Zero Serif System)

DM Sans (Module Title Scale)

Dashboard Title

Clean, modern sans-serif headings replacing display serifs.

DM Sans (Labels & Body)

Section Subheading

Workhorse font for navigation links, form labels, and body paragraphs.

DM Mono (All Data Items)

ID: #VC-8942

Price: $34.50

Time: 14:30:00 EST

Phone: (555) 019-2831

2. Refined Modern Saturated Status Badges

Order Status Badges (Vibrant Terracotta Pending • Emerald Completed)

ReceivedPreparingReady for PickupCompletedCancelled

Booking Status Badges

PendingConfirmedSeated NowFinishedCancelledNo-Show

Order Type & Payment Badges

Counter PickupDeliveryDine-Inpaidpending

3. Button & Action Hierarchy

Terracotta (#E05628)

Neutral Surface

Destructive Action

4. Form Inputs & Terracotta Focus Ring

Customer Full Name *

Select Location Scope *

5. Data Table Surface (Modern 5-Column Alignment)

Customer & Ref	Fulfillment	Status	Items & Total	Time
#VC-9012Eleanor Vance	Counter Pickup	Preparing	2 items • $40.50	4m ago
#VC-9011Marcus Sterling	Delivery	Ready for Pickup	1 item • $68.00	18m ago

6. State Patterns (Empty, Skeleton Loading, Error)

No active orders right now

New web or POS orders will display here automatically.

Database Connection Reconnecting

Unable to reach Supabase realtime channel. Retrying automatically in 5 seconds...