Spacing (jarak) adalah aspek penting dalam design system yang membantu menciptakan konsistensi, hierarki visual, dan kenyamanan pengguna. Dalam Seragam, kami menggunakan kelipatan 4 sebagai dasar untuk menentukan ukuran spacing. Pendekatan ini memastikan keselarasan dan skalabilitas di seluruh komponen dan tata letak.
Mengapa Kelipatan 4?
Penggunaan kelipatan 4 (4, 8, 12, 16, 20, 24, dst.) dipilih karena:
- Konsistensi: Kelipatan 4 memudahkan pengembang dan desainer untuk menjaga konsistensi dalam tata letak.
- Responsivitas: Kelipatan 4 cocok untuk sistem grid yang responsif, memastikan elemen terlihat seimbang di berbagai ukuran layar.
- Kemudahan Penggunaan: Angka genap seperti 4 lebih mudah dibagi dan dikalikan, sehingga memudahkan perhitungan spacing.
Skala Spacing
Berikut adalah skala spacing yang digunakan dalam sistem desain ini:
| Nama Spacing | Ukuran (px) | Penggunaan Umum |
|---|---|---|
space-4 | 4px | Jarak kecil, seperti padding internal pada ikon atau elemen kecil. |
space-8 | 8px | Jarak dasar untuk padding atau margin antara elemen yang berdekatan. |
space-12 | 12px | Jarak sedang, cocok untuk spasi antara teks dan elemen terkait. |
space-16 | 16px | Jarak yang lebih besar, sering digunakan untuk margin antara komponen. |
space-20 | 20px | Jarak untuk memisahkan bagian yang lebih signifikan dalam tata letak. |
space-24 | 24px | Jarak besar, digunakan untuk memisahkan grup elemen atau bagian halaman. |
space-32 | 32px | Jarak ekstra besar, cocok untuk spasi antara bagian utama dalam tata letak. |
space-40 | 40px | Jarak untuk memisahkan bagian yang membutuhkan penekanan visual lebih besar. |
space-48 | 48px | Jarak maksimal, digunakan untuk spasi yang sangat besar antara elemen utama. |
Contoh Penggunaan Spacing
1. Padding dan Margin
- Padding internal pada tombol:
space-8(8px). - Margin antara dua kartu:
space-16(16px).
2. Tata Letak Grid
- Jarak antara kolom dalam grid:
space-24(24px). - Jarak antara baris dalam daftar:
space-12(12px).
3. Hierarki Visual
- Jarak antara judul dan konten:
space-16(16px). - Jarak antara grup elemen yang berbeda:
space-32(32px).
Best Practices
- Gunakan Spacing yang Konsisten: Pastikan spacing yang sama digunakan untuk elemen serupa di seluruh aplikasi.
- Hindari Nilai Custom: Selalu gunakan nilai spacing dari skala yang telah ditentukan untuk menjaga konsistensi.
- Pertimbangkan Responsivitas: Sesuaikan spacing berdasarkan ukuran layar. Misalnya, gunakan
space-16untuk desktop danspace-8untuk mobile.