Foundation Tokens
8 systems
→
Typography System
Complete type scale, font weights, line heights, and responsive sizing — from display headings to micro captions.
Plus Jakarta Sans
Regular 400 · Medium 500 · SemiBold 600 · Bold 700
display-2xl → caption · 11 scale tokens
→
Color System
Primary, neutral, semantic palettes (success, warning, error, info) with full shade scales and usage guidelines.
→
Spacing System
4px base-unit scale, semantic spacing tokens, component-level padding rules, and checkout flow case study.
→
Shadows & Border Radius
6-level shadow elevation scale and radius tokens from 2px to full-round, with component mapping and nesting rules.
→
Layout, Grid & Breakpoints
12-column grid, responsive breakpoint system, max-width containers, and page layout patterns.
→
Motion & Animation
Easing curves, duration scale, animation patterns with interactive demos and VendHub dashboard scene.
→
Z-Index & Layer Hierarchy
7-layer stacking system with interactive dashboard demo — toggle layers to see the hierarchy in action.
→
Opacity Scale
9 semantic opacity tokens for disabled states, hover overlays, press effects, and banner backgrounds.
Components
2 components