Satu bahasa visual untuk seluruh modul: Dashboard, Master Data, Akademik, Absensi, Keuangan, WhatsApp, PMB, Laporan, dan System. Blue sebagai warna utama, yellow hanya accent, banyak whitespace, card ringan, animasi halus.
16modul
14color token
Inter/ Manrope fallback
01 — FONDASI
Warna & Token
Semua warna dipakai lewat token, bukan HEX langsung di component. Yellow tidak pernah menjadi warna tombol utama.
brand-50
#EFF6FF
brand-100
#DBEAFE
brand-300
#93C5FD
brand-500
#2563EB
brand-600
#1D4ED8
brand-700
#1E40AF
accent-400 / 500
#FBBF24
accent-600 / warning
#F59E0B
surface
#F8FAFC
ink
#0F172A
muted
#64748B
line
#E5E7EB
success
#22C55E
danger
#EF4444
Blue
Primary action · active menu · selected tab · link · main CTA · information state
Yellow
Accent · warning · highlight kecil · notification badge. Bukan warna tombol utama.
Green
Berhasil · lunas · diterima · aktif · hadir
Red
Error · hapus · ditolak · gagal · tidak hadir
02 — FONDASI
Tipografi
Inter untuk seluruh UI. Body table dan form selalu text-sm agar tidak padat.
Page title
34 / 700 / -0.03em
Section heading
24 / 700
Card title
18 / 600
Label & body — text-sm
14 / 500
Description & helper text
12 / 400 / muted
SIDEBAR GROUP LABEL
10 / 600 / 0.09em
03 — FONDASI
Radius, Shadow, Spacing
Button dan input pakai radius 12. Card 16–24. Badge selalu pill. Shadow selalu lembut, tidak pernah gelap.
Radius
12px — button, input, icon button
16px — card default
24px — modal, card besar
full — badge, avatar, chip
Shadow
border — card biasa
shadow-soft — card penting
shadow-lift — modal, dropdown
Spacing scale
4 — icon gap
8 — label ke field
16 — antar field
24 — padding card
40 — antar section
04 — KOMPONEN
Button
Setiap button punya hover, active, disabled, dan loading state. Transisi 150–200ms.
VARIAN
STATE
UKURAN & ICON BUTTON
05 — KOMPONEN
Form & Input
Dua kolom di desktop, satu kolom di mobile. Error tidak hanya bergantung pada warna — selalu ada pesan di bawah field.
Sesuai akta kelahiran
Focus state
!NISN wajib diisi dan harus 10 digit
Select
Readonly
Disabled
06 — KOMPONEN
Badge & Status
Selalu pill, background 10–15% opacity, teks warna penuh agar kontras tetap terbaca.
Status siswa
● Aktif● Lulus● Pindah● Nonaktif
Absensi
HadirTerlambatIzinSakitAlpha
Pembayaran
LunasMenungguDiprosesJatuh tempo
Metode & device
FingerprintFaceManualOnlineOffline
07 — KOMPONEN
Card & StatCard
StatCard adalah satu-satunya tempat angka besar. Hover mengangkat card 1px, tidak lebih.
Total Siswa
1.245
+12 bulan ini
Guru
87
82 aktif · 5 cuti
Kehadiran
94,8%
Hari ini · 1.180 siswa
Kas Sekolah
Rp 245 jt
Bulan ini
ChartCard
Judul, periode, dan aksi di header
Sen
Sel
Rab
Kam
Jum
Sab
Card dengan list
Divider tipis, tanpa shadow tambahan
BS
Budi Santoso
SPP September
Rp 500.000
SN
Siti Nurhaliza
Uang Kegiatan
Rp 150.000
AP
Andi Pratama
SPP September
Rp 500.000
08 — KOMPONEN
DataTable
Satu component untuk semua tabel: search, filter, sort, bulk selection, column visibility, export, pagination. Semua state di bawah dikendalikan tombol yang sama.
Siswa
Kelola data siswa dan informasi akademik
2 siswa dipilih
✓
FOTO
NIS
NAMA ↑
JENJANG
KELAS
ORANG TUA
STATUS
AKSI
{{ s.initials }}
{{ s.nis }}
{{ s.name }}
{{ s.jenjang }}
{{ s.kelas }}
{{ s.parent }}
{{ s.status }}
Menampilkan 1–6 dari 1.245 siswa
…
Belum ada data siswa
Tambahkan siswa pertama atau import dari file Excel untuk mulai mengelola data.
!
Gagal memuat data siswa
Koneksi ke server terputus. Periksa jaringan Anda lalu coba lagi.
09 — KOMPONEN
Skeleton & State Ringkas
Halaman tidak pernah blank saat loading. Card memakai skeleton block, tabel memakai skeleton row.
!
Data belum lengkap
3 siswa belum memiliki data orang tua.
Belum ada broadcast
Pesan yang dikirim akan muncul di sini.
10 — KOMPONEN
Modal & Konfirmasi
Overlay ink 30% dengan blur halus, modal fade + scale. Aksi destruktif selalu lewat konfirmasi.
md · 480pxlg · 560pxxl · 720px2xl · 900px
11 — KOMPONEN
Toast
Fixed top-right, auto dismiss 4 detik, tetap ada tombol close.
12 — KOMPONEN
Tabs, Stepper, Timeline
Tabs untuk detail siswa dan guru, stepper untuk broadcast WhatsApp dan formulir PMB, timeline untuk activity log.
BS
Budi Santoso
● Aktif
NIS 202600123 · SD · Kelas 5A · Wali: Ibu Rahayu
TAB AKTIF — {{ activeTabUpper }}
Absensi tercatat — Face Recognition
Hari ini, 07:01 · Confidence 98,7%
Pembayaran SPP September diterima
14 Sep 2026, 09:24 · Rp 500.000 · Transfer BCA
Data orang tua diperbarui oleh Operator
2 Sep 2026, 13:10
Broadcast WhatsApp
Stepper 5 langkah, kirim hanya setelah konfirmasi
✓
Penerima
2
Template
3
Preview
4
Konfirmasi
5
Kirim
Estimasi penerima
1.245 penerima
Preview pesan
Variable di-highlight otomatis
SD Nusantara Jaya
Halo Bapak/Ibu parent,
Kami informasikan pembayaran SPP month untuk student_name sebesar amount.
Terima kasih.
07:30
13 — POLA
Layout & Sidebar
Sidebar collapsible dengan group menu, badge notifikasi, dan profil di bawah. Topbar menampung search, notifikasi, quick action, dan profil.
N
Nusantara Jaya
Dashboard
MASTER DATA
Siswa12
Orang Tua / Wali
Guru
ABSENSI
Absensi Siswa
Face Recognition
RA
Rina Amelia
Super Admin
RA
Dashboard/Master Data/Siswa
Siswa
Kelola data siswa dan informasi akademik
Aktif
1.180
Lulus
48
Pindah
11
Nonaktif
6
Content area
Breadcrumb → Page header → konten. Semua halaman admin memakai urutan yang sama.
14 — POLA
Role-based UI
Frontend hanya menyembunyikan menu untuk kenyamanan. Otorisasi tetap wajib di backend.
MENU TERLIHAT — {{ roleName }}
{{ m }}
DISEMBUNYIKAN
{{ m }}
{{ roleName }}
{{ roleNote }}
!Menu tersembunyi bukan pengganti authorization.
15 — POLA
Responsive
Desktop sidebar penuh, tablet sidebar collapsed dengan tooltip, mobile hamburger dan card view menggantikan tabel.
Desktop
≥ 1280
Sidebar penuh, 4 KPI sebaris, tabel lengkap, form 2 kolom.