Spacing Scale

Jarak adalah keputusan desain yang paling sering diambil dan paling jarang didokumentasikan. Dua kartu yang di atasnya jaraknya 14px dan 15px tidak akan pernah bisa dibedakan pengguna, tetapi keduanya menciptakan dua nilai yang harus diingat, diuji, dan dijaga. Spacing scale memangkas persoalan itu dengan membatasi pilihan: seluruh jarak di antarmuka harus berasal dari skala kecil berkelipatan tetap. Kita akan membangun skala kelipatan 4px dari 4px sampai 32px, menyimpannya sebagai custom properties, dan menerapkannya pada padding, gap, dan jarak antarbagian. Fondasi model kotaknya sudah kita bahas pada Chapter Content, Padding, Border, Margin ; di sini fokusnya adalah sistem nilai.

Skala 4px: Enam Token untuk Semua Jarak #

Skala berkelipatan 4px menjadi konvensi luas karena selaras dengan grid perangkat dan menghasilkan langkah yang halus namun tetap terbedakan. Enam token sudah cukup untuk hampir semua kebutuhan:

Deklarasinya ringkas, dan file inilah yang dipakai demo:

:root {
  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-3: 12px;
  --spasi-4: 16px;
  --spasi-5: 24px;
  --spasi-6: 32px;
}

.kartu {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: var(--spasi-4);
}

.tumpukan { display: flex; flex-direction: column; gap: var(--spasi-5); }

.daftar-aturan { display: flex; flex-direction: column; gap: var(--spasi-2); }

.lencana {
  background-color: rgb(219, 234, 254);
  color: rgb(29, 78, 216);
  border-radius: 999px;
  padding: var(--spasi-1) var(--spasi-2);
  font-size: 12px;
}

Mari kita telaah penerapannya:

1. .kartu memakai satu token untuk keempat sisi: padding: var(--spasi-4) menulis 16px sekali, sehingga kartu mana pun di sistem memiliki rongga dalam yang identik.
2. .tumpukan dan .daftar-aturan memakai gap bertingkat: jarak antarseksi (24px) selalu lebih besar daripada jarak antaritem (8px) karena keduanya membaca token berbeda — hubungan hierarki dijaga oleh skala, bukan oleh disiplin perorangan penulis kode.
3. .lencana memakai dua token dalam satu shorthand: padding: var(--spasi-1) var(--spasi-2) menghasilkan 4px atas-bawah dan 8px kiri-kanan, pola lazim untuk elemen pill.

Konsistensi yang Terlihat, Bukan Hanya Terdokumentasi #

Skala bekerja karena ia membatasi pilihan pada titik penulisan kode. Ketika penulis komponen baru mengetik padding: var(--spasi- di editor, saran otomatis menampilkan enam pilihan yang sah — angka liar seperti 14px tidak pernah masuk ke halaman. Konsistensi ini juga memudahkan pengujian: nilai computed padding dan gap dapat di-assert langsung, sebagaimana dilakukan harness pada demo. Bila kebutuhan jarak terasa tidak ada yang pas, jangan langsung menambah token baru; periksa dulu apakah yang sebenarnya dibutuhkan adalah token yang salah tempat — jarak antarbagian memang layak lebih besar daripada jarak dalam satu kelompok.

Demo: Kartu, Tumpukan, dan Lencana #

Demo chapter ini menyusun kartu yang berisi tumpukan bagian, daftar aturan, dan lencana — semuanya membaca skala 4px. Hasil di Browser:

Kartu tampil dengan padding-top 16px dari --spasi-4.
Tumpukan bagian berjarak gap 24px dari --spasi-5 dan daftar aturan
berjarak gap 8px dari --spasi-2.
Lencana tampil dengan padding-top 4px dan padding-right 8px dari
pasangan --spasi-1 dan --spasi-2.

Kelima nilai tersebut diverifikasi otomatis melalui penanda data-expected pada demo. Skala spasi yang sama inilah yang nanti kita bawa ke sistem utuh pada Chapter Reusable Design System , dan tema gelap pun tidak menyentuhnya — jarak tidak berubah bersama warna.

:root {
  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-3: 12px;
  --spasi-4: 16px;
  --spasi-5: 24px;
  --spasi-6: 32px;
}

.kartu {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: var(--spasi-4);
}

.tumpukan { display: flex; flex-direction: column; gap: var(--spasi-5); }

.daftar-aturan { display: flex; flex-direction: column; gap: var(--spasi-2); }

.lencana {
  background-color: rgb(219, 234, 254);
  color: rgb(29, 78, 216);
  border-radius: 999px;
  padding: var(--spasi-1) var(--spasi-2);
  font-size: 12px;
}