Design System & UI Components
Style Guide v1.0Standardisasi komponen antarmuka publik dan dashboard untuk PKP Digital Hub.
Visual Identity & Palette System
Primary
Navy Blue
#0B192C / slate-900
Secondary
Medium Blue
#1E3A8A / blue-800
Accent
Golden Yellow
#F59E0B / amber-500
Teal / Data
Teal Green
#0D9488 / teal-600
Background
Light Gray
#F8FAFC / slate-50
Success
Emerald
#059669 / emerald-600
Danger
Soft Rose
#E11D48 / rose-600
1. Typography Hierarchy
Heading 1 — Mengkaji & Memajukan Pesantren Indonesia
Heading 2 — Pusat Kajian, Data, dan Inovasi
Heading 3 — Indeks Kemandirian & Mutu Pesantren
Heading 4 — Sub-judul Modul dan Ringkasan
Body text standar (Plus Jakarta Sans) untuk narasi publikasi, abstrak riset, dan deskripsi program strategis pesantren. Menghasilkan kontras rasio rasional sesuai standar keterbacaan universitas dan lembaga riset nasional.
2. Buttons & Status Badges
Varian Tombol (Buttons)
Status Badges (7 Varian Wajib)
Aktif
Selesai
Tertunda
Draft
Dalam review
Terverifikasi
Belum terverifikasi
3. Stat Cards & Information Cards
Total Pesantren Terdaftar
28,450
+12.4%
Tersebar di 38 Provinsi
Rata-rata Indeks Digital
64.2 / 100
+5.1%
Kategori berkembang
Total Dana Hibah Aktif
Aktif 2026
Rp 14.5 M
Alokasi program 2026
Pengumuman Asesmen Mandiri
Penting
Seluruh pengasuh pesantren dihimbau mengisi survei asesmen mandiri kemandirian ekonomi sebelum 31 Agustus 2026.
Standardisasi Riset Turats
Metodologi digitalisasi manuskrip kuno telah disesuaikan dengan standar International Council on Archives.
Visi Pesantren 2045
Menciptakan 10.000 pesantren mandiri secara finansial dan unggul secara sains teknologi pada tahun 2045.
4. Alerts, Modal & Interaktif UI
Informasi Sistem
Data statistik diperbarui secara berkala melalui pengolahan terpadu Pusat Kajian Pesantren.
Pengajuan Berhasil
Proposal penelitian Anda telah diterima dan sedang diajukan ke dewan reviewer.
Peringatan Tenggat Waktu
Batas akhir pendaftaran Leadership Masterclass tersisa 3 hari lagi.
Validasi Gagal
Mohon lengkapi seluruh dokumen persyaratan yang ditandai wajib.
KA
GK
5. Input, Search, Filter & Tabs
Content Tab 1: Daftar Penelitian Aktif
Menampilkan riset agribisnis dan e-turats pesantren.
6. Table Specimen, Progress, Timeline & Skeleton
Tabel Specimen Reusable
| Nama Pesantren | Pengasuh | Provinsi | Status Akses | Aksi |
|---|---|---|---|---|
| PP Tebuireng | KH. Abdul Hakim Mahfudz | Jawa Timur | Terverifikasi | |
| PP Modern Darussalam Gontor | KH. Hasan Abdullah Sahal | Jawa Timur | Aktif | |
| PP Al-Munawwir Krapyak | KH. R. Abdul Hamid | DI Yogyakarta | Dalam review |
Menampilkan 1 hingga 10 dari 45 entri
Progress Bar
Progress Capaian
78%
Progress Capaian
45%
Progress Capaian
90%
Timeline Alur Program
Pengajuan Proposal
10 AugDraf dokumen riset dikirim
Review Substantif
15 AugPemeriksaan dewan pakar
Penetapan Penerima
25 AugPengumuman SK Hibah
7. Form Fields & Skeleton Loading Specimen
Form Input Standard
Gunakan gelar lengkap jika ada.
Abstrak wajib diisi minimal 50 kata.