Uses the 8px spacing system. The space scaling is widely used for sizing icons, padding, and applying vertical margin space. All the numbers are multiples of 8. The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The 8px spacing system space scaling is widely used for sizing icons, padding, and applying vertical margin space. All the numbers are multiples of 8. The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
0.5rem (8px)
var(--spacing-xs)
1rem (16px)
var(--spacing-s)
1.5rem (24px)
var(--spacing-m)
2rem (32px)
var(--spacing-l)
3 rem (48px)
var(--spacing-xl)
4rem (64px)
var(--spacing-xxl)
5rem (80px)
var(--spacing-3xl)
6rem (96px)
var(--spacing-4xl)
8rem (128px)
var(--spacing-5xl)
10rem (160px)
var(--spacing-6xl)
12rem (192px)
var(--spacing-7xl)