VendHub Design System

Z-Index System

7 named layers with semantic tokens — no z-index wars, no magic numbers. Every component knows its place in the stack.

Live Stacking Scene

Toggle real UI components to see how they stack. Each layer activates at its z-index — watch how the hierarchy resolves.

Toggle:
Header · z-10
Dropdown · z-20
Modal · z-30+40
Toast · z-50
Active Routes
24
↑ 12%
Total Stops
312
↑ 8%
Pending
7
↓ 3
Revenue
$48.2K
↑ 15%
RouteDriverStopsStatus
Chicago Loop EastMike T.14Active
Milwaukee NorthSarah K.8Pending
Indianapolis SouthJames R.11Active
Detroit MetroLisa P.9Delayed
DashboardRoutesOrders ▾Leads
All orders
Pending approval
In transit
Completed
Confirm Order #4821
Review the order details before confirming delivery to the Chicago Loop East route.
Order #4820 confirmed
Delivery scheduled for Apr 15
z-0 · base
z-10 · sticky
z-20 · dropdown
z-30 · overlay
z-40 · modal
z-50 · toast

7 Named Z-Index Tokens

Every component maps to one token. The name communicates intent — if the value changes, only the token updates.