Belajar UI/UX Design - Color Theory & Tipografi

#Pendahuluan

Setelah di episode 8 layout, grid, dan hierarki sudah tertata, pada episode ini kita memberi warna dan tipografi — dua bahasa visual yang paling memengaruhi kesan dan keterbacaan. Ini momen di mana antarmuka mulai punya "kepribadian".

Mengapa penting? Warna dan font bukan hiasan; keduanya alat komunikasi dan aksesibilitas. Warna yang salah bisa membuat teks tak terbaca (kontras buruk) dan mengirim pesan salah (merah untuk aksi yang aman). Font yang salah membuat pengguna lebih sulit membaca. Episode ini juga menanamkan dasar untuk design tokens di episode 12.

#Color Theory

#Psikologi dan Asosiasi Warna

Warna membawa asosiasi budaya & emosional — konteks menentukan makna:

Untuk KasirKita, pilih warna yang menghormati konteks budaya: hijau untuk "transaksi berhasil", merah untuk "error/stok habis", orange untuk "stok menipis". Jangan memakai merah untuk tombol konfirmasi — itu mengirim sinyal bahaya.

#Palet 60-30-10

Aturan 60-30-10 menyeimbangkan proporsi warna: 60% warna dominan (netral), 30% warna sekunder, 10% aksen.

60% Neutrals      → background & teks (putih/abu muda, hitam/abu gelap)
30% Primary       → biru kehijauan (brand, tombol utama, link)
10% Accent        → orange (notifikasi stok menipis, highlight)
Bersama: success (hijau) + danger (merah) untuk status khusus

Aksen 10% dipakai hemat — hanya untuk hal yang benar-benar perlu menarik mata, seperti indikator stok menipis. Jika semua warna menyala, tidak ada yang menonjol.

#Kontras WCAG dan Aksesibilitas Warna

Kontras diukur dengan rasio luminance antara teks dan latar. Standar WCAG (detail di episode 13):

Gunakan plugin Stark di Figma untuk mengecek kontras langsung saat memilih warna. Contoh pasangan aman untuk teks:

Pasangan warna teks yang aman

/* Kontras tinggi (semua > 4.5:1) */
.teks-primer   { color: #1A1A1A; background: #FFFFFF; } /* 16.9:1 */
.teks-muted    { color: #5C5F66; background: #FFFFFF; } /* 7.5:1  */
.tombol-utama  { color: #FFFFFF; background: #0E7490; } /* 5.6:1  */
.tombol-disabled { color: #9CA3AF; background: #E5E7EB; } /* teks non-aktif, bukan konten penting */

#Tipografi

#Type Scale

Type scale adalah deretan ukuran font yang proporsional — biasanya berbasis rasio (1.250 atau 1.333) sehingga ukuran yang lebih besar terasa "berhubungan". Contoh type scale 1.250 untuk KasirKita:

Display  34 / 40   (jarang — angka besar, welcome screen)
H1       28 / 34
H2       22 / 28   ← judul layar (Konfirmasi Transaksi)
H3       18 / 24   ← judul section (Rincian Pesanan)
Body     16 / 24   ← teks utama (nama produk, jumlah)
Small    14 / 20   ← metadata (harga satuan, label)
Caption  12 / 16   ← disclaimer, info non-kritis

Format yang dipakai: ukuran/tinggi-baris. Konsistensi type scale membuat desain terasa sistematis — dan siap menjadi tokens di episode 12.

#Variable Fonts

Variable fonts adalah satu file font yang berisi banyak variasi (weight, width, optical size) dan bisa diubah lewat properti CSS. Manfaatnya untuk desain: performa (satu file menggantikan banyak) dan fleksibilitas tanpa download font terpisah:

Variable font di CSS

@font-face {
  font-family: "PlusJakarta";
  src: url("/fonts/PlusJakartaSans-Variable.woff2");
  font-weight: 200 800;
}
 
.total-harga {
  font-family: "PlusJakarta", sans-serif;
  font-weight: 700;   /* bebas di antara 200-800 */
}

Untuk KasirKita: Plus Jakarta Sans (display & body) + JetBrains Mono (angka transaksi & kode) — dua variable font cukup untuk seluruh aplikasi.

#Hierarki Tipografi dan Pairing

Hierarki tipografi memakai ukuran, bobot, dan case untuk membedakan peran: judul besar & tebal, body normal, metadata kecil. Pairing adalah memilih kombinasi font yang harmonis. Aturan aman untuk pemula:

• Satu keluarga + weight variasi — paling aman dan profesional.
• Dua keluarga dengan kontras — satu untuk display, satu untuk body (misal display sans + body sans humanist).
• Hindari lebih dari dua keluarga — satu layar dengan 3 font berbeda langsung terasa amatir.
• Pasangkan font dengan mood yang serupa: font geometric jangan dipasangkan dengan font serif klasik tanpa alasan.

#Praktik: Palet + Type Scale Design System Mini

Di file KasirKita, buat frame Design System Mini:

1. Palet: susun 60% neutrals, 30% primary, 10% accent + success/danger, lengkap dengan nilai kontrasnya.
2. Type scale: daftar semua level (Display → Caption) dengan ukuran, line-height, dan weight.
3. Terapkan: redraw layar Konfirmasi dari episode 8 memakai palet & type scale ini.
4. Cek kontras dengan Stark untuk semua pasangan teks-latar.

#Penutup

Pada episode 9 ini, kalian telah memberi warna dan tipografi yang sistematis pada KasirKita.

Inti yang harus dibawa pulang:

• Warna membawa makna kontekstual; 60-30-10 menjaga proporsi; WCAG contrast (4.5:1 teks normal) adalah syarat, bukan saran.
• Jangan andalkan warna saja — selalu tambahkan ikon & label untuk status.
• Type scale (rasio 1.250) membuat ukuran font konsisten; variable fonts efisien & fleksibel.
• Pairing aman: satu keluarga + variasi weight, atau dua keluarga dengan kontras yang disengaja.

Di episode 10 selanjutnya kita akan merakit komponen UI & pola interaksi — button, input, card, modal, toast, dropdown, serta pola empty state, loading, dan error untuk kasir KasirKita. Sampai jumpa di episode 10!