Skala jarak dan token jarak

Jarak (margin, padding, gap) adalah bagian hierarki yang sering terlupa: jarak yang seragam membuat bagian-bagian halaman terbaca sebagai satu sistem. USWDS menulis bahwa setiap nilai jarak di utilitas maupun CSS komponen memakai token jarak, yang dasarnya kelipatan 8px. Ada token tambahan untuk ukuran kecil (05 = 4px, 1px, 2px), token bernama untuk ukuran besar seperti mobile (320px) dan desktop (1024px), dan beberapa token negatif. Nama token bukan nilai pikselnya: token 2 berarti 16px, bukan 2px. Di keluaran akhirnya, nilai di atas 2px ditulis dalam rem.

Alasannya ditulis di halaman pengantar token desain USWDS. Properti CSS menerima rentang nilai yang hampir tak terbatas, dan pilihan sebanyak itu memperlambat kerja desain serta membuat komunikasi perancang dan pengembang terlalu rinci. Token adalah daftar pilihan terbatas, seperti tombol stasiun tersimpan di radio mobil: bukan semua frekuensi, hanya pilihan tertentu.

GOV.UK memakai dua skala dengan unit 0 sampai 9. Skala statis sama di semua layar: unit 1 = 5px, 2 = 10px, 3 = 15px, 4 = 20px, 5 = 25px, 6 = 30px, 7 = 40px, 8 = 50px, 9 = 60px. Skala responsif memakai nilai skala statis untuk layar yang lebih lebar dari titik henti tablet (640px), dan nilai yang lebih kecil di layar sempit. Unit 0 sampai 3 tidak berubah.

:root {
  --jarak-1: 8px;   /* token 1 */
  --jarak-4: 32px;  /* token 4 */
}
.kartu-jadwal { padding: var(--jarak-4); }
.kartu-jadwal p { margin-bottom: var(--jarak-1); }