6 palettes, 40+ semantic tokens, and a 6-slot status pattern — built for consistency across the entire VendHub platform.
6 palettes powering VendHub. Hover to expand a shade, click to see details and copy the hex value.
Every status follows the same 6-slot pattern: 50 (background), 200 (border), 500 (icon/dot), 600 (solid button), 700 (text). Switch between statuses to compare.
Semantic tokens abstract raw hex values into purpose-driven names. Code never references a hex — only a role.
Pick any two colors from the system and check their WCAG contrast ratio in real time.