▲ web-design-guidelines
Vercel/Geist Monochrome Showcase
12 komponen standar — high contrast, minimal, sharp corners, Geist mono.
02
Buttons
6 varian + states03
Form Inputs
text, select, textarea, toggle, search + ⌘KEmail tidak valid
🔍⌘K
0 / 200
Notifikasi Aktif
04
Cards
stat + skeletonSiswa Aktif
342
↑ 3.5%
Surat Terbit
28
↑ 12%
Pending
7
↓ 2
05
Data Table
sortable + badges + selection| 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
sharp corners, minimalKonfirmasi Hapus
Yakin ingin menghapus data siswa Anisa Putri (9C)?
07
Badges & Alerts
semantic statesDefaultSuccessWarningDanger
ℹ️
Info: Tahun ajaran dimulai 15 Juli 2026.
✅
Berhasil: Data siswa diimpor.
⚠️
Peringatan: 3 siswa belum ada NISN.
❌
Error: Koneksi gagal.
08
Tabs
underline indicator09
Progress Bar
3 variantsImpor data — 68%
Sinkronisasi — 100%
Penyimpanan — 85%
10
Accordion
expand/collapseBagaimana cara menambah siswa? ▼
Buka menu Siswa → klik tombol "+ 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
notificationBerhasil. Surat B/027 dicatat.
12
Empty State
no data fallback📭
Belum ada surat
Belum ada surat yang terbit bulan ini.