NexaPOS Design System Reference

Acuan visual konsep "Kertas & Tinta" (Section 5A PRD)

Internal Only

Prinsip Utama: Kertas & Tinta

1. Angka adalah bintangnyaHarga, total, kembalian, dan stok tampil besar, rapi, dan tidak pernah bergeser (monospace + tabular nums).

2. Garis, bukan bayanganStruktur dibentuk oleh hairline border 1px dan spasi kelipatan 4px, bukan drop shadow dan kartu mengambang.

3. Satu aksen: Kuning TagKuning label harga (#F2B705) hanya untuk hal yang sedang aktif, terpilih, atau highlight total.

Design Tokens — Warna (Section 5A.3)

#F4F1E8

--paper

Background Halaman

#FBFAF5

--surface

Panel, Tabel, Dialog

#1B1A17

--ink

Teks Utama, Tombol

#6A655A

--ink-muted

Teks Sekunder, Label

#D8D3C5

--line

Hairline Border

#B9B3A2

--line-dashed

Divider Struk

#F2B705

--tag

Aksen Kuning Kasir

#2F7D4F

--success

Lunas, Profit

#A8520B

--warning

Peringatan Stok Rendah

#B8321F

--danger

Batal, Error, Hapus

Warna Kategori Produk (Section 5A.3)

Minuman

#2B7A78

Makanan

#C4622D

Kebutuhan Rumah

#7A7F2A

Perawatan Pribadi

#7B4B6A

Aksesori

#4A5A73

Skala Tipografi: Instrument Sans & IBM Plex Mono

40px Mono — Hero TotalRp 1.450.000

28px Sans — Header TitleKasir Transaksi Penjualan

20px Mono — Subheading Metric128 Transaksi Selesai

16px Sans — Normal BoldKopi Susu Gula Aren 250ml

14px Sans — Body DefaultAntarmuka kasir cepat dan mudah digunakan oleh staf toko retail.

12px Mono — Caption / SKUSKU: PRD-001 · Dibuat: 20 Okt 2026, 14:30 WIB

Varian Komponen UI

Tombol (Radius 4px, 100ms press)

Status Badge (Kotak 8px, bukan pill pastel)

Aktif

Nonaktif

Stok rendah

Habis

Selesai

Batal

Stempel Status Otentik (Rotasi -6°, animasi 160ms)

LUNAS

BATAL

Pratinjau Struk Kasir (Serrated Edge)

LUNAS

TOKO KELONTONG & RETAIL NEXA

Jl. Merdeka No. 45, Jakarta Selatan

Telp: (021) 7289-4501

No:NX-20261020-0042

Waktu:20 Okt 2026, 14.30 WIB

Kasir:Budi Santoso

Kopi Susu Gula Aren 250ml

2 x Rp 18.000Rp 36.000

Roti Gandum Kismis 200g

1 x Rp 17.500Rp 17.500

SubtotalRp 53.500

Diskon-Rp 3.500

TOTALRp 50.000

Bayar (cash)Rp 100.000

KembalianRp 50.000

Terima kasih atas kunjungan Anda!

Barang yang sudah dibeli tidak dapat ditukar

*** NEXAPOS SYSTEM DEMO ***

Audit Anti-Template (Section 5A.2)

Bebas gradient ungu/biru/pink pada button atau hero

Bebas glassmorphism, blur berlebihan, dan glow neon

Bebas kartu rounded-2xl dan shadow-lg generik

Bebas lingkaran warna pastel di KPI card

Warna light mode Kertas & Tinta murni (#F4F1E8)

Semua angka monospaced dan tabular numerals

Bebas emoji sebagai ikon (menggunakan Lucide stroke 1.5)

Bebas template marketing copy ("Welcome back 👋")

Bar chart Recharts datar tanpa gradient

Tombol dan target sentuh minimal 44x44px