ui-ux-pro-max / data-dense-dashboard
Design System
Generated via search.py --design-system | WCAG AA | Fira Sans + Fira Code
01
Tokens
--color-* variablesprimary
#0F172A
secondary
#1E293B
accent
#22C55E
bg
#020617
fg
#F8FAFC
border
#334155
destruct
#EF4444
warning
#F59E0B
// SPACING (4px base)
xs4px
sm8px
md16px
lg24px
xl32px
// TYPE SCALE (Fira Sans / Fira Code)
h1Data Siswa
h2Statistik
bodyKonten paragraf normal.
mono--color-accent: #22C55E
captiontext-muted: #64748B
02
Buttons
32px / flat / green accent03
Form Inputs
dark / mono labelsSesuai akta
Email tidak valid
Ctrl+K
0 / 200
Notifikasi
04
KPI Cards
left accent / mono valuesSiswa Aktif
342
+3.5%
Surat Terbit
28
+12%
Pending
7
-2
05
Data Table
row highlight on hover| NIS | Nama | Kelas | Status |
|---|---|---|---|
| 242507024 | Anisa Putri | 9C | Mutasi |
| 242507001 | Budi Santoso | 7A | Aktif |
| 242507055 | Citra Dewi | 8B | Aktif |
| 242507089 | Dimas P. | 9A | Lulus |
06
Modal
slide-down 0.15sKonfirmasi Hapus
Yakin ingin menghapus data siswa Anisa Putri (9C)?
07
Badges & Alerts
mono / semanticDefaultSuccessWarningDanger
Info: Tahun ajaran 15 Juli 2026.
OK: Data siswa diimpor.
Warning: 3 siswa belum ada NISN.
Error: Koneksi database timeout.
08
Tabs
segmented / mono09
Progress
flat 6pximpor_data — 68%
sync — 100%
storage — 85%
10
Accordion
flat borderedBagaimana cara menambah siswa?
Buka menu Siswa, klik "+ Tambah Siswa", isi formulir, simpan.
Cara mencetak surat?
Buka menu Persuratan, pilih jenis surat, isi data, klik "Cetak".
Cara reset password?
Hubungi admin TU untuk reset password akun portal.
11
Toast
accent left barBerhasil. Surat B/027 dicatat.
12
Empty State
dashed borderBelum ada surat
Belum ada surat yang terbit bulan ini.
13