5 Kelompok Besar
Gaya Huruf

Serif

Huruf dengan "kaki" atau garis kecil di ujung tiap goresan. Kesannya klasik, elegan, terpercaya, dan berwibawa.

Sans-serif

Tanpa kaki, bersih dan modern. Ini pilihan default kebanyakan website dan aplikasi.

Monospace

Setiap karakter punya lebar yang sama persis, seperti mesin ketik. Kesannya teknis dan "developer".

Display / Dekoratif

Huruf yang dirancang untuk ukuran besar dan menarik perhatian, bukan untuk dibaca panjang. Jangan dipakai untuk paragraf.

Script / Handwriting

Meniru tulisan tangan atau kaligrafi. Dipakai hanya sebagai aksen, misalnya nama brand atau satu kata di judul, karena sulit dibaca dalam jumlah banyak.

Kamar dengan pemandangan laut, sarapan pagi, dan layanan 24 jam untuk setiap tamu.

Pantau stok, penjualan, dan laporan keuangan secara real-time dari mana saja.

Belanja minimal Rp100.000 dan dapatkan potongan langsung di kasir. Berlaku sampai 31 Desember.

Nuansa Visual

Warna

Peran warna dalam palet website

Satu website biasanya tidak hanya pakai satu warna. Palet yang rapi terdiri dari:

Hierarki Visual

Pengertian: urutan perhatian mata pengguna, yaitu apa yang dilihat pertama, kedua, dan ketiga. Alatnya adalah ukuran, ketebalan, warna, kontras, posisi, dan jarak.

di layar pembayaran, kasir perlu melihat total bayar dalam sepersekian detik.

• Total: 36–48px, bold, warna paling gelap atau aksen.
• Daftar item: 14–16px, regular.
• Info tambahan (SKU, catatan): 12px, abu-abu.

urutannya headline (misalnya "Potong Rapi, 30 Menit Selesai"), lalu tombol Booking via WhatsApp, lalu foto hasil potongan, lalu harga.

• Tentukan satu elemen terpenting per layar atau section.
• Lakukan "tes sipit": sipitkan mata saat melihat layar. Elemen yang masih terlihat jelas adalah yang paling menonjol, dan itu harus elemen yang memang paling penting.
• Kurangi penekanan pada elemen sekunder (abu-abu, ukuran lebih kecil) daripada memperbesar semua elemen.

semua teks dibuat bold, semua tombol diberi warna aksen, atau ada tiga headline besar dalam satu layar. Akibatnya pengguna bingung harus melihat ke mana.

Skala Tipografi

Pengertian: sistem ukuran huruf yang konsisten, ditambah pengaturan line-height, font-weight, dan letter-spacing.

cukup 4 ukuran: total (40px), nama produk (16px), harga di kartu produk (16px semibold, angka tabular), dan label kecil (12px).

butuh rentang lebih lebar. Hero bisa 48–64px di desktop dan turun ke 32–36px di HP.

• Panjang baris paragraf ideal 60–75 karakter (max-width: 65ch).
• Judul besar diberi letter-spacing sedikit negatif (-0.02em) supaya rapat dan rapi.
• Teks kecil yang semuanya kapital diberi letter-spacing positif (0.05em).
• Gunakan clamp() untuk ukuran responsif:

memakai 10 ukuran berbeda yang hanya selisih 1px, body text di bawah 14px, atau line-height 1.0 untuk paragraf sehingga teks terasa sesak.

Spacing dan Whitespace

Pengertian: jarak di dalam elemen (padding) dan antar elemen (margin/gap), diatur dengan skala tetap.

elemen yang saling berhubungan diberi jarak dekat, elemen yang berbeda grup diberi jarak jauh.

• Label input ke field-nya: 4–8px.
• Antar field dalam satu form: 16px.
• Antar grup form (misalnya "Data Pelanggan" dan "Pembayaran"): 32px.
• Antar section landing page: 64–128px.

jarak antar kartu produk 8–12px agar banyak produk muat di layar, tapi padding dalam tombol Bayar besar (16–20px) supaya mudah ditekan.

section hero diberi ruang lega (padding 96px atas-bawah) supaya pesan utama terasa "bernapas".

mulai dengan spacing yang terlalu lega, lalu kurangi. Itu lebih mudah daripada sebaliknya. Di Tailwind, skalanya sudah tersedia (p-2, p-4, gap-6, dan seterusnya).

angka acak seperti 13px, 17px, atau 22px, atau jarak label ke field sama dengan jarak antar field sehingga label terlihat "melayang" tanpa jelas milik field yang mana.

Layout dan Grid

Pengertian: kerangka penempatan konten di halaman.

• Grid 12 kolom: standar website. Bisa dibagi menjadi 6+6, 4+4+4, 8+4, dan seterusnya.
• Sidebar + konten: untuk dashboard, ERP, dan admin panel.
• Dua panel (split): untuk kasir, dengan produk di kiri (sekitar 65%) dan keranjang di kanan (sekitar 35%).
• Single column terpusat: untuk artikel, blog, dan form checkout.
• Bento grid: kotak-kotak dengan ukuran berbeda, populer untuk section fitur di landing page.

Hero, keunggulan (3 kolom), produk atau layanan, testimoni, lokasi dan jam buka (embed Maps), CTA WhatsApp, lalu footer.

• Batasi lebar konten: max-width: 1200px; margin-inline: auto;.
• Gunakan CSS Grid untuk layout 2 dimensi dan Flexbox untuk deretan satu arah.
• Rata kiri lebih mudah dibaca daripada rata tengah untuk teks lebih dari 2 baris.

konten membentang penuh di monitor 27 inci sehingga satu baris teks berisi 200 karakter, atau elemen yang tidak sejajar satu sama lain.

Responsive Design

Pengertian: tampilan yang menyesuaikan ukuran layar.

• Desktop/tablet landscape: dua panel berdampingan.
• Tablet portrait: grid produk penuh, keranjang menjadi panel bawah yang bisa ditarik ke atas.
• HP: grid produk 2 kolom, dengan tombol keranjang melayang di bawah ("3 item · Rp45.000 →").

• Grid fitur: 3 kolom di desktop, 2 di tablet, 1 di HP.
• Navigasi menjadi menu hamburger di HP.
• Tombol WhatsApp sticky di bawah layar HP, karena di HP itulah pengunjung paling sering menghubungi.

• Mobile-first: tulis CSS untuk HP dulu, lalu tambah aturan untuk layar besar.

• Uji di perangkat asli, bukan hanya DevTools, terutama HP Android kelas menengah.
• Gambar diberi max-width: 100% dan gunakan srcset untuk ukuran berbeda.

tabel lebar yang membuat seluruh halaman bisa di-scroll ke samping, teks terlalu kecil di HP, atau tombol terlalu berdekatan sehingga mudah salah tekan.

Bentuk: Radius, Border, dan Bayangan

Pengertian: "kepribadian" bentuk elemen, yang sangat memengaruhi nuansa.

radius elemen dalam = radius luar dikurangi padding. Contohnya kartu dengan radius 16px dan padding 8px, maka gambar di dalamnya diberi radius 8px. Kalau keduanya sama, sudut terlihat tidak pas.

• Rendah: kartu dan input (0 1px 2px rgba(0,0,0,.05)).
• Sedang: dropdown dan popover.
• Tinggi: modal dan dialog.

radius 8px, border tipis abu-abu untuk kartu produk, bayangan hampir tidak ada (supaya tetap bersih), dan modal pembayaran dengan bayangan tinggi agar jelas berada di atas.

radius 16–24px, tombol berbentuk pill, dan bayangan lembut berwarna (bukan hitam pekat).

mencampur sudut tajam dan sangat bulat dalam satu halaman, atau bayangan hitam pekat yang terlihat kuno.

Ikon

Pengertian: simbol visual pendukung teks atau navigasi.

Lucide (cocok dengan shadcn/ui), Heroicons, Tabler Icons, dan Phosphor (punya banyak varian ketebalan).

• Kategori produk: ikon + teks (☕ Minuman, 🍞 Roti).
• Metode bayar: ikon tunai, QRIS, transfer, dan kartu.
• Ukuran 20–24px dengan label teks selalu ada, karena kasir baru belum hafal arti ikon.

ikon di section keunggulan (misalnya ikon jam untuk "Buka 7 hari", ikon lokasi untuk "Dekat kampus"). Ukuran lebih besar (32–48px), bisa diberi latar lingkaran berwarna lembut.

• Satu set ikon untuk seluruh proyek.
• Ketebalan garis ikon disesuaikan dengan ketebalan huruf.
• Warna ikon mengikuti warna teks di sebelahnya (currentColor).
• Gunakan ikon yang maknanya sudah umum: 🔍 cari, 🗑 hapus, ✏️ edit.

mencampur ikon outline dan filled, ikon tanpa label untuk aksi penting, atau ikon yang terlalu kreatif sehingga artinya ambigu.

Gambar dan Ilustrasi

Pengertian: konten visual seperti foto, ilustrasi, dan grafis, termasuk gaya dan optimasinya.

• Bersih & profesional: foto terang, latar putih, atau ilustrasi flat sederhana.
• Hangat UMKM: foto asli suasana toko dan pemilik, dengan tone warna hangat.
• Mewah: foto berkualitas tinggi, kontras, dengan banyak ruang kosong.
• Playful: ilustrasi berwarna, karakter, dan bentuk organik.

foto asli lebih dipercaya daripada foto stok. Foto pemilik barbershop sedang memotong rambut jauh lebih meyakinkan daripada model stok. Kalau foto dari klien kurang bagus, minta difoto di dekat jendela (cahaya alami) dari HP yang sudah cukup bagus.

foto produk berbentuk persegi (1:1), latar seragam, ukuran kecil (sekitar 200×200px). Sediakan placeholder (inisial nama produk di atas latar warna) untuk produk tanpa foto.

• Format WebP/AVIF (ukurannya 30–50% lebih kecil dari JPG).
• Atribut loading="lazy" untuk gambar di bawah layar pertama.
• Selalu cantumkan width dan height agar layout tidak bergeser saat gambar dimuat (CLS).
• Hero image sebaiknya di bawah 200KB.
• Teks alt yang deskriptif untuk SEO dan aksesibilitas.

mengunggah foto 5MB langsung dari HP, foto dengan rasio berbeda-beda di satu grid, atau watermark stok yang lupa dihapus.

State Komponen

Pengertian: semua kondisi yang mungkin dialami sebuah elemen atau halaman.

• Empty state:
  • Kasir: keranjang kosong menampilkan ikon keranjang + "Belum ada item. Pilih produk di sebelah kiri."
  • Laporan: "Belum ada transaksi hari ini" + tombol "Mulai Transaksi".
• Loading state: skeleton (kotak abu-abu berbentuk konten) lebih nyaman daripada spinner besar di tengah layar.
• Error state:
  • "Gagal menyimpan transaksi. Periksa koneksi internet, lalu coba lagi." + tombol Coba Lagi.
  • Untuk kasir, pertimbangkan mode offline. Transaksi disimpan lokal lalu disinkronkan saat koneksi kembali.
• Success state: toast "Transaksi #INV-0231 berhasil" + tombol Cetak Struk.
• Partial state: stok tinggal sedikit ditandai badge kuning "Sisa 2".

tombol Bayar wajib punya state loading dan disabled setelah diklik. Tanpa itu, kasir bisa mengetuk dua kali dan terjadi transaksi ganda. Di sisi backend, tambahkan juga idempotency key.

halaman kosong putih polos tanpa penjelasan, tombol tetap aktif saat proses berjalan, atau error yang hanya bertuliskan "Something went wrong".

Aksesibilitas

Pengertian: memastikan website bisa dipakai semua orang, termasuk pengguna dengan gangguan penglihatan, buta warna, atau yang hanya memakai keyboard.

• Kontras: teks biasa minimal 4.5:1, teks besar minimal 3:1. Teks abu-abu muda di atas putih adalah pelanggaran yang paling sering.
• Target sentuh: minimal 44×44px. Untuk kasir layar sentuh, idealnya 48–56px karena kasir bekerja cepat.
• Jangan hanya mengandalkan warna: sekitar 8% pria buta warna merah-hijau. Status "Lunas" (hijau) dan "Batal" (merah) harus juga punya teks atau ikon (✓ Lunas, ✕ Batal).
• Focus ring terlihat: jangan pernah memakai outline: none tanpa pengganti.

• Label pada input: jangan hanya memakai placeholder, karena placeholder hilang saat mengetik.
• HTML semantik: gunakan <button> untuk aksi dan <a> untuk navigasi, bukan <div onClick>.
• Alt text pada gambar informatif.
• Shortcut keyboard untuk kasir: F2 cari produk, F12 bayar, Esc batal. Kasir berpengalaman jauh lebih cepat dengan keyboard.

ikon tanpa label untuk pembaca layar, form yang tidak bisa diisi dengan tombol Tab, atau teks di atas foto tanpa overlay gelap.

Microcopy (Teks Antarmuka)

Pengertian: semua teks kecil di antarmuka seperti tombol, label, pesan error, konfirmasi, placeholder, dan tooltip.

• Tombol aksi menyebut hasilnya: "Bayar Rp45.000", bukan hanya "Bayar".
• Konfirmasi void: "Batalkan transaksi #INV-0231? Tindakan ini tercatat di laporan."

• CTA spesifik: "Pesan Sekarang via WhatsApp" atau "Booking Jadwal Potong".
• Pesan WhatsApp otomatis yang sudah terisi: "Halo, saya mau booking potong rambut untuk hari…"

• Gunakan bahasa pengguna, bukan bahasa teknis.
• Tombol berupa kata kerja.
• Pesan error menjelaskan apa yang salah dan cara memperbaikinya.
• Konsisten: jangan pakai "Hapus" di satu tempat dan "Delete" di tempat lain.

mencampur bahasa Indonesia dan Inggris, teks dari developer yang terbawa ke produksi ("test123", "lorem ipsum"), atau pesan error yang menyalahkan pengguna.

Motion dan Micro-interaction

Pengertian: animasi kecil yang memberi umpan balik dan memperhalus perpindahan tampilan.

• Hover dan perubahan warna: 100–150ms.
• Dropdown, toast, tooltip: 150–250ms.
• Modal dan panel geser: 200–300ms.
• Lebih dari 400ms mulai terasa lambat.

ease-out untuk elemen yang muncul, ease-in untuk elemen yang hilang. Hindari linear untuk UI.

• Produk diklik: kartu sedikit mengecil (feedback tekan), lalu angka di ikon keranjang bertambah dengan animasi kecil.
• Transaksi berhasil: centang hijau muncul singkat. Bisa ditambah bunyi "beep" opsional, karena kasir sering tidak melihat layar.
• Hindari animasi panjang di alur pembayaran. Kecepatan lebih penting.

• Elemen muncul halus saat di-scroll (fade + geser 16px).
• Tombol CTA dengan efek hover yang jelas.
• Jangan berlebihan: animasi pada setiap elemen membuat halaman terasa lambat dan mengganggu.

hormati pengaturan pengguna yang mengurangi animasi.

animasi loading palsu yang memperlambat, parallax berat yang membuat HP murah lag, atau carousel yang bergerak otomatis terlalu cepat.

Kepadatan Informasi (Density)

Pengertian: seberapa banyak informasi ditampilkan dalam satu layar.

sedang. Grid produk cukup padat (banyak produk terlihat tanpa scroll), tapi tombol tetap besar untuk sentuhan.

padat. Tinggi baris tabel 36–40px, font 13–14px, dan banyak kolom. Pengguna mahir ingin melihat banyak data sekaligus.

lega. Satu section berisi satu pesan utama.

• Untuk aplikasi data, sediakan opsi tampilan "Nyaman / Ringkas".
• Tabel padat tetap butuh: header sticky, baris berselang warna (zebra) atau garis tipis, dan angka rata kanan.
• Prinsip progressive disclosure: tampilkan yang penting dulu, detail disembunyikan di balik tombol "Lihat detail" atau baris yang bisa diperluas.

menerapkan spacing lega khas landing page ke dashboard ERP (hanya 5 baris data per layar), atau sebaliknya, landing page sesak seperti brosur.

Design System dan Design Tokens

Pengertian: kumpulan aturan dan komponen yang bisa dipakai ulang. Design tokens adalah nilai-nilai dasarnya (warna, spacing, radius, font, shadow) yang disimpan sebagai variabel.

1. Tokens: warna, spacing, tipografi, radius, shadow, durasi animasi.
2. Komponen dasar: Button, Input, Select, Badge, Card, Modal, Table, Toast.
3. Pola: form, filter tabel, halaman kosong, alur pembayaran.
4. Dokumentasi: kapan memakai komponen tertentu dan kapan tidak.

kalau Anda menjual aplikasi kasir ke beberapa klien (kafe, barbershop, toko baju), cukup ganti beberapa token (warna primer, logo, mungkin radius) dan aplikasi langsung terasa "milik" klien tersebut tanpa mengubah kode komponen. Ini sangat berguna untuk model SaaS multi-tenant: token per tenant bisa disimpan di database lalu disuntikkan saat runtime.

• Tailwind CSS: token diatur di konfigurasi atau @theme (Tailwind v4).
• shadcn/ui: komponen siap pakai berbasis CSS variables, mudah di-theme.
• Storybook: katalog dan dokumentasi komponen beserta semua state-nya.
• Figma Variables: menyamakan token antara desain dan kode.

warna hex ditulis langsung di puluhan file (sulit diubah), dua komponen tombol yang hampir sama tapi berbeda sedikit, atau tidak ada dokumentasi sehingga anggota tim membuat versinya masing-masing.

Urutan belajar yang disarankan

Kalau ingin fokus, urutan ini paling berdampak: