Prioritas warna artinya warna terkuat dijatah: dipakai sedikit, dan cuma untuk satu hal yang paling penting di layar. Bayangin stabilo di buku catatan. Satu kalimat distabilo kuning, matamu langsung ke sana. Kalau satu halaman penuh distabilo, gak ada lagi yang menonjol, dan kamu harus membaca semuanya dari awal. Hijau Bu Sri adalah stabilonya.
🧪 Tebakan cepat: Bu Sri menambahkan tombol "Tanya Bu Sri lewat WhatsApp" tepat di bawah "Pesan kamar, bayar di tempat", dengan hijau solid yang sama persis. Tamu yang datang untuk memesan: tombol mana yang dia lihat duluan? Jawabannya ada di bagian "Dua tombol hijau".
Satu aksi utama per layar
Tiap layar punya satu tujuan utama. Di halaman pesan, tujuannya memesan. Aksi lain tetap ada, tapi dengan berat visual yang lebih ringan:
| Berat | Tampilan | Di halaman Bu Sri |
|---|---|---|
| Primary (utama) | tombol solid hijau, teks putih | "Pesan kamar, bayar di tempat" |
| Secondary (kedua) | tombol bergaris hijau, latar putih | "Tanya Bu Sri lewat WhatsApp" |
| Tertiary (kecil) | teks hijau bergaris bawah | "Bagikan halaman ini", "Lihat aturan batal lengkap" |
.btn-primary { color: white; background-color: #15803d; border: 1px solid #15803d; }
.btn-secondary { color: #15803d; background-color: #fff; border: 1px solid #15803d; }
.btn-tertiary { color: #15803d; background: none; border: none; text-decoration: underline; }
- Ketiganya tetap hijau, karena ketiganya bisa ditekan. Yang berbeda cuma seberapa banyak hijaunya.
- Primary diisi penuh: paling banyak hijau, paling dulu dilihat. Teks putih di atasnya 5,02:1.
- Secondary cuma garis dan teks hijau di atas putih (5,02:1): jelas bisa ditekan, tapi gak bersaing.
- Tertiary cuma teks bergaris bawah, untuk aksi yang jarang dipakai.
Dua tombol hijau
Kalau "Pesan kamar" dan "Tanya Bu Sri" sama-sama solid hijau, mata gak punya alasan memilih salah satunya. Jadi jawaban tebakannya: gak ada yang dilihat duluan. Tamu harus membaca dua label dulu baru tahu mana yang dia mau. Itu jawaban tebakannya.
Bisa dicek dengan uji juling dari pelajaran hierarki teks: buramkan halamannya 3px. Dengan dua atau tiga tombol solid, yang tersisa adalah dua atau tiga kotak hijau yang sama besar. Dengan satu tombol solid, cuma satu kotak hijau yang tersisa, dan itulah yang dibaca pertama.
Luasnya juga bisa diukur. Di Lab, dengan kartu 320px di Chrome, latar hijau mengisi sekitar 37% kartu kalau ketiga aksi solid, dan sekitar 15% kalau tinggal satu yang solid (angka ini termasuk pilihan "2 malam" yang terpilih). Hijau yang sama, jatahnya beda jauh.
Aturan 60-30-10: jatah, bukan rumus
Aturan 60-30-10 berasal dari desain interior. Ini aturan praktis, bukan hasil penelitian:
- 60% warna dominan: netral. Di sini latar halaman
#f1f5f9dan kartu putih. - 30% warna sekunder: pendukung. Di sini abu-abu teks
#1f2937dan#475569, garis#e2e8f0, dan foto kamar. - 10% warna aksen: brand, cuma untuk yang penting. Di sini hijau
#15803d.
Angkanya gak perlu dihitung persis. Gunanya mengingatkan bahwa aksen harus sedikit: 15% hijau di kartu Bu Sri masih menonjol, 37% sudah mulai jadi latar.
Warna semantik punya tugasnya sendiri
Selain brand dan netral, UI butuh warna untuk status. Pakai secara konsisten, dan pastikan lolos kontras kalau dipakai untuk teks:
| Status | Warna | Kontras di atas putih | Contoh |
|---|---|---|---|
| Error | merah #b91c1c |
6,47:1 | "14 Des sudah dipesan. Pilih 1 atau 2 malam." |
| Peringatan | oranye #b45309 |
5,02:1 | "Tinggal 1 kamar untuk tanggal ini." |
| Sukses | hijau tua #14532d |
9,11:1 | "Pesanan terkirim." |
| Info | biru #1d4ed8 |
6,70:1 | "Check-in mulai jam 14.00." |
- Error selalu merah. Saat muncul, error memang harus menarik perhatian, karena tamu gak bisa lanjut.
- Kuning dan hijau terang yang sering dipakai, seperti
#F59E0B(2,15:1) dan#10B981(2,54:1), gagal sebagai teks di atas putih. Pakai versi gelapnya. - Di halaman ini hijau sudah berarti "bisa ditekan", jadi pesan sukses memakai hijau tua dalam bentuk teks, bukan tombol.
- Tambahkan tulisan atau ikon, supaya status tetap terbaca tanpa warna.
⚠️ Jebakan yang sering ketemu
- Semua aksi solid. Dua, tiga, atau lima tombol solid berarti gak ada yang utama. Pilih satu.
- Warna-warni supaya beda. Lima tombol dengan lima warna mencolok gak membuat urutan, malah membuat semuanya sama keras. Bedakan dengan berat (solid, garis, teks), bukan dengan hue.
- Warna brand di mana-mana. Judul, ikon, dan garis yang ikut hijau menghabiskan jatah aksen.
- Warna semantik yang gagal kontras. Kuning
#F59E0Bsebagai teks cuma 2,15:1.
TL;DR: Warna terkuat dijatah untuk satu aksi utama per layar: primary solid, secondary bergaris, tertiary teks bergaris bawah. Dua tombol solid berarti gak ada yang dilihat duluan; uji juling (blur 3px) menunjukkannya, dan di kartu Bu Sri hijau naik dari sekitar 15% ke 37%. Aturan 60-30-10 (60% dominan netral, 30% sekunder, 10% aksen) adalah aturan praktis dari desain interior: aksen harus sedikit. Warna semantik konsisten: merah untuk error, oranye untuk peringatan, hijau untuk sukses, biru untuk info, dengan versi gelap yang lolos kontras dan tulisan yang menyertainya.
