UmrohPro — Design System
Brand identity, color palette, typography, dan komponen UI yang digunakan di seluruh platform UmrohPro. Nuansa Islamic-modern: tenang, amanah, profesional.
Brand Identity
UmrohPro
لَبَّيْكَ اللَّهُمَّ لَبَّيْكَ
Khidmah for Servants of Allah's Guests
Logo Mark
Inspirasi Ka'bah — kotak dengan kiswah (strip emas) di tengah. Tegak, simpel, tidak figuratif.
Wordmark
Umroh (white/slate-900) + Pro (gold). Plus Jakarta Sans Bold, tracking-tight.
Tagline
"Membantu yang membantu — meringankan urusan pelayan tamu-tamu Allah."
Prinsip
Color Palette
Primary — Emerald (Islamic Green)
Brand utama. Inspirasi dari deep green Ka'bah (#0F5132). Pakai untuk navigation, link, header, active state.
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
primary-950
Accent — Amber/Gold
CTA buttons, highlight, stripe, dot accent. Memberi kesan 'berharga', 'amanah', 'khidmah'.
amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900
amber-950
Success
emerald-500
Verified, lunas, siap berangkat
Warning
amber-500
Dokumen pending, paspor < 6 bln
Danger
rose-500
Overdue, expired, rejected
Info
sky-500
Info praktis, tips
Typography
Display Font
Plus Jakarta Sans
Logo, hero, headings — modern Islamic-friendly
Body Font
Inter
Body text, UI, form, table
Arabic Accent
بِسْمِ اللَّهِ
Untuk doa, kalimat thayyibah (opsional)
Page Title — 3xl bold
Section Title — lg semibold
Card Title — base semibold
Subsection Label — XS UPPER
Body text — text-sm slate-600 untuk konten umum.
Muted caption — text-xs slate-500
Rp 28.000.000
UP-20260513-0042
Badges
Pilgrim Status (Lifecycle)
Lifecycle jamaah dari Leads sampai Selesai. Setiap status punya warna khas.
Payment Status
Document Status
Stat Cards (Dashboard)
Jamaah Aktif
128
Revenue Bulan Ini
Rp 1,2 M
Piutang Outstanding
Rp 340 jt
Keberangkatan
3 aktif
Alerts
Info
Pembayaran Dikonfirmasi
Paspor Mendekati Expired
Pembayaran Overdue
Form Elements
Input & Select
Sesuai KTP
UmrohPro-Specific Components
Pilgrim Card
Ahmad Fauzan
UP-20260513-0042
+62 812-3456-7890
Paket
Reguler 9H
Berangkat
15 Jun 2026
Payment Progress
Sisa Rp 7.000.000 · Cicilan ke-4 jatuh tempo 20 Mei 2026
Departure Countdown
Keberangkatan
15 Juni 2026
Paket Reguler 9 Hari
Document Checklist
Paspor
B1234567 · Expire 12/2028
KTP
Verified 12/05/2026
Kartu Keluarga
Verified 12/05/2026
Pas Foto 4x6
Menunggu verifikasi
Sertifikat Vaksin Meningitis
Menunggu verifikasi
Buku Kuning (ICV)
Belum diupload
Visa
Ditolak: foto kurang jelas
Kwitansi Preview (PPIU Format)
KWITANSI PEMBAYARAN UMROH
Biro Umroh Al-Hikmah
PPIU No. 123/2024/Kemenag RI
No. Kwitansi : KW-2026-0042
Tanggal : 12 Mei 2026
Nama Jamaah : Ahmad Fauzan
No. HP : 0812-xxxx-xxxx
Untuk Pembayaran:
Paket : Reguler 9 Hari
Tipe Kamar : Quad
Keterangan : Cicilan ke-3
Nominal : Rp 3.500.000
Terbilang: Tiga Juta Lima Ratus Ribu Rupiah
Ringkasan:
Total Paket : Rp 28.000.000
Sudah Bayar : Rp 21.000.000
Sisa Bayar : Rp 7.000.000
Status : CICILAN
Barakallahu fiikum
Admin Biro Al-Hikmah
Tables
Design system ini bukan sekadar dokumentasi UI — ini cerminan niat membangun UmrohPro: tenang, amanah, sederhana. Setiap pixel mempertimbangkan pelayan tamu-tamu Allah yang akan memakainya.
Bismillah, mari membangun bersama.