Design Tokens

Setiap proyek yang sehat memiliki nilai-nilai yang berulang di seluruh stylesheet: satu warna primer, satu skala spasi, satu set sudut melengkung. Selama nilai-nilai itu ditulis langsung sebagai angka, perubahan brand berarti berburu rgb(2, 132, 199) di belasan file. Design tokens menyelesaikannya dengan memberi nama pada setiap keputusan desain dan menyimpannya di satu tempat sebagai kontrak: komponen membaca token, bukan nilai mentah. Pada Course ini token diimplementasikan dengan custom properties — mekanisme yang sudah kita kuasai pada Chapter Custom Properties — sedangkan pembangunan sistem desain utuh kita lanjutkan pada Section Themes dan Design Systems . Chapter ini fokus pada tiga hal: penamaan token, penerapannya pada komponen, dan dokumentasinya.

Token Semantik, Bukan Nilai Literal #

Keputusan penamaan paling penting dalam design tokens adalah menamai maksud, bukan nilai:

/* Penamaan literal: mengganti warna berarti menamai ulang semua token */
--biru-500: rgb(2, 132, 199);

/* Penamaan semantik: nilai bebas berubah, nama tetap bermakna */
--warna-primer: rgb(2, 132, 199);

Ketika brand berubah dari biru ke hijau, versi literal memaksa kita mengganti nama --biru-500 menjadi --hijau-500 di semua pemakaiannya; versi semantik hanya mengubah satu baris nilai. Konvensi umum memakai keduanya berlapis: skala literal (--biru-500, --biru-600) sebagai lapisan bahan mentah, lalu token semantik (--warna-primer) merujuk skala tersebut. File token yang dipakai demo chapter ini:

:root {
  /* Warna — semantik */
  --warna-primer: rgb(2, 132, 199);
  --warna-teks: rgb(15, 23, 42);
  --warna-garis: rgb(226, 232, 240);

  /* Spasi — skala kelipatan 4px */
  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-3: 16px;

  /* Radius */
  --radius-kecil: 8px;
  --radius-sedang: 12px;
}

Mari kita telaah keputusannya:

1. :root sebagai rumah token: token tersedia untuk seluruh dokumen melalui inheritance, dan berada di file tersendiri (tokens.css) sesuai struktur folder pada Chapter Mengorganisasi File CSS .
2. Prefiks kelompok (--warna-, --spasi-, --radius-): mengetik --spasi- pada editor langsung menampilkan seluruh skala yang tersedia.
3. Komentar seksi di dalam file token: file ini adalah dokumentasi pertama yang dibaca anggota tim; urutan dan pengelompokannya penting.

Token sebagai Kontrak dan Dokumentasinya #

Begitu komponen membaca token, token berubah menjadi kontrak: menghapus atau mengubah makna token adalah perubahan breaking yang harus diumumkan, bukan keputusan sunyi. Karena itu token didokumentasikan secara eksplisit, minimal dalam bentuk tabel:

Aturan pemakaiannya tegas: komponen tidak boleh menulis nilai warna atau spasi mentah. Tombol pada demo hanya menyebut nama token:

.tombol {
  background-color: var(--warna-primer);
  color: rgb(255, 255, 255);
  padding: var(--spasi-2) var(--spasi-3);
  border-radius: var(--radius-sedang);
}
.kartu {
  color: var(--warna-teks);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-sedang);
  padding: var(--spasi-3);
}

Hasil di Browser:

Tombol tampil dengan latar rgb(2, 132, 199) dari token --warna-primer,
padding-top 8px dari --spasi-2, dan sudut 12px dari --radius-sedang.
Kartu menampilkan teks rgb(15, 23, 42) dari --warna-teks dengan
padding-top 16px dari --spasi-3.
Badge kecil memiliki padding-top 4px dari --spasi-1.

Mengubah satu nilai token di :root langsung mengubah seluruh halaman — inilah bedanya dengan hardcode: tidak ada satu pun aturan komponen yang perlu disentuh. Warna dan spasi memang titik mulainya; jenis token yang sama bergunanya mencakup ukuran font, ketebalan border, bayangan, hingga durasi transisi. Tidak semua nilai harus menjadi token sejak hari pertama — mulailah dari nilai yang berulang di dua tempat atau lebih, lalu angkat menjadi token begitu polanya terlihat. Token yang jumlahnya sedikit dan selalu dipakai lebih berharga daripada katalog lengkap yang separuhnya tak pernah dirujuk. Strategi penimpaan token per tema (mode gelap, tema brand) kita praktikkan penuh pada Section Themes dan Design Systems , sedangkan bab berikutnya mengatur variabel di dalam komponen itu sendiri.

:root {
  /* Warna — semantik */
  --warna-primer: rgb(2, 132, 199);
  --warna-teks: rgb(15, 23, 42);
  --warna-garis: rgb(226, 232, 240);

  /* Spasi — skala kelipatan 4px */
  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-3: 16px;

  /* Radius */
  --radius-kecil: 8px;
  --radius-sedang: 12px;
}