Spacing & kerapatan

Skala 4px

Semua jarak adalah kelipatan 4px, dengan setengah langkah (2px) untuk hal yang paling rapat. Angkanya sama dengan skala bawaan Tailwind, jadi p-3 di halaman aplikasi berarti hal yang sama dengan p-3 di dalam komponen.

Tiga tinggi kontrol

Setiap kontrol yang bisa diklik atau diisi punya tiga ukuran, dan ukuran yang sama selalu setinggi yang sama — tombol, input, select, tombol salin, dan avatar bisa berdiri sebaris tanpa ada yang menonjol setengah piksel.

sm untuk toolbar dan baris tabel, md untuk hampir semua hal, dan lg untuk aksi tunggal di halaman yang lapang — formulir pendaftaran, misalnya.

<!-- Tinggi kontrol datang dari prop size, bukan dari class.
     Tiga ukuran ini sejajar antar komponen: tombol md, input md,
     select md, dan avatar md semuanya 34px. -->
<W4cButton size="md">Simpan</W4cButton>
<W4cFormInput size="md" />
<W4cAvatar size="md" name="Rini Hartati" />

Kenapa rapat

Padding dan jarak seluruh komponen pernah diturunkan satu langkah sekaligus (#063): kartu dari p-5 menjadi p-3.5, baris menu dari 40px menjadi 32px, judul kartu dari 16px menjadi 14px. Tinggi kontrol tidak berubah.

Alasannya bukan selera. Aplikasi W4C adalah layar kerja: satu halaman pickup memuat tabel, filter, ringkasan, dan riwayat sekaligus. Ruang kosong yang lega membuat setiap halaman butuh digulir dua kali lebih jauh, dan membuat antarmuka terasa seperti contoh template, bukan alat kerja.

• Jarak di dalam satu blok: 2–10px.
• Jarak antar blok di satu panel: 12–16px.
• Jarak antar section besar di halaman: 24px ke atas — itu pekerjaan halaman, bukan komponen.
• Halaman mengatur tata letak lewat class pada komponen (margin, lebar, posisi). Isi komponen tidak pernah diatur dari luar.