Belanja Rp150.000 untuk gratis ongkir antar seputar Salatiga.
Halaman katalog ini adalah versi perbandingan: isinya sama dengan contoh katalog WhatsApp biasa — toko yang sama, 12 produk yang sama, alur pesan yang sama — tetapi seluruh keputusan visualnya diambil dari design system yang dihasilkan skill UI UX Pro Max untuk kategori katalog e-commerce: gaya Flat Design, palet hijau solid, dan pasangan font Rubik + Nunito Sans. Hasilnya bukan tebakan — token warna, tipografi, dan aturan UX-nya bisa ditunjukkan angkanya di bawah ini.
#15803DHeader, tombol utama & harga#22C55ELencana, progres & aksen terang#0369A1Tombol aksi & tautan penting#F0FDF4Latar halaman hijau sangat muda#14532DTeks utama & garis blok#FFFFFFPermukaan kartu produkRubik untuk judul: tegas, geometris, mudah dibaca sekilas.
Nunito Sans untuk isi: huruf sans yang ramah dan bersih untuk nama produk, deskripsi, harga, dan formulir pemesanan. Pasangan ini adalah rekomendasi skill untuk e-commerce dan toko retail — judul cukup berkarakter untuk merek, isi tetap nyaman dibaca dalam daftar produk yang panjang.
Semua ikon — telepon, info, lokasi, jam, pengiriman, keranjang — digambar sebagai SVG tegas sesuai aturan skill.
Teks hijau tua #14532D di atas latar #F0FDF4 dan putih, serta teks putih di atas tombol #15803D dan #0369A1.
Tombol tambah, stepper, chip kategori, dan tombol keranjang semuanya minimal 44px — nyaman ditekan jempol di HP.
Navigasi keyboard mendapat outline aksen yang jelas, dan animasi dimatikan saat pengguna mengaktifkan prefers-reduced-motion.
| Aspek | Contoh Katalog Biasa | Versi UI UX Pro Max (Halaman Ini) |
|---|---|---|
| Gaya visual | Meniru tampilan WhatsApp: hijau WA klasik, sudut sangat bulat, bayangan lembut di banyak tempat | “Flat Design” dari database gaya skill: warna solid datar, tanpa bayangan berat, border tegas 2px, ikon geometris |
| Warna | Palet WhatsApp (#075E54, #25D366, latar krem #ECE5DD) dipilih mengikuti aplikasi WA | Token semantik persis dari skill: primary #15803D, secondary #22C55E, accent #0369A1, background #F0FDF4, foreground #14532D — konsisten di semua komponen |
| Tipografi | Satu font untuk semua (Plus Jakarta Sans), hierarki judul dan isi kurang tegas | Pasangan font hasil kurasi skill untuk e-commerce: Rubik (judul & harga) + Nunito Sans (isi & formulir) |
| Tombol aksi | Satu warna hijau WA untuk hampir semua tombol | Hierarki jelas: hijau primary untuk belanja, biru accent #0369A1 khusus untuk CTA “Lihat Keranjang” dan aksi salin — mata langsung tahu mana langkah berikutnya |
| Aksesibilitas | Sebatas “yang penting tampil” | Checklist skill diterapkan: kontras ≥4,5:1, target sentuh ≥44px, focus state terlihat, reduced-motion dihormati, responsif 375/768/1024/1440px |
| Keputusan desain | Sulit dijelaskan ke klien selain “bagus menurut kami” | Setiap pilihan bisa ditunjuk sumbernya: gaya, palet, font, dan aturan UX berasal dari database skill yang bisa dicari |