TIASA POSCanvas
Visual Design Board & Wireframe Simulator
Gaya Presentasi (Fidelity)

* **Wireframe:** Layout mentah/sketsa untuk menilai alur & UX.
* **High-Fidelity:** Visual siap pakai dengan pewarnaan premium.

Layar Kasir (View State)
Tema Warna Canvas
Layout Sidebar Kasir
Grid Layout Guide
SemuaKopiMakananPastry
☕1

Tiasa Aren Latte

Kopi
Rp 28.000Tambah
🍛

Chicken Katsu Curry

Makanan
Rp 42.000Tambah
🥐

Butter Croissant

Pastry
Rp 22.000Tambah
🍵

Matcha Premium

Non-Kopi
Rp 34.000Tambah
Keranjang Transaksi
Tiasa Aren LatteRp 28.000 × 1
Rp 28.000
SubtotalRp 28.000
PPN (11%)Rp 3.080
TOTALRp 31.080
Design Tokens Inspector
Slate 950 (Primary BG)
#020617|bg-white

Latar belakang aplikasi utama & header gelap.

Slate 900 (Surface)
#0F172A|bg-slate-50

Wadah kartu produk, panel keranjang & modal.

Blue 600 (Corporate Accent)
#2563EB|bg-blue-600

Tombol utama, status aktif, & tautan navigasi.

Emerald 500 (POS Accent)
#10B981|bg-emerald-500

Simbol lunas, status bayar QRIS, & tombol sukses.

Slate 500 (Muted Text)
#64748B|bg-slate-500

Keterangan produk, sub-judul, & border inaktif.

Animasi & Interaksi
Stagger Entrance GridKartu produk muncul dengan penundaan staggered 0.08 detik demi menciptakan efek mengalir natural saat pertama kali katalog dibuka.
Spring-based Checkout sealSeal lunas struk menggunakan efek fisika pegas (stiffness: 100, damping: 14) untuk micro-interaction yang responsif dan memuaskan saat pembayaran tervalidasi.
Konsultasi Gratis