B2C UI Kit · 01
B2C Design System
Skala tipografi, komponen, dan token untuk storefront customer-facing. Dirancang untuk keterbacaan mobile-first dengan Plus Jakarta Sans.
01
Typography
7 level tipografi — Display hingga Body 3. Heading 3, Body 1, dan Body 2 hadir dalam dua bobot (Bold & Regular) untuk fleksibilitas konten.
| Style | Weight | Spec | Sample |
|---|---|---|---|
Display text-b2c-display | Bold | 32px / 700 / lh 38px | Belanja Mudah, Bayar Cepat |
Heading 1 text-b2c-heading-1 | Bold | 22px / 700 / lh 28px | Selamat datang di Kiosklix |
Heading 2 text-b2c-heading-2 | Bold | 18px / 700 / lh 24px | Layanan Populer |
Heading 3 text-b2c-heading-3-bold | Bold | 16px / 700 / lh 22px | Pulsa & Data |
Heading 3 text-b2c-heading-3 | Regular | 16px / 400 / lh 22px | Pulsa & Data |
Body 1 text-b2c-body-1-bold | Bold | 14px / 700 / lh 20px | Isi saldo dan bayar tagihan kapan saja. |
Body 1 text-b2c-body-1 | Regular | 14px / 400 / lh 20px | Isi saldo dan bayar tagihan kapan saja. |
Body 2 text-b2c-body-2-bold | Bold | 12px / 700 / lh 16px | Transaksi diproses dalam hitungan detik |
Body 2 text-b2c-body-2 | Regular | 12px / 400 / lh 16px | Transaksi diproses dalam hitungan detik |
Body 3 text-b2c-body-3 | Semi Bold | 10px / 600 / lh 14px | PROMO TERBATAS |
02
Button
6 varian — Primary, Secondary, Tertiary, Outline, Alert, Invert. Shape pill (default) atau rounded 6px. Loading tetap menampilkan warna aktif tanpa kesan disabled.
| Color | Enabled | Loading | Disabled |
|---|---|---|---|
Primary primary | |||
Secondary secondary | |||
Danger danger | |||
Warning warning |
shape: pill
shape: rounded
03
Service Grid
Grid 4 kolom, icon + label. Warna icon cycling M3 tonal. Mendukung badge (Promo, Baru) dan tap interaction. Digunakan untuk layanan PPOB di halaman beranda.
Selamat datang
Budi Santoso
Layanan
grid only · 390px