school SIMAG-JKBDesign System & UI Guide
Buka Gerbang Login
Referensi Pengembang Web SIMAG-JKB

Panduan Desain & Komponen UI

Halaman ini dibuat sebagai pedoman integrasi bagi anggota tim pengembang untuk memastikan keseragaman palet warna (White & Blue), hierarki tipografi, tombol, form input, dan komponen status.

Filosofi & Standar

1. Prinsip Desain "Academic Trust"

Sistem Informasi Magang JKB (SIMAG-JKB) digunakan di lingkungan kampus perguruan tinggi. Tampilan harus memancarkan kredibilitas akademik, keterbacaan data yang tinggi, dan kejelasan alur.

clean_handsNo AI Slop

Hindari gradien berlebihan, ornamen blur floating yang tidak fungsional, dan glassmorphism gelap. Setiap garis dan warna harus memiliki tujuan interaksi yang jelas.

grid_viewGrid 8-Pixel

Semua margin, padding, tinggi elemen, dan jarak kolom mengikuti kelipatan 8px (4px, 8px, 16px, 24px, 32px, 48px) untuk konsistensi vertikal.

paletteWhite & Blue Theme

Warna utama didominasi putih bersih (card & surface) dan biru akademik terpercaya (Trust Blue #1E3A8A) dengan kontras teks Slate gelap.

Token Sistem

2. Palet Warna (Color Palette)

Selalu gunakan CSS Variable yang terdefinisi pada assets/css/style.css. Jangan pernah melakukan hardcode nilai HEX pada kode baru!

Warna Brand Utama
#1E3A8A
Primary (Trust Blue)var(--primary)
Header, Tombol Utama
#172E6E
Primary Hovervar(--primary-hover)
State hover tombol
#2563EB
Secondary Bluevar(--secondary)
Link teks, ikon, focus ring
#DBEAFE
Accent Lightvar(--accent)
Background tag, active state
#EFF6FF
Accent Softvar(--accent-soft)
Hover tabel, th, banner
Warna Status & Validasi
#10B981
Success (Di-ACC)var(--success)
Ulasan disetujui, akun aktif
#F59E0B
Warning (Pending)var(--warning)
Antrean ulasan, bintang rating
#E11D48
Danger (Ditolak)var(--danger)
Ulasan ditolak, hapus data
#F8FAFC
Canvas Backgroundvar(--bg-canvas)
Background body seluruh app
Keterbacaan & Hirarki

3. Panduan Tipografi (Typography)

Font utama yang digunakan adalah Inter (Google Fonts) dengan fallback ke system-ui, -apple-system, sans-serif. Hindari penggunaan pure black (#000000) untuk teks panjang; gunakan Dark Slate var(--text) (#1E293B).

Class Utility Ukuran / Line Height Bobot Contoh Tampilan Penerapan
.display 44px / 52px Bold (700) Judul Utama Hero Hero section landing page
.h1 32px / 40px Bold (700) Judul Halaman Heading utama halaman (Page Header)
.h2 24px / 32px Semi-Bold (600) Judul Bagian Modul Section title pada landing / dashboard
.title 18px / 24px Semi-Bold (600) Judul Kartu Lowongan Header kartu lowongan, modal title
.body-lg 16px / 24px Regular (400) Teks pengantar dan narasi profil jurusan. Lead text, deskripsi lowongan
.body 14px / 20px Regular (400) Teks isi ulasan magang dan tabel data default. Isi konten kartu, isi tabel default
.label 14px / 20px Semi-Bold (600) Label Formulir & Tombol Label input field, nama pengguna
.caption 12px / 16px Regular (400) Tanggal pengajuan: 3 Nov 2026 · NIM: 2341720001 Meta info, timestamps, hint bantuan
.overline 12px / 16px Bold, Uppercase Kategori Magang Tag sub-header kecil di atas H1/H2
Komponen Interaktif

4. Panduan Penggunaan Button

Tombol dirancang menggunakan sudut border-radius: 6px (sedikit melengkung tapi tetap struktural akademik). Hindari tombol berbentuk pill lonjong kecuali untuk status badge.

Varian Tampilan Tombol
Ukuran Tombol
check_circleAturan Yang Harus Diikuti (DO)
  • Gunakan maksimal 1 Primary Button dalam satu modul tampilan agar arah aksi utama jelas bagi pengguna.
  • Gunakan .btn-danger hanya untuk aksi destruktif (hapus data permanen, nonaktifkan akun).
  • Gunakan .btn-success khusus pada keputusan persetujuan moderasi ulasan.
cancelHal Yang Dilarang (DON'T)
  • Jangan gunakan warna tombol yang tidak ada di token CSS (misalnya kuning terang atau ungu acak).
  • Jangan menumpuk 3 tombol primary dalam satu baris form.
  • Jangan membuat tombol berbentuk bulat penuh (full-pill) untuk tombol aksi submit formulir.
Form & Input

5. Formulir & Input Data

Setiap elemen input harus memiliki label yang terletak di atas input dengan teks 14px semi-bold. Focus ring menggunakan outline halus biru var(--secondary).

Hint keterangan tambahan di bawah field.
search
lock
errorFormat email kampus tidak valid.
Status Indicators

6. Badges, Tags, & Status Indikator

Gunakan pemetaan status resmi di bawah untuk menjaga konsistensi makna visual bagi pengguna di seluruh halaman:

Status Komponen Badge Arti / Kondisi Penggunaan
Pending Pending Moderasi Ulasan baru diajukan mahasiswa, menunggu verifikasi Admin Jurusan.
Approved / Di-ACC Di-ACC / Dipublikasi Ulasan disetujui admin dan langsung tampil di Pusat Ulasan.
Rejected / Ditolak Ditolak Ulasan ditolak admin karena bahasa kasar / melanggar NDA, butuh revisi.
Dibuka Dibuka Lowongan magang masih aktif menerima lamaran mahasiswa.
Ditutup Ditutup Batas tanggal lowongan telah lewat atau kuota telah terpenuhi.
Kategori / Skill Laravel MySQL Tag keahlian yang dipelajari pada lowongan atau ulasan.
Struktur Komponen

7. Komponen Kartu (Card Patterns)

Gunakan kartu berlatar belakang putih (#FFFFFF) dengan border 1px solid var(--border) (#E2E8F0) dan bayangan sangat halus box-shadow: var(--shadow-sm).

TL
PT Telkom Indonesia
Dibuka

Backend Developer Intern

location_onBandung · Hybrid groupSisa 2 kuota
Deadline 28 Nov 2026
Total Lowongan Aktif
work
124
trending_up+8 lowongan baru bulan ini
Feedback & Notifikasi

8. Alerts & Pesan Notifikasi (Toast)

info
Alert Info: Data lowongan eksklusif (kuota, batas IPK, kontak) hanya dapat diakses mahasiswa terdaftar.
check_circle
Alert Sukses: Formulir ulasan terbuka otomatis karena tanggal selesai magang telah terlewati.
warning
Alert Peringatan: Ulasan Anda masih menunggu validasi admin jurusan sebelum dipublikasikan.
error
Alert Bahaya / Ditolak: Akun ini dinonaktifkan oleh administrator jurusan.
Uji Komponen Notifikasi Toast

Toast muncul di pojok kanan bawah selama 2.6 detik untuk memberi feedback instan aksi pengguna.

Data Density

9. Desain Tabel Zebra & Rating Bintang

Gunakan tabel baris belang (zebra striping pada baris genap #FAFBFD) dengan hover halus untuk memudahkan dosen dan admin membaca data padat:

Mahasiswa NIM Mitra Penempatan Status Aksi
RARizky Aditya
 2341720001 PT Telkom Indonesia Selesai
NANadia Anggraini
 2241720015 Tokopedia Berlangsung
Komponen Rating Bintang Interaktif

Dapat diklik oleh mahasiswa pada formulir pengisian ulasan:

Arsitektur Mockup

10. Peta Seluruh File Mockup SIMAG-JKB

Semua halaman telah dibuat dalam file terpisah yang siap dibuka dan dijadikan referensi langsung:

Modul Halaman File Mockup Target Pengguna Status & Tautan
Landing Page (Home) index.html Publik Buka Halaman →
Katalog Dasar & Filter Publik katalog.html Publik Buka Halaman →
Gerbang Login Terpusat login.html Mahasiswa & Admin Buka Halaman →
Registrasi Akun Baru register.html Mahasiswa Baru Buka Halaman →
Katalog Lengkap & Filter Dinamis mahasiswa/katalog.html Mahasiswa (Login) Buka Halaman →
Detail Lowongan Eksklusif mahasiswa/detail-lowongan.html Mahasiswa (Login) Buka Halaman →
Koleksi Lowongan Favorit mahasiswa/favorit.html Mahasiswa (Login) Buka Halaman →
Pusat Ulasan Internal Tertutup mahasiswa/pusat-ulasan.html Mahasiswa (Login) Buka Halaman →
Formulir Ulasan & Riwayat Status mahasiswa/ulasan-saya.html Mahasiswa (Login) Buka Halaman →
Profil Pengguna & Kredensial mahasiswa/profil.html Mahasiswa (Login) Buka Halaman →
Dashboard Analitik Admin admin/dashboard.html Admin Jurusan Buka Halaman →
Manajemen Katalog CRUD admin/katalog.html Admin Jurusan Buka Halaman →
Manajemen Pengguna & Penempatan admin/pengguna.html Admin Jurusan Buka Halaman →
Moderasi Ulasan (Approve/Reject) admin/moderasi.html Admin Jurusan Buka Halaman →