VendHub Design System

Spacing System

12 tokens built on a 4px base unit — organized into Micro, Component, and Layout groups. Every pixel is intentional.

The 4px Base Unit

Every spacing value in VendHub is a multiple of 4px. This creates a consistent rhythm across all components and layouts — nothing is arbitrary.

4px
Base unit
16px
4 × base = space.4
24px
6 × base = space.6
48px
12 × base = space.12
Token = N × 4px space.6 = 6 × 4 = 24px

12 Spacing Tokens

Filter by group, hover for usage details. Bar width is proportional to the actual pixel value.

All 12
Micro (4–12px)
Component (16–24px)
Layout (32–80px)

Live Spacing Playground

Adjust the spacing token and watch a real card component update in real time.

Route Dashboard
Active
24 active routes across 312 stops. Revenue up 15% this week with 7 pending orders awaiting review.

Spacing Creates Hierarchy

More space between elements = weaker relationship. Less space = stronger grouping. Side-by-side comparison.

✓ Correct spacing
Route Dashboard
24 active routes across 312 stops
Last updated: 2 min ago
Revenue: $48.2K ↑ 15%
✗ Equal spacing
Route Dashboard
24 active routes across 312 stops
Last updated: 2 min ago
Revenue: $48.2K ↑ 15%
✓ Grouped by meaning
Order #1284
Placed Jan 8, 2025
Delivery Address
123 Main St, Suite 400
Total
$2,481.00 — 47 items
✗ Flat, no grouping
Order #1284
Placed Jan 8, 2025
Delivery Address
123 Main St, Suite 400
Total
$2,481.00 — 47 items