Beranda Design System

Design System TokoPro

Showcase warna, komponen, dan pattern UI untuk Retail Management System. Indigo sebagai primary, Orange sebagai accent retail.

Color System

Color Palette

Indigo untuk navigasi & brand. Orange untuk CTA retail. Semantic untuk status.

Primary (Indigo) — Brand

100

200

300

400

500

600

700

800

900

950

primary-600 = aksi utama, link, selected state, data display

Accent (Orange) — CTA & Retail Energy

100

200

300

400

500

600

700

800

900

950

orange-500 = tombol "Bayar", "Coba Gratis", highlight, stripe accent

Success

Stok aman, profit naik, payment received

Warning

Stok menipis, pending approval

Danger

Stok habis, void, retur, rugi

Info

Notice, tips, neutral hint

Stock Status Colors (TokoPro-specific)

Stok Aman (42 pcs) Stok Menipis (3 pcs) Stok Habis Discontinued

Typography

Typography Scale

Font: Instrument Sans via Bunny Fonts. Mono untuk harga, SKU, kode transaksi.

Page Title — text-3xl font-bold

Section Title — text-2xl font-bold

Subsection — text-lg font-semibold

Card Title — text-base font-semibold

Body text — text-sm text-slate-600. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted/caption — text-xs text-slate-500

Subsection Label

Rp 1.500.000 — Currency (font-mono)

Rp 12.450.000 — POS Total (XL display)

TRX-20260512-0001 — Transaction Code

BJU-NIK-001 — SKU

Buttons

Variants

cta dipakai untuk action retail utama (Bayar, Coba Gratis).

Sizes

States

With Icons

Badges

Status Badges

Variants (semua dengan & tanpa dot)

Primary Primary (dot) Secondary Aktif Pending Void Held Promo

Transaction Status (POS Context)

Draft Ditahan Selesai Void Refunded

Purchase Order Status

Draft Approved Sent Partial Received Received Cancelled

Member Tier

SILVER GOLD PLATINUM

Stat Cards

Dashboard Stat Cards

KPI utama dashboard owner & manager — penjualan, stok, member, profit.

Penjualan Hari Ini

Rp 12,4 jt

+12% vs kemarin

Total Transaksi

142

+8 transaksi

Stok Menipis

3 produk baru

Member Baru

hari ini

Cards

Card Patterns

Card Standar

Card sederhana dengan title dan body.

Ini body card. Pakai untuk container general — info, form, dll.

Daftar Produk Terbaru

Kaos Polos M Hitam

BJU-KP-M-HTM

Rp 75.000

42 pcs
Topi Baseball Navy

AKS-TB-NV

Rp 45.000

3 pcs
Gelang Kulit Coklat

AKS-GK-CKL

Rp 25.000

0 pcs

Terakhir update 2 menit lalu

Alerts

Alert Banners

Tahukah Anda?

Anda bisa scan barcode langsung dari kamera HP/tablet di POS. Aktifkan di Settings → POS → Camera Scanner.

Transaksi Berhasil

Transaksi TRX-20260512-0001 berhasil disimpan. Struk telah dicetak.

Stok Menipis

23 produk memiliki stok di bawah minimum. Lihat daftar

Shift Belum Dibuka

Anda perlu membuka shift dengan modal awal sebelum mulai transaksi. Buka shift sekarang

Forms

Form Inputs

Form Produk Baru

Nama Produk *

Maksimal 100 karakter

SKU

Kosongkan untuk auto-generate

Barcode

EAN-13

Scan atau ketik manual

Berat

gram

Harga Beli (HPP) *

Auto-format ribuan saat ngetik

Harga Jual *

Kategori *

Brand

Tables

Data Tables

Riwayat Transaksi

Showing 5 of 142 transaksi hari ini

Kode	Waktu	Kasir	Member	Bayar	Total	Status
TRX-20260512-0142	14:32	Andi	Budi (G)	QRIS	Rp 284.715	Selesai
TRX-20260512-0141	14:18	Andi	—	Tunai	Rp 145.000	Selesai
TRX-20260512-0140	14:05	Siti	Citra (S)	Debit	Rp 512.500	Selesai
TRX-20260512-0139	13:54	Siti	—	Split	Rp 892.300	Refunded
TRX-20260512-0138	13:41	Andi	Dewi (P)	Tunai	Rp 1.245.000	Void

Showing 1-5 of 142

POS Interface

POS Layout (Live Demo)

Interface kasir 2-kolom dengan Alpine.js. Klik produk untuk menambah ke keranjang.

Toko Fashion XYZ · Cabang Malioboro

Kasir: Andi · Shift dibuka 08:00 (06:32:12)

ONLINE

F3

Subtotal ( item)

Diskon

PPN (11%)

Total

Receipt

Receipt Thermal Preview

Format struk 58mm thermal printer. Monospace, kompak, mudah dibaca customer.

TOKO FASHION XYZ

Jl. Malioboro No. 123

Yogyakarta, 55213

Telp: 0274-123456

No : TRX-20260512-0001

Kasir : Andi

Tgl : 12/05/2026 14:30

Member: Budi (Gold)

Kaos Polos M

2 x 75.000 150.000

Topi Baseball

1 x 45.000 45.000

Gelang Kulit

3 x 25.000 75.000

Subtotal270.000

Diskon Member (5%)-13.500

PPN (11%)28.215

TOTAL284.715

Bayar (Tunai)300.000

Kembali15.285

Poin didapat: 28 poin

Total poin Anda: 1.234 poin

Terima kasih sudah berbelanja!

Barang yang sudah dibeli

tidak dapat dikembalikan

(kecuali dengan struk ini

dalam 7 hari)

TRX-20260512-0001

Karakteristik Struk Thermal

Lebar 58mm (default) atau 80mm opsional
Font monospace, 32/48 karakter per baris
ESC/POS commands via mike42/escpos-php
Logo toko opsional di header (PNG 384px width)
Barcode transaksi di footer untuk reprint/retur
E-receipt via WhatsApp (PDF) untuk eco-friendly

Barcode Label Format

8 991234 567890

Kaos Polos Hitam - M

SKU: BJU-KP-M-HTM

Rp 75.000

Cetak label via printer label thermal (40×30mm) atau A4 sheet (24/sheet).

Design system v1.0 · TokoPro Retail Management System

Inspired by enterprise SaaS — adapted for modern Indonesian retail.