Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects.

Dieter Rams, perancang Braun

Buku ini menolak satu mitos yang sudah lama merugikan banyak pembuat produk: bahwa desain adalah lapisan kosmetik yang ditambahkan di akhir, setelah "yang penting" — kodenya — selesai. Kenyataannya terbalik. Bagi pengguna, antarmuka adalah produk. Mereka tidak melihat arsitektur basis data Anda; mereka melihat tombol, jarak antar elemen, warna, dan kalimat pada layar. Dari sanalah mereka menyimpulkan apakah produk Anda pantas dipercaya.

Kabar baiknya: desain yang baik bukan bakat gaib. Ia adalah kumpulan keputusan yang bisa dipelajari, diukur, dan disistematisasi. Itulah isi buku ini — bukan "selera", melainkan sistem.

Saya menulis buku ini untuk orang yang membangun sesuatu — developer yang antarmukanya "berfungsi tapi terasa murahan", founder yang produknya bagus tapi kalah oleh pesaing yang lebih rapi, desainer pemula yang ingin alasan di balik setiap keputusan, dan siapa pun yang kini meminta AI menuliskan UI dan ingin tahu cara mengarahkannya dengan benar.

Buku ini ditujukan untuk semua level. Jika Anda belum pernah menyentuh desain, mulailah dari Bab 1 dan baca berurutan; setiap konsep dibangun di atas konsep sebelumnya. Jika Anda sudah berpengalaman, gunakan daftar isi sebagai menu — tiap bab berdiri cukup mandiri, dengan contoh kode yang siap disalin.

Ada tiga janji yang saya usahakan tepati. Pertama, konkret. Setiap prinsip disertai contoh kode Tailwind atau CSS yang bisa langsung Anda tempel. Kedua, jujur soal keterbatasan. Desain punya trade-off; saya menunjukkannya, bukan menyembunyikannya. Ketiga, bisa dipakai bersama AI. Ada bab khusus tentang bagaimana menyusun "kontrak token" agar model generatif menghasilkan UI yang konsisten dengan sistem Anda.

Struktur tiga bagian

Buku dibagi menjadi tiga bagian yang mengikuti alur berpikir seorang perancang produk:

• Bagian I — Fondasi (Bab 1–5). Mengapa desain penting, prinsip UX yang teruji, hierarki visual, tipografi, lalu warna dan design tokens. Ini adalah "tata bahasa" desain.
• Bagian II — Komponen & Teknik (Bab 6–12). Membangun komponen dengan semua state-nya, pendekatan Tailwind, aksesibilitas (dengan alat interaktif), desain responsif, microcopy, state UI, dan motion.
• Bagian III — Sistem & Praktik (Bab 13–16). Merangkai semuanya menjadi design system yang terdokumentasi, satu contoh dashboard nyata, cara agar sistem Anda "dibaca AI", lalu penutup beserta referensi.

Konvensi penulisan

Bayangkan dua aplikasi dengan fitur identik. Yang satu punya jarak yang rapi, warna yang konsisten, tombol yang jelas mana yang utama, dan kalimat yang ramah. Yang lain punya elemen yang berdesakan, warna acak, dua tombol yang sama-sama menonjol, dan pesan error "Error 0x8004". Pengguna tidak pernah membaca kode keduanya. Mereka hanya melihat permukaan — dan dalam hitungan detik memutuskan yang mana yang layak dipercaya dengan data, waktu, dan uang mereka.

Inilah alasan mendasar mengapa UI/UX menentukan produk laku atau tidak: kualitas yang terlihat menjadi proksi bagi kualitas yang tak terlihat. Orang menyimpulkan keandalan sistem dari kerapian antarmukanya. Ini bukan irasional; ini heuristik yang masuk akal. Tim yang teliti soal jarak 4 piksel biasanya juga teliti soal keamanan dan penanganan error.

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

Tiga alasan bisnis yang tidak bisa diabaikan

1. Kesan pertama terjadi dalam milidetik

Riset klasik dari Google menunjukkan pengguna membentuk penilaian estetika terhadap sebuah halaman dalam waktu sekitar 50 milidetik — jauh sebelum mereka membaca satu kata pun. Penilaian sepersekian detik itu mewarnai seluruh interaksi berikutnya lewat halo effect: bila tampilan terasa profesional, pengguna lebih pemaaf terhadap kekurangan; bila terasa amatir, setiap gesekan kecil terasa menjengkelkan.

2. Friksi adalah pajak yang dibayar setiap pengguna

Setiap langkah membingungkan, setiap label ambigu, setiap keadaan loading tanpa umpan balik adalah "pajak" yang dibayar pengguna. Pada satu pengguna pajak ini kecil; dikalikan ribuan pengguna dan ratusan sesi, ia menjadi churn, tiket dukungan, dan konversi yang bocor. Desain yang baik menurunkan pajak itu ke titik yang nyaris tak terasa.

3. Konsistensi menurunkan biaya belajar

Ketika tombol, form, dan pola navigasi berperilaku sama di seluruh produk, pengguna belajar sekali dan menerapkannya di mana-mana. Konsistensi bukan sekadar estetika — ia adalah efisiensi kognitif. Ini juga alasan mengapa design system (Bab 13) begitu berharga: ia mengubah konsistensi dari niat baik menjadi jaminan struktural.

UI vs UX: dua kata yang sering tertukar

Keduanya tak terpisahkan. Buku ini sengaja menyatukan keduanya: prinsip UX (Bab 2) menuntun keputusan, sementara sisanya memberi Anda alat UI untuk mewujudkannya.

Peta perjalanan buku ini

Kita mulai dari cara manusia mempersepsi dan mengambil keputusan (prinsip UX), lalu menata ruang (hierarki & layout), memilih huruf (tipografi), dan mengunci sistem warna (tokens). Setelah fondasi itu, kita membangun komponen nyata, membuatnya dapat diakses semua orang, responsif di setiap layar, dan hidup lewat state dan motion yang tepat. Akhirnya kita merangkai semuanya menjadi sistem — dan menyiapkannya untuk era di mana sebagian UI ditulis oleh AI.

Prinsip UX bukan aturan kaku, melainkan lensa. Ketika sebuah layar terasa "salah" tapi Anda tak bisa menjelaskan kenapa, prinsip-prinsip ini memberi kosakata untuk mendiagnosis dan memperbaikinya. Kita mulai dari yang paling terkenal: sepuluh heuristik usability Jakob Nielsen.

10 Heuristik Usability Nielsen

Hukum-hukum UX

Jika heuristik adalah panduan, hukum-hukum berikut adalah keteraturan perilaku manusia yang bisa Anda hitung dan andalkan.

Hukum Fitts

Waktu untuk mengarahkan ke sebuah target berbanding lurus dengan jaraknya dan berbanding terbalik dengan ukurannya. Terjemahan praktis: target yang sering dipakai harus besar dan dekat. Inilah alasan tombol aksi utama sebaiknya besar, mengapa bilah tab di mobile berada di bawah (dekat ibu jari), dan mengapa target sentuh minimal 44×44 piksel.

/* Target sentuh yang menghormati Hukum Fitts */
.btn-touch{
  min-height:44px; min-width:44px;
  padding:12px 20px; /* area klik lega */
}

Hukum Hick

Waktu mengambil keputusan meningkat seiring jumlah dan kompleksitas pilihan. Terjemahan: kurangi pilihan yang tampil sekaligus. Menu dengan 30 item melumpuhkan; kelompokkan, sembunyikan yang jarang dipakai di balik "Lainnya", dan tampilkan default yang cerdas. Wizard bertahap mengalahkan satu form raksasa.

Hukum Jakob

"Pengguna menghabiskan sebagian besar waktunya di situs lain." Artinya mereka datang ke produk Anda membawa ekspektasi dari produk lain. Ikon keranjang di kanan atas, logo yang mengarah ke beranda, formulir yang tombol submit-nya di bawah — jangan berinovasi pada hal yang sudah menjadi konvensi. Simpan kreativitas untuk yang membedakan produk Anda, bukan untuk lokasi tombol.

Hukum lain yang berguna

• Hukum Miller — memori kerja manusia menampung sekitar 7±2 potongan informasi. Kelompokkan (chunking): nomor telepon dipecah, form panjang dipisah jadi langkah.
• Efek Von Restorff (isolasi) — item yang berbeda secara visual paling diingat. Inilah dasar hierarki: buat satu hal menonjol, bukan semua.
• Hukum Kedekatan (Gestalt) — elemen yang berdekatan dipersepsi satu kelompok. Jarak adalah alat pengelompokan (lihat Bab 3).
• Efek Zeigarnik — tugas yang belum selesai lebih diingat. Progress bar dan checklist onboarding memanfaatkan ini.
• Efek Estetika-Usability — antarmuka yang indah dipersepsi lebih mudah dipakai. Estetika bukan kemewahan; ia bagian dari usability.

The details are not the details. They make the design.

Charles Eames, desainer

Beban kognitif: musuh sunyi

Setiap prinsip di atas pada akhirnya melayani satu tujuan: menurunkan beban kognitif — jumlah usaha mental yang harus dikeluarkan pengguna untuk memakai produk Anda. Beban kognitif datang dalam tiga bentuk, dan Anda hanya bisa mengendalikan dua:

Kabar terpentingnya: beban ekstrinsik hampir seluruhnya di tangan Anda. Setiap label yang ambigu, setiap dua tombol yang sama menonjol, setiap warna tanpa makna — semuanya menambah beban ekstrinsik yang tak perlu. Sebagian besar "perbaikan UX" sebenarnya adalah penghapusan beban ekstrinsik, bukan penambahan fitur.

Hierarki visual adalah seni memberi tahu mata urutan membaca tanpa satu kata instruksi. Ketika Anda membuka layar yang baik, pandangan Anda mendarat di tempat yang tepat — judul lebih dulu, lalu isi, lalu aksi — tanpa Anda sadari itu dirancang. Ketika hierarki gagal, semuanya berteriak sama keras dan mata tersesat.

Empat alat membangun hierarki

• Ukuran — elemen lebih besar dipersepsi lebih penting. Judul > subjudul > isi.
• Bobot & warna — teks tebal atau berwarna kontras menarik perhatian. Simpan warna paling kontras untuk aksi utama.
• Ruang (spacing) — ruang kosong di sekitar elemen membuatnya menonjol. Ruang bukan area terbuang; ia menciptakan fokus.
• Posisi — mata pembaca Latin memindai pola-F (kiri-atas dulu). Letakkan yang penting di jalur pandang alami.

White space is to be regarded as an active element, not a passive background.

Jan Tschichold, tipografer

Sistem spacing 4/8 piksel

Kesalahan paling umum pemula adalah jarak acak: 5px di sini, 13px di sana, 22px di situ. Hasilnya terasa "kotor" walau sulit ditunjuk kenapa. Solusinya adalah skala spacing — semua jarak adalah kelipatan dari satu unit dasar, biasanya 4px. Ini membuat ritme visual konsisten dan keputusan jadi mekanis, bukan tebakan.

/* Skala spacing berbasis 4px — sama dengan default Tailwind */
:root{
  --space-1:4px;   --space-2:8px;
  --space-3:12px;  --space-4:16px;
  --space-6:24px;  --space-8:32px;
  --space-12:48px; --space-16:64px;
}

Grid & kolom

Grid memberi tulang punggung tak terlihat yang membuat elemen sejajar. Standar web modern adalah grid 12 kolom karena 12 mudah dibagi (2, 3, 4, 6). Di CSS modern, Anda jarang butuh framework grid — display:grid dan flexbox sudah cukup.

/* Grid 12 kolom dengan gutter konsisten */
.layout{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  max-width:1200px; margin-inline:auto;
}
.sidebar{grid-column:span 3;}
.content{grid-column:span 9;}

Alignment: garis tak terlihat

Setiap elemen harus sejajar dengan sesuatu. Mata sangat peka pada ketidakselarasan — pergeseran 2px pun terasa. Aturan praktis: kurangi jumlah "garis awal" (tepi kiri) yang berbeda. Jika label, input, dan tombol semua rata kiri pada garis yang sama, form terasa tenang. Rata-kiri hampir selalu lebih terbaca daripada rata-tengah untuk blok teks panjang.

Prinsip Gestalt dalam layout

• Kedekatan — kelompokkan elemen terkait dengan mendekatkannya; pisahkan kelompok dengan ruang lebih besar.
• Kesamaan — elemen dengan bentuk/warna sama dipersepsi sejenis. Semua tombol sekunder harus terlihat sama.
• Penutupan & kesinambungan — mata melengkapi bentuk dan mengikuti garis. Kartu dengan tepi jelas terbaca sebagai satu unit.

Sebagian besar antarmuka, jika Anda melepas gambarnya, adalah teks. Karena itu tipografi bukan detail sampingan — ia adalah tulang punggung desain UI. Menguasai lima keputusan tipografi berikut sudah cukup membuat produk Anda terlihat lebih matang daripada mayoritas pesaing.

Typography is what language looks like.

Ellen Lupton, penulis "Thinking with Type"

1. Skala tipe (type scale)

Seperti spacing, ukuran font sebaiknya mengikuti skala, bukan angka acak. Skala modular mengalikan ukuran dasar dengan rasio tetap (mis. 1.25 — "major third"). Hasilnya harmoni yang terasa musikal.

/* Skala modular rasio 1.25 (major third) */
:root{
  --text-sm:0.8rem;    --text-base:1rem;
  --text-lg:1.25rem;   --text-xl:1.563rem;
  --text-2xl:1.953rem; --text-3xl:2.441rem;
}

2. Keterbacaan (readability)

• Panjang baris — 45–75 karakter per baris optimal. Terlalu panjang, mata lelah mencari baris berikutnya; terlalu pendek, ritme patah. Atur dengan max-width: 65ch.
• Tinggi baris (line-height) — 1.4–1.7 untuk teks isi. Baris rapat menyulitkan; terlalu longgar memutus koneksi antar baris.
• Ukuran minimum — teks isi jangan di bawah 16px di web; di bawah itu memaksa pengguna memicing atau zoom.
• Kontras — teks abu muda di atas putih terlihat "estetik" tapi menyiksa. Lihat Bab 8 untuk angka pastinya.

.prose{
  max-width:65ch;      /* panjang baris ideal */
  font-size:1.0625rem; /* 17px */
  line-height:1.65;
  letter-spacing:0;    /* jangan renggangkan teks isi */
}

3. Memasangkan huruf (font pairing)

Aturan aman: satu font untuk judul, satu untuk isi, plus satu mono untuk kode. Buku ini memakai Space Grotesk (judul — berkarakter, geometris), Inter (isi — netral, sangat terbaca di layar), dan JetBrains Mono (kode & token). Prinsipnya: pasangkan font yang kontras dalam kepribadian tapi selaras dalam proporsi — hindari dua font yang mirip tapi tak sama (terlihat seperti kesalahan).

4. Bobot & ritme

Hierarki tipografi dibangun terutama dari ukuran dan bobot, bukan warna. Judul 700, subjudul 600, isi 400, keterangan 400 warna lebih redup. Batasi jumlah bobot yang dipakai (mis. 400, 600, 700) agar konsisten dan ringan dimuat.

5. Detail yang membedakan amatir dari profesional

• Pakai tanda kutip tipografis ("…" bukan "…") dan tanda pisah em (—) yang benar.
• Cegah kata yatim (satu kata sendirian di baris terakhir judul) dengan text-wrap: balance.
• Angka tabular (font-variant-numeric: tabular-nums) untuk tabel dan harga agar kolom sejajar.
• Jangan pakai teks all-caps untuk kalimat panjang — hanya untuk label pendek, dan tambahkan letter-spacing sedikit.

Warna adalah tempat pemula paling sering tergelincir — bukan karena warna sulit, tapi karena godaan untuk memakai terlalu banyak. Antarmuka profesional justru irit warna. Ia membangun seluruh sistem dari segelintir warna dasar, lalu memakainya secara disiplin lewat design tokens.

Anatomi palet yang sehat

Palet minimal yang berfungsi terdiri dari tiga lapis:

• Brand / primer — warna identitas, dipakai untuk aksi utama dan aksen. Buku ini memakai indigo #6366f1.
• Netral — skala abu (atau abu kebiruan) untuk teks, latar, dan garis. Ini "tulang" UI dan justru paling banyak dipakai.
• Semantik status — sukses (hijau), peringatan (kuning), error (merah), info (biru/cyan).

Warna brand buku ini

Skala warna (color ramp)

Satu warna brand tidak cukup; Anda butuh variannya — lebih terang untuk hover, lebih gelap untuk teks di atas latar terang. Buat "ramp" 50→900:

Design tokens: memberi nama pada keputusan

Token adalah variabel bernama yang menyimpan keputusan desain. Alih-alih menulis #6366f1 di 200 tempat, Anda menulis --color-primary. Ubah satu definisi, seluruh produk ikut berubah. Ini fondasi konsistensi dan dark mode.

Dua lapis token: primitif vs semantik

Praktik terbaik memisahkan token menjadi dua lapis. Token primitif hanya menamai warna mentah (--indigo-500). Token semantik menamai peran (--color-action) dan menunjuk ke primitif. Komponen hanya memakai token semantik — sehingga mengganti tema berarti mengubah pemetaan, bukan komponen.

/* Lapis 1 — primitif: warna mentah, tak punya makna peran */
:root{
  --indigo-500:#6366f1;
  --gray-50:#f8fafc;
  --gray-900:#0f1117;
}
/* Lapis 2 — semantik: peran yang menunjuk ke primitif */
:root{
  --color-bg:var(--gray-50);
  --color-text:var(--gray-900);
  --color-action:var(--indigo-500);
}

Kategori token yang perlu Anda punya

Dark mode yang benar

Dark mode bukan sekadar membalik hitam-putih. Beberapa aturan yang membedakan dark mode profesional dari yang menyakitkan mata:

• Jangan pakai hitam murni. Latar #000 membuat kontras terlalu keras dan bayangan mustahil. Pakai abu sangat gelap (#0f1117) seperti buku ini.
• Jangan pakai putih murni untuk teks. #fff di atas gelap "silau". Turunkan sedikit ke #e7e9f0.
• Elevasi dengan terang, bukan bayangan. Di dark mode, permukaan yang lebih tinggi dibuat sedikit lebih terang, bukan diberi bayangan gelap.
• Turunkan saturasi warna brand. Warna jenuh "bergetar" di atas latar gelap. Kurangi saturasi atau naikkan kecerahannya.

/* Dark mode lewat pemetaan ulang token semantik */
:root{
  --color-bg:#f8fafc;
  --color-surface:#ffffff;
  --color-text:#0f1117;
}
:root[data-theme="dark"],
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg:#0f1117;
    --color-surface:#171b28;
    --color-text:#e7e9f0;
  }
}

Color does nothing until it has a context. It is not a decoration; it is information.

Josef Albers, "Interaction of Color"

Aturan praktis penggunaan warna

Makna warna & konteks budaya

Warna membawa asosiasi, tapi asosiasi itu bergantung konteks dan budaya — bukan hukum universal. Gunakan tabel ini sebagai titik awal, bukan aturan mutlak, dan selalu uji dengan audiens sebenarnya.

Bayangan & elevasi sebagai token

Bayangan bukan efek acak; ia adalah bahasa kedalaman. Sebuah sistem elevasi yang konsisten memberi tahu pengguna elemen mana yang "melayang" di atas yang lain — kartu, dropdown, modal. Definisikan sebagai token berjenjang:

:root{
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 16px -6px rgba(0,0,0,.55);
  --shadow-lg:0 24px 60px -30px rgba(0,0,0,.85);
}
.card{box-shadow:var(--shadow-md);}
.modal{box-shadow:var(--shadow-lg);}

Aturan: makin tinggi elevasi (makin dekat ke pengguna), makin lebar dan lembut bayangannya. Di dark mode, ingat — elevasi sering lebih baik ditandai dengan permukaan yang lebih terang daripada bayangan yang lebih gelap (Bab 5).

Komponen adalah kata-kata dalam bahasa desain Anda. Yang memisahkan komponen amatir dari yang matang bukan tampilan default-nya, melainkan kelengkapan state-nya. Tombol yang cantik saat diam tapi tak bereaksi saat di-hover, tak menandai fokus keyboard, dan tak menunjukkan loading saat diklik — itu komponen setengah jadi.

Lima state yang wajib dimiliki setiap komponen interaktif

Tambahan yang sering perlu: loading (aksi asinkron berjalan) dan selected (untuk toggle, tab, item terpilih).

Galeri komponen langsung

Semua di bawah ini adalah komponen hidup yang dirender halaman ini dari token yang sama. Arahkan kursor, tekan Tab untuk melihat ring fokus, klik untuk merasakan active state.

Anatomi tombol yang benar (kode)

.btn{
  font-weight:600; padding:10px 18px;
  border-radius:10px; cursor:pointer;
  transition:transform .12s, box-shadow .2s;
}
.btn-primary{background:var(--color-action);color:#fff;}
.btn:hover{box-shadow:0 12px 30px -8px rgba(99,102,241,.6);}
.btn:focus-visible{outline:2px solid var(--color-action);outline-offset:2px;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

Panduan singkat per komponen

Modal / dialog

• Beri latar gelap (overlay) untuk memfokuskan perhatian dan menandai konteks berubah.
• Fokus wajib "terjebak" di dalam modal (focus trap); Esc menutup; fokus kembali ke pemicu saat ditutup.
• Tombol utama di kanan, sekunder di kiri (konvensi Barat). Judul jelas, satu aksi utama.

Tabel data

• Rata-kanan untuk angka, rata-kiri untuk teks. Pakai angka tabular agar kolom sejajar.
• Header lengket (sticky) untuk tabel panjang; baris bergaris/hover untuk keterlacakan.
• Sediakan state kosong, loading (skeleton), dan paginasi/virtualisasi untuk data besar (Bab 11).

Navigasi

• Tandai lokasi saat ini (active) dengan jelas. Maksimal 5–7 item utama (Hukum Hick & Miller).
• Di mobile, navigasi utama di bawah (jangkauan ibu jari — Hukum Fitts).
• Logo mengarah ke beranda; breadcrumb untuk hierarki dalam.

Input & form

• Label selalu terlihat (bukan hanya placeholder — placeholder hilang saat mengetik).
• Validasi saat blur atau submit, bukan pada setiap ketikan yang mengganggu.
• Pesan error di dekat field, spesifik, dan menyarankan perbaikan.
• Kelompokkan field terkait; form panjang dipecah jadi langkah (Hukum Miller).

Ikonografi: bahasa visual yang konsisten

Ikon mempercepat pemindaian dan menghemat ruang — tapi hanya jika konsisten dan tak ambigu. Ikon yang dicampur dari lima gaya berbeda terasa lebih berantakan daripada tanpa ikon sama sekali.

• Satu set, satu gaya. Pilih satu keluarga ikon (outline atau filled, satu ketebalan garis) dan patuhi. Jangan campur outline dengan solid di layar yang sama.
• Ukuran & grid konsisten. Rancang ikon pada grid yang sama (mis. 24×24) agar berat visualnya seimbang berdampingan.
• Ikon + label, bukan ikon saja. Ikon tanpa teks sering ambigu (ikon "bagikan" vs "unggah"?). Untuk aksi penting, pasangkan dengan label. Bila ruang terbatas, sediakan tooltip dan aria-label.
• Konsisten makna. Satu ikon = satu arti di seluruh produk. Jangan pakai ikon pensil untuk "edit" di satu tempat dan "catatan" di tempat lain.

Utility-first, yang dipopulerkan Tailwind CSS, membalik cara kita menulis gaya. Alih-alih membuat kelas semantik (.card) lalu mendefinisikannya di file CSS terpisah, Anda menyusun tampilan dari kelas-kelas utilitas kecil langsung di markup (class="p-6 rounded-xl bg-white shadow"). Terdengar berantakan pada awalnya, tapi ada logika kuat di baliknya.

Mengapa utility-first berhasil

• Token by default. Utilitas Tailwind adalah design tokens yang menyamar. p-4 = 16px, text-lg = ukuran dari skala. Anda tak bisa menulis margin:13px secara tak sengaja — sistem memaksa konsistensi.
• Tak perlu menamai. Menamai kelas CSS itu sulit dan sering usang. Utilitas menghapus masalah ini.
• Perubahan lokal, aman. Mengubah satu elemen tak berisiko merusak elemen lain (tak ada CSS global yang bocor).
• Konteks tunggal. Markup dan gaya di satu tempat; tak perlu bolak-balik antar file.

The enemy of art is the absence of limitations.

Orson Welles — dan skala Tailwind adalah batasan yang membebaskan

Contoh: kartu yang sama, dua gaya

<!-- Utility-first (Tailwind) -->
<div class="max-w-sm p-6 rounded-2xl bg-slate-800
            border border-slate-700 shadow-lg">
  <h3 class="text-lg font-semibold text-white">Paket Pro</h3>
  <p class="mt-1 text-sm text-slate-400">Semua fitur.</p>
  <button class="mt-4 w-full py-2.5 rounded-lg font-semibold
            text-white bg-indigo-500 hover:bg-indigo-600
            focus-visible:ring-2 focus-visible:ring-indigo-400">
    Pilih paket
  </button>
</div>

Menjaga agar tidak berantakan

Kritik terbesar utility-first: markup jadi panjang dan berulang. Tiga penawarnya:

• Komponenisasi. Begitu sebuah pola berulang, ekstrak jadi komponen (React/Vue) atau partial. Utilitas hidup di satu tempat, dipakai berkali-kali.
• Konfigurasi token. Definisikan brand Anda di tailwind.config agar bg-brand tersedia — utilitas Anda ikut bahasa desain Anda.
• Urutkan kelas. Pakai plugin prettier untuk mengurutkan kelas secara konsisten; markup jadi mudah dipindai.

// tailwind.config — menyuntik design tokens ke utilitas
export default {
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: '#6366f1', accent: '#ec4899' },
      },
      borderRadius: { xl: '16px' },
    },
  },
};

Aksesibilitas bukan fitur tambahan untuk sebagian kecil pengguna; ia adalah kualitas dasar yang menguntungkan semua orang. Kontras yang cukup menolong pengguna low-vision dan siapa pun di bawah sinar matahari. Navigasi keyboard menolong pengguna motorik dan power user. Bangun aksesibilitas sejak awal jauh lebih murah daripada menambalnya kelak.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, penemu World Wide Web

WCAG dalam ringkasan: POUR

Kontras warna: angka yang wajib Anda tahu

WCAG menetapkan ambang rasio kontras antara teks dan latarnya. Rasio dihitung dari luminance relatif keduanya, berkisar 1:1 (identik) hingga 21:1 (hitam-putih):

Pemeriksa Kontras & Token — alat langsung

Pilih warna teks dan warna latar. Alat ini menghitung rasio kontras WCAG sungguhan dari luminance relatif kedua warna, lalu memberi tahu apakah lolos AA/AAA untuk teks normal maupun besar. Coba preset di bawah, atau masukkan token brand Anda sendiri.

Keyboard & fokus

• Semua elemen interaktif harus dapat dijangkau dan diaktifkan lewat keyboard (Tab, Enter, Space).
• Urutan fokus mengikuti urutan visual/logis. Jangan pakai tabindex positif yang mengacaukannya.
• Indikator fokus (:focus-visible) harus terlihat jelas — jangan hapus outline tanpa pengganti.
• Sediakan tautan "Lewati ke konten" (skip link) di awal halaman untuk pengguna keyboard/screen reader.

HTML semantik & ARIA

Aturan pertama ARIA: jangan pakai ARIA kalau HTML semantik sudah cukup. <button> asli sudah dapat difokus, diaktifkan keyboard, dan diumumkan sebagai tombol — semua gratis. <div onclick> harus Anda beri semua itu manual dan sering salah.

<!-- Buruk: div yang berpura-pura jadi tombol -->
<div class="btn" onclick="save()">Simpan</div>

<!-- Baik: elemen semantik, gratis aksesibel -->
<button type="button" onclick="save()">Simpan</button>

<!-- ARIA hanya saat perlu: ikon tanpa teks -->
<button aria-label="Tutup dialog">×</button>

Landmark & screen reader

Pengguna tunanetra menavigasi halaman lewat pembaca layar (screen reader) yang membacakan struktur, bukan piksel. Struktur itu datang dari elemen HTML semantik yang membentuk landmark — peta yang bisa dilompati pengguna dengan pintasan.

<!-- Struktur landmark yang benar -->
<header>  <!-- banner -->
  <nav aria-label="Utama"> ... </nav>
</header>
<main>    <!-- konten utama, satu per halaman -->
  <h1>Judul halaman</h1>
  <section aria-labelledby="s1"> ... </section>
</main>
<footer> ... </footer> <!-- contentinfo -->

• Satu <h1> per halaman, lalu hierarki heading yang tak melompat (h2 → h3, bukan h2 → h4). Screen reader membangun daftar isi dari heading ini.
• Skip link di paling awal: <a href="#main">Lewati ke konten</a> — menyelamatkan pengguna keyboard dari menekan Tab melewati seluruh nav.
• Gambar dekoratif diberi alt="" agar diabaikan; gambar bermakna diberi alt yang mendeskripsikan informasinya, bukan "gambar".
• Perubahan dinamis (toast, hasil pencarian) diumumkan lewat aria-live agar pengguna tahu sesuatu berubah tanpa melihat layar.

Mayoritas pengguna produk Anda kemungkinan besar datang dari layar kecil. "Mobile-first" bukan sekadar memastikan situs muat di ponsel — ia adalah cara berpikir: rancang untuk kendala terberat (layar sempit, jempol, koneksi lambat) lebih dulu, lalu tingkatkan ke layar besar. Ini menghasilkan desain yang lebih fokus, karena keterbatasan memaksa Anda memprioritaskan.

Prinsip mobile-first dalam CSS

Tulis gaya dasar untuk layar kecil tanpa media query, lalu tambahkan penyempurnaan di breakpoint yang lebih besar dengan min-width. Ini lebih ringkas dan menghindari "membatalkan" gaya desktop di mobile.

/* Dasar: mobile (tanpa query) — satu kolom */
.grid{display:grid;gap:16px;grid-template-columns:1fr;}

/* Tablet ke atas — dua kolom */
@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
/* Desktop — tiga kolom */
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr);}
}

Breakpoint yang lazim

Namun jangan terpaku pada nama perangkat. Breakpoint terbaik adalah tempat di mana desain Anda mulai terlihat rusak — tambahkan breakpoint di sana, bukan pada angka "resmi".

Teknik modern tanpa banyak media query

• Fluid dengan clamp() — ukuran yang berskala mulus antar breakpoint, mis. font-size: clamp(1.5rem, 4vw, 3rem).
• Grid auto-fit — kolom yang menyesuaikan jumlahnya sendiri tanpa media query.
• Container queries — komponen merespons lebar kontainernya, bukan viewport; ideal untuk design system yang dipakai di banyak konteks.

/* Grid responsif tanpa satu pun media query */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

Setiap label tombol, judul kolom, pesan error, dan placeholder adalah keputusan desain. Microcopy — teks-teks fungsional kecil ini — sering diserahkan pada pikiran terakhir, padahal ia adalah tempat pengguna benar-benar "berbicara" dengan produk Anda. Microcopy yang baik terasa seperti seorang teman yang membantu; yang buruk terasa seperti mesin yang menyalahkan Anda.

Design is thinking made visible.

Saul Bass, desainer grafis

Prinsip menulis untuk antarmuka

• Jelas > pintar. Tujuan microcopy adalah pemahaman, bukan lelucon. "Simpan" mengalahkan "Abadikan momen ini".
• Berorientasi aksi & hasil. Tombol menjelaskan apa yang terjadi: "Buat akun" > "Kirim". "Hapus 3 file" > "OK".
• Bahasa pengguna, bukan sistem. "Kami tidak menemukan hasil" > "Query returned null".
• Ringkas. Orang memindai, tak membaca. Buang kata yang tak menambah makna.
• Konsisten. Satu istilah untuk satu konsep. Jangan "Hapus" di satu tempat dan "Buang" di tempat lain.

Menulis pesan error yang manusiawi

Pesan error yang baik menjawab tiga hal: apa yang terjadi, mengapa, dan bagaimana memperbaikinya — tanpa menyalahkan pengguna.

Contoh microcopy per konteks

Desainer pemula merancang "happy path" — layar penuh data yang sempurna. Tapi produk nyata menghabiskan banyak waktunya di keadaan lain: saat masih kosong, saat sedang memuat, saat gagal. Layar-layar ini justru momen paling rentan bagi kepercayaan pengguna. Merancangnya dengan sengaja adalah tanda kematangan.

Empat keadaan yang wajib dirancang

1. Empty state (keadaan kosong)

Muncul saat belum ada data — pengguna baru, hasil pencarian nihil, folder kosong. Empty state yang baik bukan halaman putih hampa; ia adalah peluang onboarding: jelaskan apa yang akan muncul di sini, dan beri satu aksi jelas untuk memulai.

2. Loading state

Jangan pernah biarkan layar diam tanpa umpan balik (Heuristik #1). Pilihan bergantung durasi:

• Instan (<100ms) — tak perlu indikator; malah berkedip mengganggu.
• Singkat (0.1–1s) — spinner atau bar tipis.
• Konten terstruktur — skeleton screen lebih baik daripada spinner: menunjukkan bentuk konten yang akan datang, terasa lebih cepat, dan mencegah pergeseran layout (layout shift).

.skeleton{
  background:linear-gradient(90deg,#1d2230 25%,#222739 50%,#1d2230 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position:200% 0} 100%{background-position:-200% 0}
}

3. Error state

Saat sesuatu gagal, jangan biarkan pengguna terjebak. Jelaskan apa yang terjadi (bahasa manusia, Bab 10), dan beri jalan keluar: tombol "Coba lagi", tautan bantuan, atau kembali ke keadaan aman. Bedakan error yang bisa dipulihkan pengguna (input salah) dari yang bukan (server down) — nada dan aksinya berbeda.

4. Success state

Konfirmasi bahwa aksi berhasil — tapi jangan menghalangi. Toast singkat yang muncul lalu hilang biasanya cukup; hindari modal "Berhasil!" yang memaksa klik. Untuk aksi besar (pembayaran selesai), halaman konfirmasi penuh dengan langkah berikutnya yang jelas justru menenangkan.

Motion yang baik hampir tak terlihat. Ia bekerja di bawah sadar: mengarahkan perhatian, menjelaskan hubungan sebab-akibat, dan membuat perpindahan terasa mulus alih-alih menyentak. Motion yang buruk melakukan kebalikannya — memperlambat, mengalihkan, dan lekas menjengkelkan setelah kali kesepuluh.

Motion is a tool for communication, not decoration.

Prinsip Material Design, Google

Fungsi motion dalam UI

• Umpan balik — tombol yang sedikit turun saat ditekan menegaskan "aku menerima klikmu".
• Kontinuitas — elemen yang bergerak dari A ke B menjaga pengguna tak kehilangan konteks (mis. item yang membesar jadi detail).
• Mengarahkan perhatian — sesuatu yang baru muncul dengan lembut menarik mata tanpa mengejutkan.
• Persepsi kecepatan — skeleton dan transisi yang tepat membuat aplikasi terasa lebih responsif.

Angka yang tepat: durasi & easing

Aturan emas: sesuatu yang muncul boleh sedikit lambat (menarik perhatian); sesuatu yang pergi harus cepat (jangan menahan pengguna). Hindari durasi >500ms untuk interaksi rutin — terasa lamban.

:root{
  --dur-fast:120ms; --dur-base:220ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
.panel{
  transition:transform var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}

Aksesibilitas motion: hormati preferensi

Sebagian orang mengalami mabuk gerak (motion sickness) atau gangguan vestibular. Sistem operasi mereka menyalakan "kurangi gerak". Selalu hormati ini — nonaktifkan atau perhalus animasi non-esensial.

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

Design system adalah tempat semua bab sebelumnya menyatu. Ia bukan sekadar library komponen; ia adalah satu sumber kebenaran yang menghubungkan keputusan desain (token), unit yang dibangun darinya (komponen), cara merangkainya (pola), dan dokumentasi yang membuat semua orang memakainya dengan benar. Design system mengubah "konsistensi" dari harapan menjadi jaminan.

A design system is not a project. It is a product serving products.

Nathan Curtis, praktisi design system

Empat lapis design system

Lapis 1 — Foundation (tokens)

Fondasi tak terlihat: skala warna, spacing, tipografi, radius, bayangan, dan motion — semua sebagai token (Bab 5). Ini adalah kosakata paling dasar. Semua lapis di atas hanya boleh memakai token ini, tak pernah nilai mentah.

Lapis 2 — Komponen

Unit UI yang dibangun dari token: tombol, input, kartu, badge, modal (Bab 6). Setiap komponen didefinisikan sekali, punya semua state, dan terdokumentasi (kapan dipakai, varian apa, prop apa).

Lapis 3 — Pola (patterns)

Rangkaian komponen yang menyelesaikan tugas berulang: form login, tabel data dengan filter, layout halaman detail, alur onboarding. Pola menjaga agar masalah yang sama dipecahkan dengan cara yang sama di seluruh produk.

Lapis 4 — Dokumentasi & governance

Apa gunanya sistem yang tak dipakai orang? Dokumentasi menjelaskan kapan dan bagaimana memakai tiap bagian, dengan contoh do/don't. Governance mengatur cara sistem berkembang: siapa boleh menambah komponen, bagaimana perubahan diusulkan, dan bagaimana versi dirilis.

Cara memulai (tanpa kewalahan)

1. Audit dulu. Kumpulkan tangkapan layar semua tombol, warna, dan jarak yang sudah dipakai. Anda akan kaget melihat 14 warna abu berbeda. Ini bukti kebutuhannya.
2. Tetapkan foundation. Kunci palet, skala spacing, dan type scale sebagai token. Ini fondasi termurah dengan dampak terbesar.
3. Bangun 5 komponen inti. Tombol, input, kartu, badge, modal menutupi mayoritas kebutuhan. Jangan bangun 50 sekaligus.
4. Dokumentasikan sambil jalan. Satu halaman per komponen: contoh hidup, varian, do/don't, kode.
5. Tumbuhkan dari kebutuhan nyata. Tambah komponen saat produk benar-benar membutuhkannya, bukan spekulatif.

Contoh dokumentasi satu komponen

Dokumentasi yang berguna bukan novel — ia adalah kartu ringkas yang menjawab pertanyaan praktis dengan cepat. Berikut kerangka dokumentasi satu komponen yang bisa Anda tiru untuk setiap entri di design system Anda:

Governance: menjaga sistem tetap hidup

Design system mati bila tak ada yang merawatnya. Tiga keputusan governance yang menentukan umur panjangnya:

• Kepemilikan. Tetapkan siapa penjaga sistem (tim atau individu). Tanpa pemilik, sistem melebar tak terkendali lalu ditinggalkan.
• Proses kontribusi. Cara mengusulkan komponen/perubahan baru: template proposal, kriteria diterima, dan review. Ini mencegah 20 varian tombol bermunculan diam-diam.
• Versioning. Rilis dengan versi semantik (mayor/minor/patch) dan catatan perubahan. Perubahan yang memutus (breaking) diumumkan jelas agar tim konsumen bisa bersiap.

Mari satukan semuanya. Berikut potongan dashboard yang dibangun dari token, komponen, dan prinsip di seluruh buku ini. Perhatikan bagaimana hierarki, spacing, warna semantik, dan state bekerja bersama — semuanya dirender halaman ini secara langsung.

Mengapa dashboard ini terasa rapi

Semakin banyak UI kini ditulis oleh AI — Anda mendeskripsikan yang diinginkan, model menghasilkan markup. Ini luar biasa untuk kecepatan, tapi berbahaya untuk konsistensi: tanpa arahan, model menghasilkan warna acak, jarak tak berpola, dan komponen tanpa state. Solusinya bukan berhenti memakai AI, melainkan memberinya kontrak token yang eksplisit — sama seperti Anda memberi design system pada seorang developer baru.

Prinsip generative UI yang konsisten

• Berikan token, bukan nilai. Minta model memakai --color-action, bukan "warna biru". Sertakan definisi token dalam prompt atau file konteks.
• Batasi pilihan. "Gunakan hanya spacing dari skala 4px" menghilangkan jarak acak. Batasan menghasilkan konsistensi.
• Tuntut kelengkapan state. Secara eksplisit minta setiap komponen interaktif punya hover, focus-visible, disabled (Bab 6).
• Sertakan aturan aksesibilitas. "Kontras teks harus lolos WCAG AA; status ditandai warna + teks; semua interaktif dapat diakses keyboard."
• Beri contoh referensi. Satu komponen benar sebagai teladan lebih ampuh daripada sepuluh paragraf aturan.

Kontrak token — sertakan ini dalam prompt Anda

Berikut format ringkas yang bisa Anda tempel ke prompt atau simpan sebagai file konteks proyek. Model harus memakai token ini alih-alih nilai mentah.

{
  "color": {
    "bg": "#0f1117", "surface": "#171b28",
    "text": "#e7e9f0", "text-muted": "#b6bccd",
    "action": "#6366f1", "accent": "#ec4899",
    "info": "#06b6d4", "success": "#22c55e",
    "warning": "#f59e0b", "danger": "#ef4444"
  },
  "space": [4,8,12,16,24,32,48,64],
  "radius": { "sm": 8, "md": 12, "lg": 16, "pill": 999 },
  "font": { "display": "Space Grotesk", "sans": "Inter", "mono": "JetBrains Mono" },
  "rules": [
    "Gunakan HANYA warna & spacing dari token di atas.",
    "Setiap elemen interaktif wajib punya state hover, focus-visible, disabled.",
    "Kontras teks/latar harus lolos WCAG AA (>= 4.5:1 untuk teks normal).",
    "Status ditandai warna + teks/ikon, tidak hanya warna.",
    "Satu tombol primer per konteks; sisanya sekunder/ghost.",
    "Gunakan elemen HTML semantik; ARIA hanya bila perlu."
  ]
}

Contoh prompt yang menegakkan kontrak

Buat komponen kartu harga memakai design tokens berikut: [tempel JSON di atas].
Wajib:
- Hanya warna & spacing dari token.
- Tombol "Pilih paket" sebagai satu-satunya aksi primer (color.action).
- Sertakan state hover, focus-visible (ring 2px color.action), disabled.
- Judul pakai font.display; badge status pakai warna + teks.
- Pastikan kontras teks di atas surface lolos WCAG AA.
Keluarkan HTML + CSS yang memakai CSS custom properties untuk token.

Memverifikasi keluaran AI

Jangan percaya buta. Setelah model menghasilkan UI, jalankan checklist cepat:

• Apakah semua warna & jarak berasal dari token? (cari nilai mentah yang menyelinap)
• Apakah setiap komponen interaktif punya hover + focus-visible + disabled?
• Apakah kontras lolos AA? (pakai Pemeriksa Kontras di Bab 8)
• Apakah bisa dioperasikan penuh dengan keyboard, dengan fokus yang terlihat?
• Apakah ada state kosong, loading, dan error — bukan hanya happy path?
• Apakah status ditandai warna dan teks/ikon, bukan warna saja?
• Apakah motion menghormati prefers-reduced-motion?
• Apakah tata letak tetap utuh di layar sempit (mobile-first)?

Jika Anda melupakan sebagian besar teknik di buku ini — nilai spacing spesifik, sintaks Tailwind, ambang kontras yang pasti — tidak apa-apa. Yang perlu tinggal adalah cara berpikir: desain adalah rangkaian keputusan yang bisa disistematisasi, dan konsistensi mengalahkan kecemerlangan sesekali.

Simplicity is the ultimate sophistication.

Leonardo da Vinci — dikutip Paul Rand sebagai inti desain modern

Tujuh prinsip yang bertahan

1. Antarmuka adalah produk bagi pengguna. Rawat permukaannya seperti Anda merawat kodenya.
2. Batasi pilihan. Skala spacing, palet terbatas, sedikit font — batasan melahirkan konsistensi.
3. Hierarki adalah kejelasan. Buat satu hal menonjol, bukan semua berteriak.
4. Kelengkapan state memisahkan yang matang dari yang setengah jadi.
5. Aksesibilitas bukan opsional. Kontras, keyboard, semantik — untuk semua orang.
6. Kata-kata adalah desain. Microcopy yang jelas menyelamatkan pengguna yang bingung.
7. Sistematiskan. Token dan design system mengubah niat baik menjadi jaminan.

Desain yang baik jarang diperhatikan — justru karena ia bekerja mulus, tak menuntut perhatian. Tujuan Anda bukan membuat pengguna berkata "desain ini indah", melainkan membuat mereka mencapai tujuannya tanpa pernah memikirkan desainnya sama sekali. Itulah pencapaian tertinggi: desain yang tak terlihat karena begitu tepat.

Good design, when it's done well, becomes invisible. It's only when it's done poorly that we notice it.

Jared Spool, praktisi UX

Tanya Jawab (FAQ)

Saya developer, bukan desainer. Bisakah saya membuat UI yang baik?

Ya. Sebagian besar dampak berasal dari disiplin, bukan bakat: pakai skala spacing, batasi warna, cek kontras, beri komponen semua state. Semua bisa dipelajari dan diaturan — persis yang buku ini ajarkan.

Apakah saya harus memakai Tailwind?

Tidak wajib. Tailwind memudahkan menegakkan token, tapi prinsip yang sama berlaku di CSS biasa, CSS Modules, atau CSS-in-JS. Pilih alat yang cocok dengan tim Anda; prinsipnya universal.

Berapa banyak warna yang ideal?

Satu brand + satu skala netral + empat warna status (sukses/peringatan/error/info) sudah cukup untuk mayoritas produk. Netral akan mendominasi 90% UI.

Dark mode dulu atau light mode dulu?

Rancang dengan token semantik sejak awal, dan keduanya menjadi hampir gratis. Jika harus memilih satu untuk dirilis lebih dulu, ikuti mayoritas pengguna Anda — tapi arsitektur tokennya harus mendukung keduanya.

Apakah AI akan menggantikan desainer?

AI mempercepat pelaksanaan, tapi keputusan sistem — token, prinsip, prioritas, trade-off — tetap milik manusia. Peran bergeser dari "menggambar piksel" ke "menetapkan dan menegakkan sistem" (Bab 15).

Dari mana saya mulai kalau produk saya sudah berantakan?

Audit dulu (kumpulkan semua warna & jarak yang dipakai), tetapkan foundation token, lalu perbaiki satu layar memakai tabel di Bab 14. Perbaikan bertahap mengalahkan desain ulang total.

Apakah animasi membuat produk terasa lebih premium?

Hanya jika ia menjelaskan sesuatu. Motion fungsional (umpan balik, kontinuitas) menaikkan kualitas yang dirasakan; motion dekoratif berlebihan justru memperlambat dan menjengkelkan setelah pemakaian kesepuluh. Sedikit, tepat, dan cepat mengalahkan banyak dan mencolok (Bab 12).

Berapa breakpoint responsif yang saya butuhkan?

Sesedikit mungkin. Mulai mobile-first, dan tambahkan breakpoint hanya di tempat desain Anda mulai terlihat rusak — bukan pada angka "resmi" perangkat. Teknik fluid seperti clamp() dan grid auto-fit sering menghapus kebutuhan akan banyak breakpoint (Bab 9).

Haruskah setiap komponen punya semua state sejak awal?

Untuk komponen interaktif, ya — minimal default, hover, focus-visible, dan disabled. State ini murah dibangun di awal tapi mahal ditambal belakangan, dan ketiadaannya adalah tanda paling cepat terlihat bahwa sebuah UI setengah jadi (Bab 6).

Glosarium

Checklist Rilis UI

Jalankan sebelum merilis layar apa pun ke pengguna:

Lampiran A — Referensi Token Lengkap

Kumpulan token semantik yang dipakai buku ini, siap Anda adaptasi sebagai titik awal design system Anda sendiri. Semuanya dalam bentuk CSS custom properties agar mudah dipetakan ke light/dark mode.

:root{
  /* — Warna primitif — */
  --indigo-500:#6366f1; --fuchsia-500:#ec4899; --cyan-500:#06b6d4;
  --green-500:#22c55e; --amber-500:#f59e0b; --red-500:#ef4444;
  --gray-50:#f8fafc; --gray-400:#828aa0; --gray-900:#0f1117;

  /* — Warna semantik (dark) — */
  --color-bg:#0f1117; --color-surface:#171b28;
  --color-text:#e7e9f0; --color-text-muted:#b6bccd;
  --color-action:var(--indigo-500); --color-accent:var(--fuchsia-500);
  --color-success:var(--green-500); --color-warning:var(--amber-500);
  --color-danger:var(--red-500); --color-info:var(--cyan-500);

  /* — Spacing (skala 4px) — */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* — Radius — */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;

  /* — Tipografi — */
  --font-display:'Space Grotesk',sans-serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --text-sm:0.8rem; --text-base:1rem; --text-lg:1.25rem;
  --text-xl:1.563rem; --text-2xl:1.953rem; --text-3xl:2.441rem;

  /* — Motion — */
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:360ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

Lampiran B — Ringkasan Ambang Aksesibilitas

Lampiran C — Bacaan Lanjut

Untuk memperdalam tiap tema, karya-karya klasik berikut layak dibaca langsung dari sumbernya:

• Don Norman — The Design of Everyday Things. Fondasi cara manusia memahami objek: affordance, signifier, dan feedback. Wajib untuk siapa pun yang merancang interaksi.
• Steve Krug — Don't Make Me Think. Prinsip usability web yang ringkas dan praktis; judulnya sendiri adalah seluruh filosofinya.
• Edward Tufte — The Visual Display of Quantitative Information. Standar emas untuk menyajikan data secara jujur dan padat — inti dari "data-ink ratio".
• Ellen Lupton — Thinking with Type. Panduan tipografi yang praktis sekaligus indah.
• Josef Albers — Interaction of Color. Cara warna berperilaku relatif terhadap konteksnya — pelajaran yang tak lekang.
• Jakob Nielsen — 10 Usability Heuristics (Nielsen Norman Group). Sumber asli sepuluh heuristik di Bab 2.
• WCAG 2.2 (W3C). Rujukan resmi untuk semua ambang aksesibilitas di buku ini.
• Refactoring UI (Adam Wathan & Steve Schoger). Kumpulan taktik visual praktis yang sangat cocok mendampingi bab hierarki, warna, dan tipografi.
• Material Design & Apple Human Interface Guidelines. Dua sistem desain publik berskala besar yang layak dipelajari sebagai contoh dokumentasi dan governance.

Don't make me think.

Steve Krug, judul buku usability paling berpengaruh

— Selesai —