Design Tokens
The foundation of AdorableCSS's design system. Consistent, scalable, and beautiful tokens for building cohesive interfaces.
Spacing System
A mathematical spacing system that creates visual rhythm and perfect alignment
13
Spacing Steps
4:1
Scale Ratio
✓
Responsive
Spacing Scale
Visual representation of all spacing tokens
Visual Scale
xs
0.25rem
sm
0.5rem
md
0.75rem
lg
1rem
xl
1.25rem
2xl
1.5rem
3xl
2rem
4xl
2.5rem
5xl
3rem
6xl
4rem
7xl
5rem
8xl
6rem
9xl
8rem
Click spacing examples in the playground below to copy usage
Spacing Playground
See how different spacing values affect layout and visual hierarchy
Micro Spacing
p(xs) - Tight elements
p(sm) - Form controls
Component
p(md) - Cards, panels
p(lg) - Content areas
Layout
p(xl) - Sections
p(2xl) - Containers
Perfect Spacing
Every pixel matters. Our spacing system creates visual harmony through mathematical precision.
Consistent
Mathematical progression ensures perfect visual rhythm across all screen sizes
Responsive
Adapts beautifully from mobile to desktop while maintaining proportional relationships
Semantic
Each step has clear purpose and context, making design decisions effortless