Pratinjau Sistem Desain MIQAT

01Warna

Navy dan emerald diambil langsung dari piksel berkas logo, bukan dikira-kira. Angka kontras di bawah dihitung terhadap putih dengan rumus WCAG — bukan penilaian mata.

Palet merek

#01285D

Miqat Navy

Warna utama — judul, tombol utama, garis kop

14,36 : 1 AAA

#011B40

Miqat Navy Pekat

Latar gelap, tekan tombol

17,55 : 1 AAA

#09AA87

Miqat Emerald

Tanda saja — goresan, titik status, garis aktif

2,95 : 1 gagal untuk teks

#046B55

Miqat Emerald Teks

Varian aman untuk teks hijau di latar terang

6,48 : 1 AA

Netral dan latar

#E6F5F0

Emerald Muda

Latar lencana dan sorotan

#E7DCC6

Desert Sand

Latar hangat untuk seksi bernuansa ibadah

#F7F9FB

Cloud

Latar permukaan terang

#0D1520

Ink

Teks judul

18,30 : 1 AAA

#33414F

Graphite

Teks isi

9,74 : 1 AAA

#5B6B7C

Slate

Teks sekunder dan keterangan

5,17 : 1 AA

Semantik

#16794C

Sukses

Terverifikasi, lunas, disetujui

5,17 : 1

#B4770B

Peringatan

Menunggu, mendekati jatuh tempo

4,54 : 1

#B3261E

Bahaya

Terlambat, ditolak, melebihi anggaran

6,86 : 1

#1B6FA8

Info

Sedang diproses, keterangan netral

5,04 : 1

Dua aturan yang tidak dapat ditawar

✕Emerald #09AA87 tidak pernah menjadi warna teks di latar terang. Untuk teks hijau, selalu #046B55. Emerald adalah warna tanda: goresan pada logo, titik status, garis aktif.
✓Proporsi 60–30–10. Netral terang mendominasi, navy sebagai struktur, aksen paling banyak 10% bidang. Pada logo pun emerald hanya muncul sebagai satu goresan dan satu baris tagline.

02Tipografi

Tiga peran, tiga huruf. Plus Jakarta Sans untuk judul dan antarmuka, Fraunces untuk satu momen editorial per halaman, IBM Plex Mono wajib untuk seluruh angka.

display
44–72px · 800
−0,035em

Semua Jadi Mudah

h1
32px · 800

Dashboard Owner

h2
24px · 700

Keberangkatan Februari 2027

h3
19px · 700

Kesiapan jamaah

body
16px · 400
1,65

Uang yang masuk dari jamaah dicatat sebagai kewajiban, bukan pendapatan, sampai jamaah benar-benar pulang. Ini yang memisahkan uang yang sudah menjadi hak travel dari uang yang masih menjadi amanah.

label
14px · 500

Nomor paspor

caption
13px · 400

Berlaku sampai 14 April 2030

mono-label
11px · 600
0,12em

Nilai Kontrak

money-lg
28px · 600
IBM Plex Mono

Rp1.485.000.000

money
15px · 500
tabular

Rp32.500.000

editorial
Fraunces
satu per halaman

Owner tidak lagi mengejar laporan. Laporan yang datang kepada owner.

Format penulisan yang mengikat

Hal	Betul	Salah
Rupiah	Rp32.500.000	Rp 32.500.000 · Rp32.500.000,-
Tanggal	12 Februari 2027	12/02/2027
Rentang	12–23 Februari 2027	12-23 Feb 2027
Persen	20,12%	20.12%
Merek	MIQAT · MITECH	Miqat · MiTech
Badan hukum	PT MITECH Digital Indonesia	PT. Mitech Digital Indonesia

03Ruang & Bentuk

Satuan jarak kelipatan 4 px. Sudut membulat sedang, mengikuti terminal membulat pada wordmark — tidak ada sudut siku tajam.

Radius

radius-surface · 12px · kartu, modal

radius-control · 8px · tombol, input

radius-pill · 999px · lencana

Jarak

4px

8px

16px

24px · dalam kartu

48px · antar seksi

Bayangan & garis

shadow · kartu

shadow-lg · modal, layar

garis rambut · 1px, 13%

target sentuh minimum 44 × 44 px

04Logo

Wordmark miqat huruf kecil dengan terminal membulat, huruf Q dipotong satu goresan emerald yang berangkat dari dalam mangkuk huruf ke luar-bawah — arah berangkat, sekaligus jarum penunjuk arah. Goresan itu dan proporsi wordmark terhadap tagline tidak boleh dipisahkan.

Di atas latar

Putih · latar utama

Cloud #F7F9FB · permukaan terang

Navy #01285D · versi terang

Desert Sand #E7DCC6 · materi cetak

Ruang aman dan ukuran minimum

X X

Ruang aman = X, dengan X = tinggi huruf m pada wordmark. Tidak boleh ada teks, garis, atau tepi media di dalam area itu.

Ukuran minimum

Konteks	Lebar minimum
Layar	140 px
Cetak	32 mm
Bordir	45 mm

140px — batas bawah

96px — terlalu kecil

Larangan

✕Jangan diregangkan atau dimampatkan

✕Jangan dimiringkan atau diputar

✕Jangan diberi bayangan atau efek 3D

✕Jangan di latar ramai tanpa lapisan penenang

Larangan lain: mengganti warna di luar palet · mengganti huruf pada wordmark · memakai goresan Q sebagai elemen dekoratif lepas · menghapus tagline pada pemakaian resmi.

Yang belum selesai pada logo

Logo final saat ini hanya tersedia sebagai raster PNG 1380 × 460. Sebelum dipakai untuk cetak besar, bordir, atau papan nama, logo ini wajib divektorkan ke SVG dan EPS dengan teks di-convert to outlines. Varian satu warna dan varian simbol saja juga belum ada. Nama MIQAT belum ditelusuri di PDKI kelas 9 dan 42.

Untuk seluruh kebutuhan digital — aplikasi, situs, PDF, kuitansi, presentasi — berkas yang ada sudah memadai.

05Komponen Dasar

Tombol, lencana status, dan kolom isian. Semuanya bertinggi minimum 44 px, dan setiap status membawa tiga penanda sekaligus: warna, ikon, dan teks.

Tombol

Nonaktif karena 2 dokumen belum lengkap — alasannya selalu disebut, bukan hanya tombolnya diredupkan.

Lencana status

Terverifikasi Lunas Sedang diproses

Menunggu verifikasi Terlambat 14 hari Draf

Warna saja tidak pernah cukup. Pengguna berusia 55 tahun di layar ponsel dengan cahaya matahari langsung adalah pengguna nyata sistem ini.

Kolom isian

Nama lengkap sesuai paspor

Nomor paspor

Kosongkan bila paspor belum terbit — dapat diisi belakangan.

Masa berlaku paspor

✕Kurang dari 6 bulan dari tanggal keberangkatan. Pengajuan visa akan ditolak.

Unggah dokumen

Seret berkas ke sini, atau ambil foto JPG atau PDF · dikompresi otomatis bila terlalu besar

KTPTerverifikasi 3 hari lalu ✓
Pas Foto 3 × 4Ditolak — latar belakang tidak putih. Silakan unggah ulang.

06Komponen Data

Setiap angka di halaman ini dapat diklik menuju daftar detailnya. Tidak ada angka yang berhenti sebagai angka.

Tiga angka keuangan — tidak pernah dijumlahkan

Ketiganya berukuran sama dan sejajar. Masing-masing membawa satu kalimat penjelas. Menjumlahkan atau menggabungkannya adalah kesalahan yang seluruh produk ini ada untuk mencegahnya.

Bilah kesiapan

Kesiapan Keberangkatan94%

Pembayaran43 / 45

Dokumen45 / 45

Visa44 / 45

Tiket45 / 45

Kamar45 / 45

Bus45 / 45

Angka 94% adalah turunan berbobot dari enam dimensi, bukan input.

Proyeksi laba

Rp298.750.000

Proyeksi — bukan laba terealisasi

Margin

20,12%

Per Jamaah

Rp6.638.889

Cost Control · Hotel Makkah

Anggaran	Rp200.000.000
Komitmen	Rp192.000.000
Realisasi	Rp0
Sisa ruang	Rp8.000.000

Tabel data

Jamaah	Booking	Cicilan	Nominal	Jatuh tempo	Status
Siti Rahmawati	BK-2702-018	Cicilan 2	Rp9.750.000	18 Sep 2026	Telat 14 hari
Ahmad Fauzi	BK-2702-021	Pelunasan	Rp8.125.000	02 Okt 2026	Jatuh tempo 3 hari
Nurhayati	BK-2702-007	Cicilan 1	Rp9.750.000	28 Agu 2026	Lunas
Muhammad Ilyas	BK-2702-033	DP	Rp4.875.000	05 Okt 2026	Menunggu verifikasi

Setiap tabel punya pencarian, filter, urutan, aksi massal, dan ekspor. Angka rata kanan dengan huruf monospasi tabular sehingga kolomnya lurus.

Daftar kerja — peran Finance

18 pembayaran menunggu verifikasi4 di antaranya masuk lebih dari 2 hari lalu
Termin vendor Hotel Makkah jatuh tempo 3 hari lagiRp57.600.000 · PO-2026-0142
1 kelebihan bayar perlu dikonfirmasi ke jamaahNurhayati · Rp250.000

Linimasa perjalanan jamaah

Pendaftaran
14 Agustus 2026 · BK-2702-018
DP diverifikasi
16 Agustus 2026 · Rp4.875.000
Melengkapi dokumen
Tinggal 2: Buku Nikah dan Vaksin
Pengajuan visa
Menunggu dokumen lengkap
Manasik
Dijadwalkan 24 Januari 2027
Keberangkatan
12 Februari 2027

Tidak ada pembayaran yang perlu diverifikasi hari ini. Semua bukti transfer yang masuk sudah diperiksa.

Keadaan kosong selalu berupa kalimat manusia yang menjelaskan bahwa memang tidak ada pekerjaan — bukan tabel kosong tanpa keterangan.

07Layar Masuk

Pengunjung tidak pernah mendarat di sini. Alamat / adalah halaman depan travel; masuk diakses lewat tombol kecil di sudut kanan atas. Layar ini untuk staf, agen, dan jamaah yang memang hendak masuk.

barokahtour.co.id/masuk

Panel kiri memakai warna utama travel, bukan warna MIQAT — pada instance pelanggan seluruh layar ini bermerek travel itu sendiri. Satu momen Fraunces dipakai di sini dan tidak diulang di layar lain.

08Dashboard Owner

Layar bintang demo. Tiga angka keuangan yang tidak boleh dicampur, kesiapan keberangkatan, target vs realisasi, dan daftar tindak lanjut — semuanya dapat diklik.

barokahtour.co.id/owner

UMRAH AWAL RAMADHAN

12–23 Februari 2027 · Makassar → Jakarta → Jeddah · 45 jamaah

Dibuka · sisa 0 seat

Kesiapan94%

Pembayaran43/45

Dokumen45/45

Visa44/45

Target vs Realisasi · September

Rp640.000.000 dari Rp800.000.000

80% tercapai · sisa 4 hari

Perlu Tindak Lanjut

Dokumen belum lengkap · 27 jamaahTenggat visa 12 Januari 2027
Pembayaran jatuh tempo · 18 cicilanTotal Rp164.250.000
Follow-up leads · 32 calon jamaahBelum dihubungi lebih dari 3 hari

09Tampilan Ponsel

Portal jamaah dirancang untuk ponsel lebih dulu, untuk pengguna berusia 35–65 tahun. Teks tidak pernah di bawah 16 px, tombol tidak pernah di bawah 44 px, dan halaman harus terbaca dalam 1,5 detik pada jaringan 3G.

Assalamualaikum,

Ibu Siti Rahmawati

167

hari lagi

UMRAH AWAL
RAMADHAN
12 Feb 2027

Kesiapan Anda

4 dari 6 selesai78%

Yang masih kurang

2 Buku Nikah dan VaksinUnggah dari galeri atau ambil foto

1 Cicilan 2 · Rp9.750.000Jatuh tempo 18 September 2026

Pembayaran

✓ DP · Rp4.875.000Lunas 16 Agustus 2026

✓ Cicilan 1 · Rp9.750.000Lunas 28 Agustus 2026

! Cicilan 2 · Rp9.750.000Belum dibayar

Beranda Dokumen Bayar Saya

Portal Jamaah — pertanyaan “apa yang masih kurang” dijawab di layar pertama, di atas lipatan, sebelum apa pun yang lain.

Masuk

Portal jamaah Barokah Tour

Nomor WhatsApp

Kata sandi

Lupa kata sandi? Hubungi admin travel.

Kode booking Anda ada pada pesan WhatsApp yang dikirim travel saat pendaftaran.

Masuk di ponsel — kolom isian setinggi 44 px, teks 16 px, tanpa gulir horizontal.

10Halaman Depan Travel

Disusun dari blok core, bukan ditulis khusus per travel. Yang berbeda antar travel hanya token merek, isi teks, gambar, dan urutan seksi.

barokahtour.co.id

Barokah Tour · Izin PPIU U.123 Tahun 2024

Berangkat umrah dengan tenang, dari awal sampai pulang.

Setiap tahap terlihat di genggaman Anda — pembayaran, dokumen, jadwal, dan kesiapan keberangkatan.

1.240jamaah diberangkatkan

12tahun beroperasi

4,8rata-rata penilaian jamaah

Keberangkatan Terdekat

12–23 Feb 2027Sisa 3 seat

Umrah Awal Ramadhan

Mulai Rp32.500.000

42 dari 45 seat terisi

08–19 Mar 2027Sisa 21 seat

Umrah Ramadhan Penuh

Mulai Rp38.900.000

24 dari 45 seat terisi

14–25 Apr 2027Penuh

Umrah Syawal

Mulai Rp34.000.000

Penanda kelangkaan hanya tampil bila sisa seat benar-benar di bawah 15% kuota, dan selalu menyertakan angka pasti. Paket penuh berubah menjadi Daftar Tunggu, bukan disembunyikan. Tidak ada hitung mundur buatan dan tidak ada “5 orang sedang melihat halaman ini”.

11Aturan yang Mengikat

Sepuluh aturan yang menentukan lulus atau tidaknya sebuah layar. Bukan preferensi.

Tampilan

✓Teks isi minimal 16 px, label 14 px
✓Target sentuh minimal 44 × 44 px
✓Kontras teks minimal 4,5 : 1
✓Status selalu warna + ikon + teks
✓Nilai rupiah selalu monospasi, format Rp1.485.000.000

Perilaku

✓Setiap angka dashboard dapat diklik menuju daftar detailnya
✓Setiap tabel punya pencarian, filter, aksi massal, dan ekspor
✓Tombol yang akan gagal dinonaktifkan beserta alasannya
✓Muat bertahap memakai kerangka konten, bukan lingkaran berputar
✓Aksi merusak menyebut dampak konkret, bukan “Anda yakin?”

Yang boleh berbeda antar travel — dan yang tidak

Boleh berbeda

✓Warna, logo, huruf dari daftar yang disetujui, radius
✓Isi teks, gambar, urutan seksi halaman depan
✓Aturan bisnis lewat settings
✓Modul aktif lewat feature flag

Tidak boleh berbeda

✕Struktur komponen dan tata letak panel
✕Pola interaksi
✕Letak navigasi utama portal jamaah
✕Format penulisan angka dan tanggal

Alasannya praktis: dukungan pelanggan harus dapat mengatakan “tekan tombol di kanan atas” kepada travel mana pun, tanpa lebih dulu membuka instance travel itu untuk memastikan tombolnya memang di sana.