12 tokens built on a 4px base unit — organized into Micro, Component, and Layout groups. Every pixel is intentional.
Every spacing value in VendHub is a multiple of 4px. This creates a consistent rhythm across all components and layouts — nothing is arbitrary.
Filter by group, hover for usage details. Bar width is proportional to the actual pixel value.
Adjust the spacing token and watch a real card component update in real time.
More space between elements = weaker relationship. Less space = stronger grouping. Side-by-side comparison.