G-NIVA UI System
Official Design Tokens, Reusable Components, & Mobile-First UX Reference
1. Design Tokens & Typography
Clean hierarchical typography scale tailored for mobile and desktop screens.
2. Button System
Touch targets $\ge 44\text{px}$ with Normal, Hover, Active, Focus, Disabled, and Loading states.
3. Form & Input Controls
Accessible inputs with clear labels, helper text, currency prefixes, and error states.
4. Cards & Metric Displays
Clean glanceable metric cards with trends and interactive action cards.
5. Badges & Status Indicators
Pill badges with subtle background tint and status indicators.
6. Feedback Alerts
Contextual alerts for success, warnings, errors, and system announcements.
7. Interactive Layer (Toast, Modal, Bottom Sheet)
Dynamic client-side overlays: Toast notifications, Modal dialogs, and Bottom Sheets.
Tab konten Penjualan: Menampilkan rangkuman transaksi harian dan status pembayaran.
Tab konten Stok: Menampilkan jumlah stok fisik, stok minimum, dan mutasi barang.
Tab konten Keuangan: Menampilkan pemasukan kas, pengeluaran harian, dan mutasi saldo.
8. Empty, Loading, & Error States
Fallback states: informative empty states, smooth shimmering skeletons, and in-component errors.
No products yet
Add your first product to start managing your business inventory.
Something went wrong
We couldn't load this information right now. Please try again.