Mengapa Tampilan Produk Anda Pelan-pelan Tidak Konsisten
Situs perusahaan dibuat oleh satu vendor, dashboard internal oleh developer lain, dan landing page promo oleh freelancer. Setahun kemudian, warna biru utama Anda punya empat versi, tombol "Simpan" punya tiga ukuran, dan setiap halaman baru dimulai dari diskusi yang sama: "warnanya yang mana, ya?" Tidak ada yang salah secara individu, tetapi hasilnya terasa seperti produk dari perusahaan yang berbeda-beda.
Yang sering kami temui, masalah ini bukan soal selera desain, melainkan tidak adanya satu sumber kebenaran untuk keputusan visual. Di sinilah design system berguna. Kabar baiknya, Anda tidak perlu meniru Google atau IBM. Untuk tim kecil, versi minimum yang disiplin jauh lebih bernilai daripada versi lengkap yang ditinggalkan setelah tiga bulan.
Apa Itu Design System, dan Apa yang Sebenarnya Anda Butuhkan
Nielsen Norman Group mendefinisikan design system sebagai kumpulan standar untuk mengelola desain dalam skala besar memakai komponen dan pola yang bisa dipakai ulang. Isinya biasanya tiga lapis: style guide (warna, tipografi, nada bahasa), component library (tombol, form, kartu), dan pattern library (gabungan komponen seperti header halaman atau formulir login).
Artikel yang sama jujur soal batasnya: design system butuh waktu untuk dibuat dan dirawat, dan untuk prototipe yang masih akan berubah, versi lengkap kemungkinan belum memberi imbal hasil dalam waktu dekat. NN/g juga membedakan tiga pendekatan: mengadopsi sistem yang sudah ada, mengadaptasi-nya, atau membuat sendiri. Semakin kustom, semakin mahal.
Untuk tim kecil, kami menyarankan jalur tengah: adaptasi komponen dari library yang sudah matang, lalu kunci identitas merek Anda di lapisan paling dasar, yaitu design token.
Lapisan 1: Design Token sebagai Fondasi
Spesifikasi Design Tokens dari W3C Design Tokens Community Group, yang versi stabil pertamanya (2025.10) terbit Oktober 2025, menjelaskan token sebagai cara mengekspresikan keputusan desain secara netral platform, setidaknya berupa pasangan nama dan nilai, misalnya color-text-primary: #000000. Nilainya ditulis sekali, lalu dipakai oleh desainer di Figma dan developer di kode.
Token minimum yang kami sarankan:
- Warna: satu warna merek, satu warna aksen, skala abu-abu, dan warna status (sukses, peringatan, error).
- Tipografi: satu atau dua keluarga font, skala ukuran (mis. 5–7 tingkat), dan tebal huruf yang dipakai.
- Spasi: satu skala, misalnya kelipatan 4 atau 8 piksel. Larang angka di luar skala.
- Radius dan bayangan: dua atau tiga tingkat saja.
Pakai token semantik, bukan hanya token mentah
Spesifikasi yang sama mendukung alias: satu token boleh merujuk token lain. Manfaatkan ini untuk memisahkan dua tingkat:
- Token mentah:
blue-600,gray-900. Isinya nilai. - Token semantik:
color-action-primary,color-text-default. Isinya maksud, dan nilainya merujuk token mentah.
Komponen hanya boleh memakai token semantik. Saat merek berganti warna atau Anda menambah mode gelap, Anda cukup mengganti rujukannya, bukan mencari warna di ratusan file.
Solusi: simpan token di satu file yang dibaca oleh kode. Jika proyek Anda memakai Tailwind CSS v4, variabel @theme sudah berfungsi sebagai tempat token: setiap variabel menghasilkan utility class sekaligus variabel CSS biasa. Untuk proyek lain, variabel CSS (--color-action-primary) sudah cukup sebagai awal.
Lapisan 2: Komponen Dasar yang Benar-benar Dipakai
Jangan mulai dengan membuat 60 komponen. Mulailah dengan komponen yang muncul di hampir setiap layar:
- Tombol (utama, sekunder, berbahaya), lengkap dengan status hover, focus, disabled, dan loading.
- Input teks, select, checkbox, dan pesan error di bawahnya.
- Kartu atau panel.
- Notifikasi/alert.
- Modal atau dialog.
- Tabel sederhana.
NN/g menyarankan setiap komponen punya nama yang unik, deskripsi penggunaan, atribut yang bisa diubah, daftar status, dan potongan kode. Untuk tim kecil, satu halaman dokumentasi per komponen sudah cukup, asalkan nama di Figma dan nama di kode sama persis.
Paling cocok untuk: tim yang memakai library komponen siap pakai. Jangan menulis ulang dari nol; bungkus komponen library dengan token Anda sendiri, lalu dokumentasikan hanya variasi yang Anda izinkan.
Lapisan 3: Aturan Aksesibilitas yang Tertanam di Token
Design system adalah tempat paling murah untuk memastikan aksesibilitas, karena keputusan dibuat sekali lalu diwarisi semua halaman. Rujukan paling jelas adalah WCAG 2.2, kriteria 1.4.3 Contrast (Minimum): teks normal membutuhkan rasio kontras minimal 4,5:1 terhadap latar belakangnya, dan teks besar minimal 3:1. Dokumen yang sama menegaskan bahwa pedoman merek tidak membebaskan teks dari syarat kontras ini, kecuali untuk logo.
Solusi: uji setiap pasangan token teks dan latar sebelum token itu disetujui, lalu catat hasilnya di dokumentasi. Dengan begitu, desainer tidak perlu mengecek ulang kontras di setiap layar baru. Tambahkan juga gaya focus yang terlihat jelas di komponen tombol dan input, karena pengguna keyboard bergantung padanya.
Kesalahan yang Sering Kami Temui
1. Memulai dari file Figma yang sempurna
Tim menghabiskan berminggu-minggu membuat library desain yang indah, tetapi tidak pernah terhubung ke kode. Hasilnya, dua sumber kebenaran yang perlahan berbeda.
Solusi: mulai dari token di kode, lalu samakan nama di file desain. Kode adalah yang dilihat pelanggan.
2. Menambah varian setiap ada permintaan
"Tombol ini boleh agak lebih besar, ya?" Lima permintaan kemudian, Anda kembali ke kondisi awal.
Solusi: setiap varian baru harus punya alasan yang ditulis. Jika alasannya hanya selera, gunakan varian yang ada.
3. Tidak ada pemilik
NN/g menekankan bahwa design system hanya seefektif tim yang mengelolanya. Di tim kecil, ini bukan berarti harus ada tim khusus, tetapi harus ada satu orang yang menyetujui perubahan token dan komponen.
Solusi: tunjuk satu pemilik, dan catat perubahan di changelog sederhana.
Kapan Anda Belum Perlu Design System
Jujur saja, tidak semua bisnis membutuhkannya sekarang:
- Anda hanya punya satu website sederhana yang jarang diubah. Panduan merek satu halaman sudah cukup.
- Produk Anda masih tahap prototipe dan desainnya berubah setiap minggu. Tunggu sampai pola mulai stabil.
- Anda memakai platform seperti Shopify atau WordPress dengan tema yang dikelola penuh. Atur token di pengaturan tema saja.
Design system mulai sepadan saat Anda punya dua produk digital atau lebih, lebih dari satu orang atau vendor yang membuat tampilan, atau rencana pengembangan yang berjalan bertahun-tahun.
Checklist Design System Minimum
- Token warna, tipografi, spasi, radius, dan bayangan tersimpan di satu file yang dibaca kode.
- Komponen memakai token semantik, bukan nilai mentah.
- Pasangan warna teks dan latar lolos kontras WCAG 2.2 (4,5:1 untuk teks normal).
- Enam komponen dasar terdokumentasi lengkap dengan statusnya.
- Nama komponen di file desain dan di kode sama.
- Ada satu pemilik dan changelog perubahan.
Jika Anda sedang merencanakan website atau aplikasi baru, masukkan kebutuhan ini sejak awal ke spesifikasi proyek. Jika Anda masih menimbang membangun sendiri atau memakai produk jadi, baca juga kerangka membangun vs. membeli.
Pendekatan AY Labs
Kami membangun design system dengan urutan yang sama untuk setiap klien: token dulu, komponen dasar kedua, dokumentasi secukupnya. Token disimpan langsung di kode, sehingga desain dan implementasi tidak pernah punya dua versi. Kami memeriksa kontras setiap pasangan warna sebelum dipakai, dan kami lebih memilih mengadaptasi library komponen yang sudah matang daripada membangun dari nol, kecuali kebutuhan Anda memang khas. Situs AY Labs sendiri dibangun dengan cara ini. Jika produk digital Anda mulai terasa tidak konsisten, kami siap membantu menyusun fondasinya.
