Foundations/Spacing System
Spacing System
● Ready Web Nuxt 4 + Mobile React Native
Skala jarak matematis berbasis kelipatan 4px & 8px untuk menjamin konsistensi tata letak ruang di Web dan Mobile.
| Token | Nilai | Tailwind Utility | Penggunaan Utama |
|---|---|---|---|
| space.025 | 2px | p-0.5 / gap-0.5 | Padding mikro, border offset |
| space.050 | 4px | p-1 / gap-1 | Jarak ikon ke teks pendek, pill tag |
| space.100 | 8px | p-2 / gap-2 | Padding tombol kecil, jarak antar badge |
| space.150 | 12px | p-3 / gap-3 | Jarak elemen form bertumpuk |
| space.200 | 16px | p-4 / gap-4 | Padding dalam kartu standar (Inner Card) |
| space.300 | 24px | p-6 / gap-6 | Padding modal box, panel konten |
| space.400 | 32px | p-8 / gap-8 | Jarak vertikal antar section halaman |
| space.600 | 48px | p-12 / gap-12 | Padding banner hero besar |