Sepanjang section ini kita membangun potongan demi potongan — token tiga tier, palet, skala tipografi dan spasi, kontrak state, serta tema. Chapter ini merangkainya menjadi satu kesatuan yang layak dipakai lintas proyek: sebuah design system. Sistem yang baik punya empat pilar — tokens sebagai sumber nilai, komponen inti sebagai bangunan siap pakai, dokumentasi sebagai kontrak tim, dan versioning sebagai aturan perubahan. Kita akan melihat keempatnya dalam bentuk paling ringkas, menyalin checklist adopsinya, dan menutup Course dengan sistem mini yang seluruh nilai computed-nya terverifikasi.

Empat Pilar Sistem Desain #

Pilar pertama adalah tokens — semua yang telah kita susun dari Chapter Design Tokens hingga Spacing Scale . Pilar kedua adalah komponen inti: sepuluh hingga dua belas komponen yang muncul di hampir semua halaman (tombol, kartu, input, lencana, tabel) yang menumpang pada token. Pilar ketiga adalah dokumentasi: setiap token dan komponen punya catatan kegunaan, nilai computed yang diharapkan, dan batasannya — tabel pada chapter-chapter sebelumnya adalah bentuk paling sederhananya. Pilar keempat adalah versioning: token dan komponen adalah antarmuka publik, sehingga mengganti nilai --aksi-primer adalah perubahan minor yang aman, sedangkan menghapus token adalah perubahan besar yang harus diumumkan dan diberi masa transisi, seperti aturan API.

File sistem mini berikut menunjukkan ketiga pilar pertama dalam satu file — token, komponen inti, dan varian lewat variabel lokal:

css contoh-sistem-mini.css 
:root {
  /* Tokens — primitive dan alias */
  --biru-600: rgb(29, 78, 216);
  --biru-100: rgb(219, 234, 254);
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-800: rgb(30, 41, 59);

  --aksi: var(--biru-600);
  --aksi-latar-lembut: var(--biru-100);
  --permukaan: rgb(255, 255, 255);
  --garis: var(--abu-200);
  --teks: var(--abu-800);

  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-4: 16px;
  --teks-dasar: 16px;
  --teks-kecil: 12px;
  --radius: 12px;
}

/* Komponen inti: kartu, tombol, lencana — membaca token saja */
.kartu {
  background-color: var(--permukaan);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: var(--spasi-4);
  font-size: var(--teks-dasar);
}

.tombol {
  background-color: var(--aksi);
  color: rgb(255, 255, 255);
  border: 0;
  border-radius: 8px;
  padding: var(--spasi-2) var(--spasi-4);
  font-size: var(--teks-dasar);
}

.tombol--sekunder {
  --aksi: var(--aksi-latar-lembut);
  --aksi-teks: var(--biru-600);
  color: var(--aksi-teks, rgb(255, 255, 255));
}

.lencana {
  background-color: var(--aksi-latar-lembut);
  color: var(--biru-600);
  border-radius: 999px;
  padding: var(--spasi-1) var(--spasi-2);
  font-size: var(--teks-kecil);
}

Mari kita telaah penerapan pilar-pilar itu:

  1. Varian sebagai data, bukan aturan baru: .tombol--sekunder tidak menulis ulang background-color; ia menimpa satu variabel --aksi yang diwarisi ke properti tombol. Pola antarmuka variabel lokalnya sama dengan Chapter CSS Custom Properties .
  2. Fallback menjaga komponen tetap hidup sendirian: var(--aksi-teks, rgb(255, 255, 255)) memberi default pada varian bila token tidak tersedia — komponen yang dikirim tanpa tema tetap tampil wajar.
  3. Satu sumber nilai untuk semua komponen: kartu, tombol, dan lencana membagi enam token yang sama; tidak ada satu pun warna atau jarak mentah di dalamnya, sehingga tema baru cukup menimpa token.

Checklist Adopsi Sistem #

Sistem tidak berjalan karena filenya rapi, melainkan karena adopsinya terjaga. Gunakan checklist ini ketika memperkenalkan sistem ke proyek:

  1. Katalogkan nilai berulang — kumpulkan warna, ukuran, dan jarak yang sudah ada, angkat yang muncul dua kali atau lebih menjadi token.
  2. Bangun komponen inti minimal — mulai dari tombol, kartu, input, dan lencana; larang nilai mentah di dalamnya sejak hari pertama.
  3. Dokumentasikan sambil membangun — satu tabel token dan satu contoh visual per komponen sudah cukup sebagai awal.
  4. Tetapkan aturan perubahan — nilai token boleh berubah sunyi; nama token, keberadaannya, dan perilaku komponen berubah dengan pengumuman.
  5. Ukur pemakaian — audit berkala untuk menemukan nilai mentah yang lolos dan token yang tidak pernah dirujuk.

Demo: Sistem Mini yang Teruji #

Demo chapter ini menghimpun kartu, tombol primer, tombol sekunder, dan lencana dari file di atas. Hasil di Browser:

text 
Kartu tampil berlatar rgb(255, 255, 255) dengan padding-top 16px
dan radius 12px — semuanya dari token.
Tombol sekunder tampil berlatar rgb(219, 234, 254) dengan teks
rgb(29, 78, 216) hasil penimpaan variabel --aksi oleh variannya.
Lencana tampil dengan font-size 12px dari token --teks-kecil.

Enam nilai tersebut diverifikasi otomatis melalui penanda data-expected. Dari sini, memindahkan sistem ke proyek lain berarti menyalin file token dan komponen inti, lalu menyesuaikan nilai primitive — struktur dan kontraknya tidak berubah. Section Themes dan Design Systems sekaligus Course CSS ini sampai di titik yang sama dengan sistem desain sungguhan: nilai yang terpusat, komponen yang patuh, dan tema yang berganti dengan satu atribut.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-sistem-mini.css

Unduh berkas
css 
:root {
  /* Tokens — primitive dan alias */
  --biru-600: rgb(29, 78, 216);
  --biru-100: rgb(219, 234, 254);
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-800: rgb(30, 41, 59);

  --aksi: var(--biru-600);
  --aksi-latar-lembut: var(--biru-100);
  --permukaan: rgb(255, 255, 255);
  --garis: var(--abu-200);
  --teks: var(--abu-800);

  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-4: 16px;
  --teks-dasar: 16px;
  --teks-kecil: 12px;
  --radius: 12px;
}

/* Komponen inti: kartu, tombol, lencana — membaca token saja */
.kartu {
  background-color: var(--permukaan);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: var(--spasi-4);
  font-size: var(--teks-dasar);
}

.tombol {
  background-color: var(--aksi);
  color: rgb(255, 255, 255);
  border: 0;
  border-radius: 8px;
  padding: var(--spasi-2) var(--spasi-4);
  font-size: var(--teks-dasar);
}

.tombol--sekunder {
  --aksi: var(--aksi-latar-lembut);
  --aksi-teks: var(--biru-600);
  color: var(--aksi-teks, rgb(255, 255, 255));
}

.lencana {
  background-color: var(--aksi-latar-lembut);
  color: var(--biru-600);
  border-radius: 999px;
  padding: var(--spasi-1) var(--spasi-2);
  font-size: var(--teks-kecil);
}