Design System
Token, komponen, dan state UI Elevate Commerce. Semua halaman memakai komponen dari sini.
Logo
Horizontal
Sidebar & rail desktop, header halaman publik. Latar gelap memakai surface="dark" (wordmark putih).
Icon-only
Header mobile, layout sempit, favicon. Aman di latar terang maupun gelap.
Stacked (asli)
Halaman masuk, 404, materi cetak. Varian gelap untuk latar gelap.
Warna
- Aa
Primary · brand-600
#C91824
- Aa
brand-700
#A0131D
- Aa
Accent · gold-500
#E6A528
- Aa
gold-700 (teks)
#8A5A00
- Aa
Charcoal-900
#23272F
- Aa
White
#FFFFFF
Kontras WCAG AA
Dihitung langsung dari tokens — minimal 4.5:1
- Teks utama14.97:1 ✓
- Teks sekunder6.20:1 ✓
- Teks sekunder di latar halaman5.83:1 ✓
- Label tombol primer5.77:1 ✓
- Hover tombol primer8.06:1 ✓
- Link merah5.77:1 ✓
- Teks di atas emas6.97:1 ✓
- Teks emas5.93:1 ✓
- Teks sidebar admin14.97:1 ✓
- Teks sidebar admin (redup)9.77:1 ✓
- Badge success5.50:1 ✓
- Badge warning5.37:1 ✓
- Badge danger7.06:1 ✓
- Badge info5.81:1 ✓
- Badge neutral6.75:1 ✓
Tipografi
Display 30 — Dashboard
H1 24 — Judul halaman
H2 18 — Judul kartu
Body-lg 16 — default mobile
Body 14 — default admin
Caption 12 — label & meta
Tombol
Status badge
Form & validasi
Teks bantuan singkat
Nomor telepon harus 10–14 digit dan diawali 08 atau +62.
Stepper
Kartu statistik
State UI
Loading
Empty
Belum ada pesanan
Pesanan yang kamu buat akan muncul di sini.
Error
Gagal memuat data
Periksa koneksi internet kamu, lalu coba lagi.
Success
Pesanan berhasil dibuat
Kami akan memberi tahu saat pesanan dikirim.
Permission denied
Akses ditolak
Kamu tidak punya akses ke halaman ini. Hubungi admin jika menurutmu ini keliru.