Tenang
Generous whitespace. Tidak ada animasi yang melompat. Warna gelap menenangkan mata pada layar yang dilihat berjam-jam.
Religio Pro · Design System v1.0 · 23 Mei 2026
Sistem yang tenang,
untuk perjalanan yang suci.
Bahasa desain RELIGIO PRO menggabungkan ketenangan ruang ibadah dengan presisi alat operasional kelas dunia. Onyx yang mendalam, emas tipis sebagai penanda nilai, dan tipografi serif yang elegan — semuanya bekerja untuk membuat operator merasa terkendali dan jemaah merasa terjaga.
01 — Brand principles
Empat prinsip yang menuntun setiap keputusan desain.
Setiap layar harus melewati keempat saringan ini. Jika sebuah elemen tidak menambah ketenangan, kepercayaan, ketepatan, atau kehormatan — elemen itu tidak masuk.
Terpercaya
Data ditampilkan dengan presisi font monospace. Audit log dan keamanan terlihat tanpa harus mengintrusi alur kerja.
Presisi
Grid 4-base, hairline 1px, tipografi yang konsisten. Tidak ada angka yang ambigu, tidak ada status yang membingungkan.
Hormat
Emas digunakan sebagai pemberi nilai, bukan dekorasi. Bahasa visual menghormati konteks ibadah tanpa menjadi ornamental.
02 — Logo & mark
Lockup yang tegas dengan bingkai emas.
Glyph monogram "R" dengan bracket emas — referensi pada bingkai foto pintu Ka'bah dan kaligrafi klasik. Mark berdiri sendiri pada favicon & aplikasi mobile; lockup digunakan pada header dan dokumen resmi.
Primary · on onyx
R
RELIGIO PRO
VVIP Umroh System
Inverse · on cream
R
RELIGIO PRO
VVIP Umroh System
Gold leaf · ceremonial
R
RELIGIO PRO
VVIP Umroh System
03 — Color
Palet yang sunyi, dengan emas sebagai aksen tunggal.
95% layar dibangun dari skala Onyx dan Cream. Gold dipakai hemat — untuk hal-hal yang bernilai: konversi, status premium, total revenue, dan ornamen merek.
Signature
Religio Gold
ذَهَب
Onyx · Surface
ink/1000#050403
ink/950#0A0908
ink/900#11100E
ink/800#1C1A17
ink/700#25221E
ink/500#3A3630
ink/300#6B6558
ink/200#8E8676
Cream & Gold
cream/50#FBF8F0
cream/200#EDE6D3
cream/300#D9CFB6
gold/50#F6EDC9
gold/100#E9D690
gold/300 ★#D4AF37
gold/400#BE9A2A
gold/500#97781F
Semantic · jewel-toned
emerald · success#4A8F6D
ruby · danger / SOS#B5564A
amber · warning#C9933B
sapphire · info#4A6F8F
Currency · multi-FX
IDR · Rupiah#D4AF37
USD · Dollar#6FA28A
SAR · Riyal#B89456
04 — Typography
Tiga keluarga huruf untuk empat suara.
Cormorant Garamond untuk hal-hal yang harus terasa indah dan berbobot. Plus Jakarta Sans untuk UI dan instruksi. JetBrains Mono untuk data, nomor paspor, kurs. Amiri untuk Bahasa Arab.
Labbaik Allahumma
Ibadah tenang, sistem presisi
Manajemen Manifes Pintar
Paket Umroh Plus Aqsa 12H
Sistem memantau kelengkapan dokumen: suntik meningitis, masa berlaku paspor minimal 7 bulan, nomor SISKOPATUH, hingga status penerbitan visa.
JEMAAH ID · PT-2026-0481
IDR 38.500.000 · USD 2,420 · SAR 9,080
لَبَّيْكَ اللَّهُمَّ لَبَّيْكَ
بِسْمِ اللَّهِ Setiap detail, terjaga.
Tipografi pairing yang kami pilih bukan tentang kemewahan — ia tentang kepercayaan. Serif klasik memberi rasa abadi pada janji bisnis Anda; sans-serif modern memberi presisi pada angka dan instruksi; Amiri memberi kehormatan pada teks-teks suci.
05 — Spacing
Skala 4-base yang generous.
Skala spasi 4px base. Default density adalah comfortable — untuk operator yang bekerja berjam-jam dan tidak boleh salah baca.
06 — Radius
Radius yang restrained.
Sudut yang lembut tapi tidak bulat berlebihan. Premium & kontemporer, jauh dari kesan SaaS generik.
07 — Elevation
Bayangan dalam, glow emas untuk fokus.
shadow-sm
shadow-md
shadow-lg
glow-gold
08 — Iconography
Garis tipis, geometris, tanpa fill.
Stroke 1.4px, 24px viewport, corner radius minimal. Ikon harus terbaca pada ukuran 16px tanpa kehilangan karakter.
shield
kaaba
pin
manifest
passport
timeline
wallet
analytics
jemaah
bus
hotel
visa
alert
leads
currency
finance
lunas
flag
add
view
close
chevron
clock
bookmark
09 — Components
Tombol — restrained, satu primer per layar.
Primary · Gold
Hanya untuk aksi konversi atau penegasan utama.
Ghost · Outline
Aksi sekunder, navigasi.
Danger · SOS
Hanya darurat & destructive action.
States
Hover, disabled, loading.
10 — Components
Badge & chip — terbaca cepat.
Status badge
Untuk paspor, visa, pembayaran.
Lunas
Tertunda
SOS
Diproses
Draft
Tier & Brand
Highlight produk & komisi.
VVIP · Premium
Rekomendasi
Quad · 38,5 Jt
Komisi 8%
11 — Components
Form fields.
Text · Default
Padding generous, fokus emas tipis.
Nama Lengkap (sesuai paspor)
No. Paspor
Select & State
Dengan error & helper.
Jenis Kamar
Tanggal Lahir
Wajib diisi untuk pengurusan visa
12 — Components
Cards · KPI · Domain entities.
KPI Tile
Angka besar, satuan kecil, delta & sparkline.
Total Omzet · Q2
12,84M IDR
▲ 18.4% vs Q1
Jemaah Card
Avatar dengan bingkai emas, status di kanan.
AF
Lunas
Visa OK
Document Row
Status dokumen — left rule color-coded.
Paspor — A12345678
Berlaku hingga 14 NOV 2027 · valid
Suntik Meningitis
Belum diunggah · tenggat 14 hari
Visa Umroh
Tolakan dari Kedubes · perlu re-submit
Multi-currency tile
Tiga mata uang sejajar dengan kurs harian.
IDR · RUPIAH
Rp 12.840.500.000
USD · DOLLAR
$ 808,420.55
SAR · RIYAL
﷼ 3,032,180
13 — Domain patterns
Pola khusus untuk konteks haji & umroh.
Komposisi siap-pakai untuk situasi yang sering muncul: panel doa & audio guide, drag & drop bunking, manifes bus, leads pipeline.
Doa & Audio Guide
Putaran 4 dari 7 · Thawaf
رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً
"Rabbanā ātinā fid-dunyā ḥasanah"
Bunking drag & drop tile
Kamar 412 · Triple
3/3 · Full
AF
Ahmad Fauzi
≡
RS
Ridho Salman
≡
YK
Yusuf Karim
≡
Sales pipeline stage
Hot Lead
14 · IDR 540 Jt
Bu Hartini Susanto
Quad Plus Aqsa · 2 pax · F/U H+1
WA
Agen Bandung
Pak Joko Wibowo
Triple · 4 pax · Sudah DP
SOS alert
SOS aktif · 00:42
Ibu Khadijah Lestari
Last seen · Masjidil Haram · Gate 79 · 14:32
14 — Voice
Suara: tenang, presisi, hormat.
Tidak menjual dengan teriakan. Tidak meremehkan kompleksitas. Setiap kalimat menambah ketenangan operator dan jemaah.
✓ Lakukan
- "Visa atas nama Ahmad Fauzi telah diterbitkan." — sederhana, faktual, lengkap.
- "Tagihan pelunasan jatuh tempo 14 hari lagi." — informasi, bukan tekanan.
- "Manifes bus 03 diperbarui oleh Pak Yusuf · 14:22." — siapa, apa, kapan.
- Sapaan formal: "Bapak/Ibu", "Jemaah", "Tim".
✗ Hindari
- "Yuk segera bayar sebelum kuota habis!" — bahasa marketing slop.
- "Oops, ada yang salah 😕" — emoji & nada anak muda.
- "Sistem terkeren se-Indonesia!" — superlatif tanpa bukti.
- "Anda telah berhasil sukses melakukan." — redundan, kaku.
15 — Tokens
Daftar token utama.
Semua token tersedia sebagai CSS custom properties di shared/tokens.css. Cukup import di setiap layar.
| Token | Value | Use |
|---|---|---|
| --ink-950 | #0A0908 | Page background |
| --ink-900 | #11100E | Card / panel |
| --ink-800 | #1C1A17 | Elevated card |
| --gold-300 | #D4AF37 | Signature · CTA · status premium |
| --cream-200 | #EDE6D3 | Body text on dark |
| --emerald | #4A8F6D | Success / Lunas / Valid |
| --ruby | #B5564A | Danger / SOS / Ditolak |
| --font-display | Cormorant Garamond | Headings, hero, KPI numbers |
| --font-sans | Plus Jakarta Sans | UI, body |
| --font-mono | JetBrains Mono | Labels, IDs, currency |
| --font-arabic | Amiri | Doa, nama tempat suci |
| --r-md | 8px | Default card radius |
| --glow-gold | 0 0 36px rgba(212,175,55,0.28) | Focus highlight |