BAB 60. DESIGN TOKENS & WIREFRAME DESCRIPTION
Design Tokens
Design tokens adalah konstanta desain yang digunakan secara konsisten di seluruh aplikasi Flutter dan admin panel.
Color Palette
| Token | Nilai | Penggunaan |
|---|---|---|
primary | #2563EB | CTA utama, button, link aktif |
primaryDark | #1D4ED8 | Hover, pressed state |
secondary | #10B981 | Success, badge tutor aktif |
background | #F8FAFC | Background halaman |
surface | #FFFFFF | Card, dialog, bottom sheet |
error | #DC2626 | Error message, validasi gagal |
warning | #F59E0B | Peringatan, perlu perhatian |
success | #16A34A | Konfirmasi berhasil |
onPrimary | #FFFFFF | Teks di atas primary |
textPrimary | #1F2937 | Teks utama |
textSecondary | #6B7280 | Teks sekunder, hint |
Typography
| Style | Font | Ukuran | Weight | Penggunaan |
|---|---|---|---|---|
display | Poppins | 32 sp | Bold | Hero text |
headline | Poppins | 24 sp | SemiBold | Judul halaman |
title | Poppins | 20 sp | Medium | Judul section |
body | Poppins | 16 sp | Regular | Konten utama |
label | Poppins | 14 sp | Medium | Label form, chip |
caption | Poppins | 12 sp | Regular | Keterangan, timestamp |
Spacing (4px Grid System)
| Token | Nilai | Penggunaan |
|---|---|---|
xs | 4dp | Spasi antar elemen kecil |
sm | 8dp | Padding dalam chip, badge |
md | 16dp | Padding card, section |
lg | 24dp | Spasi antar section |
xl | 32dp | Padding halaman |
xxl | 48dp | Spasi antar konten besar |
Border Radius
| Token | Nilai | Penggunaan |
|---|---|---|
small | 8dp | Input field, chip kecil |
medium | 12dp | Button sekunder |
large | 16dp | Card, dialog |
xl | 24dp | Bottom sheet |
pill | 999dp | Chip status, badge |
Elevation
| Level | Nilai | Komponen |
|---|---|---|
| 0 | Flat (0dp) | Background, divider |
| 1 | 1dp | Card, list item |
| 2 | 3dp | Button hover |
| 3 | 6dp | Dialog, popup |
| 4 | 8dp | Bottom sheet, FAB |
Wireframe Description
1. Login Screen
┌────────────────────────┐
│ │
│ [Logo TB] │
│ TemuBelajar │
│ Bangun Koneksi... │
│ │
│ ┌──────────────────┐ │
│ │ Username (NISN) │ │
│ └──────────────────┘ │
│ ┌──────────────────┐ │
│ │ Password 👁 │ │
│ └──────────────────┘ │
│ │
│ [ Masuk ] │
│ │
└────────────────────────┘
2. Dashboard Siswa
┌────────────────────────┐
│ 👋 Halo, Andi! │
│ XII IPA 1 | Level 7 │
│ ░░░░░░░░░ 1250 XP │
├────────────────────────┤
│ ⚡ Aksi Cepat │
│ [+ Request] [📋 Lihat] │
├────────────────────────┤
│ 📅 Jadwal Hari Ini │
│ ┌──────────────────┐ │
│ │ Matematika 14:00 │ │
│ └──────────────────┘ │
├────────────────────────┤
│ 🏆 Leaderboard │
│ #1 Budi — 98.5 SIS │
│ #2 Andi — 87.2 SIS │
└────────────────────────┘
3. Form Request Bantuan
┌────────────────────────┐
│ ← Buat Request │
├────────────────────────┤
│ Mata Pelajaran │
│ [Matematika ▼] │
│ │
│ Materi │
│ [Integral Lipat ▼] │
│ │
│ Jelaskan Masalah │
│ ┌──────────────────┐ │
│ │ │ │
│ └──────────────────┘ │
│ │
│ Lokasi Pertemuan │
│ [Perpustakaan Lt 2] │
│ │
│ Jadwal │
│ [Rab, 10 Agt 14:00] │
│ │
│ Durasi: 60 menit │
│ │
│ [ Kirim Request ] │
└────────────────────────┘
4. Meeting Screen
┌────────────────────────┐
│ ← Sesi: Matematika │
│ Tutor: Ahmad Fauzi │
├────────────────────────┤
│ │
│ ⏱️ 00:45:12 │
│ Sesi sedang berjalan │
│ │
├────────────────────────┤
│ 📍 Perpustakaan Lt.2 │
│ ✅ Check-In: 14:02 │
├────────────────────────┤
│ [📷 Upload Foto] │
│ [💬 Buka Chat] │
│ │
│ [ 🔚 Check-Out ] │
└────────────────────────┘
5. Profile Screen
┌────────────────────────┐
│ [Foto Profil] │
│ Andi Prasetyo │
│ XII IPA 1 │
│ │
│ ⭐ Level 7 │
│ ░░░░░░░░░ 1250 XP │
│ 🌟 SIS: 87.2 │
│ ⭐ Rating: 4.8 │
├────────────────────────┤
│ 🏅 Badge │
│ [🥇][📚][💡][🏃][⭐] │
├────────────────────────┤
│ 📊 Statistik │
│ 24 sesi sebagai tutor │
│ 18 sesi sebagai learner│
└────────────────────────┘
:::tip Catatan Implementasi
Design tokens diimplementasikan sebagai konstanta Dart di app/theme/app_colors.dart, app_spacing.dart, dan app_typography.dart untuk menjamin konsistensi visual di seluruh aplikasi.
:::