Merdeka UI
Design system dan situs dokumentasi untuk backoffice Merdeka.
Studi kasus · Design systems designer · 8 Agustus 2026 · 1 menit baca
Merdeka UI adalah usulan design system untuk backoffice Merdeka: warna, tipografi, spacing, komponen, dan aturan, didokumentasikan di satu situs yang bisa dibuka seluruh tim.
Masalahnya
Sistemnya tinggal di Figma. Engineer butuh jawaban yang sama di samping kode mereka, dan AI coding agent sama sekali nggak bisa membaca Figma. Menyalin nilai secara manual bikin keduanya lama-lama beda.
Yang saya kerjakan
- Satu spesifikasi sebagai sumber. Setiap token berasal dari satu spesifikasi desain. Ada test yang gagal kalau warna di kode nggak sama.
- Di-generate, bukan ditulis manual. Swatch warna, sidebar, dan link antar halaman dibangun dari file token dan navigasi, jadi nggak pernah ketinggalan.
- 47 halaman. Foundation (warna, tipografi, spacing, elevation), 25 komponen, 9 pola produk seperti tabel dan modal, serta panduan aksesibilitas dan layout responsif.
- Bisa dibaca agent. Build-nya juga menulis file JSON berisi semua token, komponen, dan aturan, jadi agent tahu tombol mana yang dipakai dan kenapa.
- Enak dipakai. Pencarian ke semua halaman, dark theme, dan preview komponen yang beranimasi.
Prototipe backoffice kemudian pindah ke token ini. Dibangun dengan HTML dan Tailwind CSS, tanpa framework.