Design Principles
Pedoman utama untuk setiap keputusan desain. Bila ada konflik antar desain, 8 prinsip ini adalah sumber kebenaran utama. Urutan = prioritas.
North Star
MASA membantu anggota, komunitas, organisasi, dan masyarakat berpartisipasi dalam ekosistem Muhammadiyah secara mudah, transparan, dan terpercaya.
P-01 · Prioritas tertinggi
Trust First
Kepercayaan lebih penting daripada konversi. Setiap layar harus menjawab: siapa penyelenggara? informasi valid? dapat diverifikasi?
✓ Identitas organisasi
✓ Status verifikasi
✓ Sumber informasi
✓ Histori aktivitas
✓ Status verifikasi
✓ Sumber informasi
✓ Histori aktivitas
P-02
Clarity Over Creativity
Kejelasan lebih penting dari kreativitas visual. User tidak perlu berpikir keras untuk menggunakan fitur manapun.
✓ CTA mudah dipahami
✓ Struktur informasi sederhana
✓ Hindari jargon teknis
✓ Max 1 CTA utama per layar
✓ Struktur informasi sederhana
✓ Hindari jargon teknis
✓ Max 1 CTA utama per layar
P-03
One Screen One Goal
Setiap layar hanya punya satu tujuan utama. Login → login. Event Detail → daftar. Donation → donasi.
✓ Satu primary CTA
✓ Tidak ada "pilihan tersembunyi"
✓ Goal jelas dalam 3 detik
✓ Tidak ada "pilihan tersembunyi"
✓ Goal jelas dalam 3 detik
P-04
Transparency by Default
Semua aktivitas penting bisa ditelusuri. Histori donasi, status pendaftaran, status verifikasi, status membership — semua terlihat.
✓ Kuitansi selalu tersedia
✓ Audit trail aktif
✓ Status real-time
✓ Tidak ada "lubang hitam"
✓ Audit trail aktif
✓ Status real-time
✓ Tidak ada "lubang hitam"
P-05
Community Driven
User harus selalu merasa terhubung dengan organisasi dan komunitas. Bukan isolated. Connected.
✓ Ranting saya visible
✓ Social proof halus
✓ Event terdekat
✓ Jumlah jamaah
✓ Social proof halus
✓ Event terdekat
✓ Jumlah jamaah
P-06
Impact Visibility
User harus melihat dampak dari setiap tindakan. Donasi tersalurkan. Relawan aktif. Penerima manfaat nyata.
✓ Post-action impact card
✓ Progress tracker
✓ Foto nyata
✓ Angka konkret
✓ Progress tracker
✓ Foto nyata
✓ Angka konkret
P-07
Accessibility First
Produk bisa digunakan semua user. WCAG AA minimum. Touch target 44px minimum. Dynamic text support.
✓ WCAG AA contrast
✓ Touch target ≥44px
✓ Dynamic text
✓ Screen reader
✓ Touch target ≥44px
✓ Dynamic text
✓ Screen reader
P-08
Progressive Disclosure
Informasi kompleks ditampilkan bertahap. Hindari overload informasi dalam satu layar. Reveal on demand.
✓ Max 3 info items visible
✓ Detail → expand
✓ Advanced settings tersembunyi
✓ Tooltips untuk konteks
✓ Detail → expand
✓ Advanced settings tersembunyi
✓ Tooltips untuk konteks
Color System
Sistem warna MASA menggunakan 5 brand hue + neutral scale. Semua warna punya token CSS variable yang di-map ke Flutter ColorScheme. Contrast rasio minimum WCAG AA (4.5:1) untuk teks kecil.
Brand Colors
Blue · Primary
#EAF3F9 · 50
#CFE3EF · 100
#5FACCE · 300
#1B77A6 · 500
#005E8C · 700
#00344F · 900
Amber · Accent
#FFF8ED · 50
#FFE5CC · 100
#FFCA99 · 200
#F7B273 · 400
#D97224 · 600
#A8541A · 800
Emerald · Trust
#E8F5EE · 50
#D0EBDA · 100
#91C9AA · 200
#2D6A4F · 500
#1B4332 · 700
#0D2218 · 900
Gold · Authority
#FBF4E6 · 50
#F0E4C8 · 100
#C9A05A · 400
#B8924D · 600
#8A6428 · 800
#FBF8F2 · Paper
Ink · Neutrals
#FFFCF5 · BG
#EAE2D0 · Border
#9A9286 · Sub
#3A332B · Body
#14110E · Title
#000000 · Pure
Semantic Colors
Success
50: #F0FDF4
500: #2D6A4F
700: #1B4332
Warning
50: #FFF7EB
500: #D97706
700: #B45B2E
Error
50: #FEF2F2
500: #DC2626
700: #8E2A2A
Info
50: #EAF3F9
500: #1B77A6
700: #005E8C
Penggunaan warna per konteks:
🔵 Blue — aksi utama, navigasi aktif, informasi, trust layer 1
🟠 Amber — Sedekah Subuh FAB, campaign khusus, warm CTA, alert ringan
🟢 Emerald — sukses, habit tracker, trust verified, impact, LazisMu
🟡 Gold — authority badge, "by LabMu", kuitansi, Muhammadiyah brand
⬛ Ink/Paper — teks, background, border — semua surface netral
🔵 Blue — aksi utama, navigasi aktif, informasi, trust layer 1
🟠 Amber — Sedekah Subuh FAB, campaign khusus, warm CTA, alert ringan
🟢 Emerald — sukses, habit tracker, trust verified, impact, LazisMu
🟡 Gold — authority badge, "by LabMu", kuitansi, Muhammadiyah brand
⬛ Ink/Paper — teks, background, border — semua surface netral
Typography Scale
3 keluarga font: Inter untuk UI, Newsreader untuk hero & manifesto, JetBrains Mono untuk code/label/token. Semua ukuran divisibel 4px.
Display L
MASA
52/1.0 · W800
Splash / hero only
Splash / hero only
Display M
Terarah
40/1.05 · W700
Section title
Section title
H1 · Page
Beranda
28/1.15 · W700
H2 · Section
Salat hari ini
22/1.2 · W700
H3 · Card Title
Beasiswa Santri
17/1.3 · W700
Body L
Teks utama untuk konten panjang, artikel, deskripsi program.
16/1.6 · W400
Body M
Teks sekunder untuk metadata, subtitle, instruksi pendek.
14/1.6 · W400
Body S
Caption, timestamp, tagline pendek, footnote.
12/1.5 · W400
Label L
Bayar Iuran Rp 25.000
14/auto · W600
Button, CTA
Button, CTA
Label S
STATUS AKTIF
11/auto · W600
Overline
MASA by LabMu · Ibadah
10/auto · Mono W600
Token / Overline
Token / Overline
Newsreader
"Hidup lebih terarah."
Serif italic
Hero / manifesto
Hero / manifesto
Font hierarchy rule: Inter untuk SEMUA UI. Newsreader HANYA untuk: splash tagline, manifesto, hero section homepage, pull quotes. Jangan mix di komponen yang sama.
Spacing & Radius
Base unit 4px. Semua spacing adalah multipel 4. Radius menggunakan 6 tier dari XS (4px) hingga Full (9999px). Gunakan token, bukan angka hardcode.
Spacing Scale
sp-1 · 4px · gap-xs · padding-xs
sp-2 · 8px · gap-s · icon margin
sp-3 · 12px · gap-m
sp-4 · 16px · padding-card · gap-l
sp-5 · 20px
sp-6 · 24px · section-gap
sp-8 · 32px · section-padding
sp-10 · 40px
sp-12 · 48px · page-padding
sp-16 · 64px · large-section
Border Radius
XS
4px
Input, small chip
4px
Input, small chip
S
8px
Card, button
8px
Card, button
M
12px
Modal, sheet
12px
Modal, sheet
L
16px
Hero, banner
16px
Hero, banner
XL
24px
Bottom sheet
24px
Bottom sheet
Full
9999px
Pill, badge
9999px
Pill, badge
Elevation & Shadow
5 level elevation. Semakin tinggi level = semakin jauh dari permukaan = shadow lebih besar. Gunakan sparingly — hanya saat diperlukan untuk hierarki visual.
EL-0
No shadow
Flat surface
No shadow
Flat surface
EL-1
Subtle
Cards, inputs
Subtle
Cards, inputs
EL-2
Raised
Elevated card
Raised
Elevated card
EL-3
Floating
FAB, tooltip
Floating
FAB, tooltip
EL-4
Overlay
Modal, drawer
Overlay
Modal, drawer
Top App Bar
Header navigasi setiap layar. 4 varian. Selalu ada Back button (kecuali root screen). Title di tengah. Max 2 action di kanan.
Variants
Standard
AppBar (Flutter)
Search App Bar
Large App Bar (homepage)
MASA by LabMu
🔔3
Assalamualaikum 👋
Tabs & Chips
Tab Navigation
Scrollable Tab (di dalam halaman)
Surah
Juz
Bookmark
Chip Selector / Filter
Semua
Pendidikan
Kesehatan
Sosial
Dhuafa
Tag Pills
Ibadah
Sedekah
Terverifikasi
LazisMu
Baru
Bug fix
Button System
6 varian button × 3 ukuran × 5 state. Primary button hanya satu per layar. Danger hanya untuk aksi destruktif. Text button untuk aksi minor.
Variants
Primary
Blue
Amber
Green
Secondary
Ghost
Danger
Text
Sizes
Small · 32px
Medium · 44px
Large · 52px
States (Primary)
Default
Loading
Disabled
Full Width
Aturan Primary Button: Max 1 Primary button per screen. Selalu paling bawah dalam form. Tidak pernah disabled tanpa penjelasan kenapa.
Jangan: Gunakan 2 Primary button dalam satu layar. Jangan pakai warna custom di luar token button yang didefinisikan di atas.
Icon Button & FAB
Icon Button (36px)
←
⚙
🔍
⋯
IconButton (Flutter)
FAB — Sedekah (44px)
❤
FloatingActionButton (Flutter)
Extended FAB
❤ Sedekah hari ini
FloatingActionButton.extended (Flutter)
Quick Action Grid
8-puck grid di homepage. Diurutkan berdasarkan segmen user. Setiap puck: icon (24px) + label (10px). Tap area minimum 56px.
📖Qur'an
🕌Salat
❤️Sedekah
🤲Doa
🧮Zakat
🐄Qurban
🗓️Event
⋯Semua
Text Field
Semua input form menggunakan komponen Text Field ini. 5 state. Helper text selalu menjelaskan error (bukan hanya "input salah"). Minimum height 44px.
Default
Gunakan email aktif untuk verifikasi
Focus (active)
Filled / Has value
Error state
Format email belum lengkap. Contoh: nama@email.com
Success state
✓ Email valid
Disabled
Min height 44pxError jangan hanya warnaLabel selalu terlihatPlaceholder tidak menggantikan label
TextField / TextFormField (Flutter)
Search Field
Search default
Search dengan filter
Suggestion chips
Donasi PendidikanDonasi SantriDonasi Dhuafa
Dropdown & Select
Single Select Dropdown
▾
Currency Input
Rp
Multi Select (Chip)
IbadahPendidikanSosialKesehatanKomunitas
Segmented Control
Surah
Juz
Bookmark
Toggle, Checkbox & Radio
Toggle Switch
🔔 Notif Adzan
💳 Notif Iuran
❤ Sedekah Subuh
Switch (Flutter)
Checkbox
✓
Saya menyetujui syaratUlangi tiap Subuh
Disabled
Checkbox (Flutter)
Radio Button
Bayar penuh
Cicil 3 bulan
Cicil 6 bulan
Radio / RadioListTile (Flutter)
OTP & Currency
6-Digit OTP
Kirim ulang dalam 60 detik
Nominal Amount Selector
Rp 2.000
Rp 5.000
Rp 10.000
Bebas ✎
Toast & Snackbar
Feedback singkat atas aksi user. Toast = notif informatif. Snackbar = konfirmasi aksi dengan optional undo. Durasi default 3 detik. Max 1 di layar pada satu waktu.
Iuran Mei selesai
KTAM aktif sampai Juni 2026
VA gagal dibuat
Nomor rekening belum bisa dibuat. Coba QRIS.
Koneksi lambat
Sedang mencoba sambungan...
Sertifikat tersedia
Unduh sertifikat kurban kamu
Voice rule untuk Toast: Gunakan kalimat aktif, positif, dan konkret. Selalu sebut apa yang berhasil/gagal + langkah selanjutnya. Jangan: "Terjadi kesalahan." — Do: "VA gagal dibuat. Coba QRIS."
Dialog & Bottom Sheet
Confirmation Dialog
Batalkan langganan?
Fitur habit tracker advanced akan nonaktif. Kamu bisa berlangganan kembali kapan saja.
Action Bottom Sheet
Bagikan ke
💬 WhatsApp
📋 Salin tautan
📤 Lainnya...
Alert & Banner
Sukses — Iuran Mei selesai. KTAM aktif sampai Juni.
Peringatan — Iuran Mei belum dibayar. KTAM akan nonaktif 5 Juni.
Error — Sedekah gagal diproses. Saldo tidak cukup. Pilih metode lain.
Informasi — Fitur Zakat Maal tersedia mulai Ramadan 1447 H.
Skeleton Loader
Tampilkan skeleton selama data loading. Tidak pernah show spinner di atas konten yang sudah ada. Skeleton harus mirip layout akhir.
Card Skeleton
List Skeleton
Empty States
7 empty state types. Setiap state punya: icon + title konkret + deskripsi + aksi yang jelas. Tidak ada "Data kosong." tanpa konteks.
Generic
Belum ada apa-apa
Mulai eksplorasi dari beranda.
Search
Tidak ditemukan
Coba kata kunci lain atau hapus filter.
Network Error
Sambungan terganggu
Cek koneksimu, lalu coba lagi.
Donation
Belum ada donasi
Mulai dari yang kecil. Setiap rupiah berarti.
Permission
Izin belum diberikan
Aktifkan notifikasi agar kami bisa mengingatkan waktu salat.
Bookmark
Belum ada yang ditandai
Saat membaca, ketuk ikon bookmark untuk menyimpan.
Global State Matrix
Setiap komponen WAJIB mendukung 6 state ini. Bila salah satu state tidak didesain, komponen tersebut dianggap belum selesai.
| Komponen | Default | Loading | Empty | Error | Success | Disabled |
|---|---|---|---|---|---|---|
| Button | ✅ | ✅ spinner | — | ❌ shake | ✅ check | ✅ 38% opacity |
| Text Field | ✅ | — | ✅ placeholder | ✅ red border + msg | ✅ green + ✓ | ✅ grey bg |
| Card | ✅ | ✅ skeleton | ✅ empty state | ✅ error state | — | ✅ dimmed |
| List | ✅ | ✅ skeleton | ✅ empty msg | ✅ retry btn | — | — |
| Bottom Nav | ✅ | — | — | — | — | — |
| Form Screen | ✅ | ✅ overlay | — | ✅ inline | ✅ success screen | ✅ readonly |
| Image | ✅ | ✅ skeleton | ✅ placeholder icon | ✅ error icon | — | — |
| Trust Components | ✅ | ✅ shimmer | — | ✅ unavailable | ✅ verified | — |
Card Variants
Standard Card
Judul informasi
Konten sekunder atau deskripsi singkat dari item ini.
Elevated Card
Elevated
Dipakai ketika card perlu float di atas background.
Outlined Card
Outlined
Untuk grup atau section yang perlu batas jelas.
Blue Accent
Informasi / Now
Salat Subuh 04:42 · 8 menit lagi
Amber Accent
Sedekah Subuh
Kebiasaan baik di awal hari
Gold Accent
LazisMu resmi
Kuitansi tersedia setelah proses
Avatar & Badge
Avatar Sizes
IQ
IQ
IQ
IQ
IQ
XS · S · M · L · XL
Badge Types
3
12+
Aktif
Menunggu
Nonaktif
Baru
Draft
Avatar + Badge combo
IQ
LA
2Progress & Timeline
Linear Progress
Target donasi65%
Habit konsistensi7/10 hari
Qur'an Al-Baqarah38%
Audit / Status Timeline
Program dibuat
Hewan dibeli
Menunggu Idul Adha
Distribusi + foto
List Items
Simple
Jadwal Salat
→
Avatar List
IQ
Muhammad Iqbal
PCM Caturtunggal
Settings
🔔
Notifikasi
Atur per waktu salat
Action List
🗑️
Hapus akun
Trust Framework
MASA mengukur kepercayaan melalui 5 dimensi. Setiap fitur yang berhubungan dengan transaksi, membership, atau konten resmi HARUS memenuhi checklist dimensi yang relevan.
5 Pertanyaan Trust
Siapa yang bertanggung jawab?
Apakah sudah diverifikasi?
Bisakah ditelusuri?
Apakah transparan?
Apa dampak yang tercipta?
Trust per Fitur
| Fitur | Identity | Verification | Transparency | Accountability | Impact |
|---|---|---|---|---|---|
| Donasi LazisMu | ✅ Logo + nama | ✅ Verification badge | ✅ Breakdown alokasi | ✅ LazisMu resmi | ✅ Foto + laporan |
| Kurban | ✅ Peternak + lokasi | ✅ Muhammadiyah | ✅ Tracking 3 tahap | ✅ Sertifikat digital | ✅ Foto distribusi |
| Zakat | ✅ LazisMu | ✅ Fatwa Tarjih | ✅ Kalkulator publik | ✅ Kuitansi | 🔄 Laporan tahunan |
| Iuran KTAM | ✅ PCM lokal | ✅ KTAM status | ✅ Breakdown 40/35/25 | ✅ Kuitansi | 🔄 Laporan ranting |
| e-KTAM | ✅ Foto + NBM | ✅ QR verifikasi | ✅ Status real-time | ✅ Pusat data PP | — |
| Event | ✅ PCM penyelenggara | ✅ Trust badge | ✅ Jumlah peserta | ✅ PIC ada | ✅ Sertifikat hadir |
Trust Components
Verification Badge
✓ Terverifikasi
⏳ Menunggu verifikasi
✕ Ditolak
⊘ Dinonaktifkan
Aturan placement: Verification badge HARUS tampil di: Organization Card, Event Detail, Donation Campaign, Community Detail, Profile halaman. Tidak boleh tersembunyi atau terlalu kecil.
Transparency Card — Donasi
LazisMu · Beasiswa Santri
Update terakhir: 1 Juni 2026
Terkumpul
Rp 48jt
dari target Rp 75jt
Tersalurkan
Rp 42jt
87.5% alokasi
Sisa
Rp 6jt
dalam rekening
Impact Card
Penerima Manfaat
247
Lokasi
NTT
Tahap
Distribusi
Periode
Q2 2026
Laporan
Tersedia
Institution Identity Card
🕌
Lembaga Amil Zakat LazisMu
✓ TerverifikasiNasional
📍 Jakarta Pusat📞 021-7244000SK: Kemenag 2021
Audit Timeline
Setiap aktivitas penting harus punya jejak digital yang dapat ditelusuri. Digunakan di: Kurban tracking, Donasi status, Iuran riwayat, Event attendance.
Program dibuat oleh LazisMu
Verifikasi organisasi selesai
Dana terkumpul Rp 48 juta
Dana dicairkan untuk pembelian hewan
Program distribusi berjalan
Laporan dipublikasikan
e-KTAM Card
Kartu keanggotaan digital. 3 state: Aktif (blue), Nunggak (amber), QR Mode (full QR). NBM dan QR harus dapat diverifikasi secara online.
Aktif
MASA by LabMu
AKTIF
Muhammad Iqbal
NBM · 12.345.678
Berlaku s/d Juni 2026
Nunggak Iuran (warning)
MASA by LabMu
⚠ NUNGGAK
Muhammad Iqbal
NBM · 12.345.678
Iuran Mei belum dibayar · Bayar →
QR Mode (tap untuk pindai)
QR CODE
Muhammad Iqbal
NBM 12.345.678
NBM 12.345.678
Membership trust rules:
1. NBM harus bisa diverifikasi via URL publik PP Muhammadiyah
2. QR harus menghasilkan halaman validasi resmi (bukan hanya text)
3. Status "Aktif" selalu berdasarkan pembayaran iuran bulan berjalan
1. NBM harus bisa diverifikasi via URL publik PP Muhammadiyah
2. QR harus menghasilkan halaman validasi resmi (bukan hanya text)
3. Status "Aktif" selalu berdasarkan pembayaran iuran bulan berjalan
Donation Card
Standard
📷
✓LazisMu Nasional
Beasiswa santri pondok pesantren
Rp 48 jutaterkumpul
247donatur
Compact (list view)
📷
Bantuan dhuafa bulanan
42% · Rp 25jt / 60jt
Event Card
Standard Event Card
7
JUN
PCM Caturtunggal
Pengajian Akbar Akhir Semester
✓ Muhammadiyah
📍 Masjid Gedhe Kauman, Yogya
Event Ticket
Tiket digital
Pengajian Akbar
Muhammad Iqbal · NBM 12.345.678
📅 7 Jun · 16:00QR CHECK-IN
Organization Card
Organization Card
🏛️
PCM Caturtunggal
✓ Terverifikasi📍 Caturtunggal, Sleman · 1.240 anggota
Community Card
🌱
Komunitas Pemuda Kader
347 anggota · Aktif
Home Components
Pesan Hari Ini — "Pesan Harian"
Pesan Hari Ini
"Sebaik-baik kalian adalah yang belajar Al-Qur'an dan mengajarkannya."
HR. Bukhari · Dikurasi Majelis Tarjih
Hero Banner / Announcement
UX Flow Patterns
14 pola alur standar. Setiap fitur baru harus mengikuti pola yang relevan — bukan membuat flow dari nol.
Auth / Login Flow
Splash
→
Login / OTP
→
Pilih Segmen
→
Homepage
Donation Flow (5 langkah)
Discover
→
Detail program
→
Pilih nominal
→
Konfirmasi
→
Kuitansi + Impact
Membership Pattern
Daftar
→
Verifikasi
→
Review
→
e-KTAM aktif
Event Pattern
Discover
→
Detail event
→
Daftar hadir
→
QR Tiket
→
Sertifikat
Error Pattern (wajib)
Error state
→
Penjelasan user
→
Recovery action
Success Pattern (wajib)
Aksi selesai
→
Konfirmasi
→
Next recommended
Trust Patterns
Trust Anti-Patterns — JANGAN lakukan ini
Hidden Organizer — Program tanpa identitas penyelenggara yang jelas. Tidak ada logo, tidak ada nama organisasi, tidak ada status verifikasi.
Unverified Campaign — Kampanye donasi tanpa verification badge. User tidak tahu siapa yang mengelola dana.
Missing Report — Program selesai tanpa laporan distribusi. Donor tidak pernah tahu dana dipakai untuk apa.
Anonymous Activity — Aktivitas organisasi tanpa PIC atau penanggung jawab yang bisa dihubungi.
Broken Audit Trail — Riwayat aktivitas tidak bisa ditelusuri atau tidak update secara real-time.
Trust Metrics yang dipantau
94%
Org Verification Rate
78%
Report Completion Rate
82%
Volunteer Completion
96%
Membership Verified
Copy & Voice Patterns
Aturan penulisan copy yang disinkronkan dengan Voice & Tone Guide. Setiap komponen punya voice pattern sendiri.
| Komponen | Voice Rule | Contoh ✓ | Jangan ✕ |
|---|---|---|---|
| Primary Button | Verb + object. Konkret. Sertakan angka jika ada. | "Bayar Iuran Rp 25.000" | "Submit" / "OK" |
| Error message | Apa yang salah + apa yang harus dilakukan. Tidak menyalahkan. | "VA gagal dibuat. Coba QRIS." | "Error 500" |
| Empty state | Kondisi + aksi awal yang jelas. | "Belum ada ayat ditandai. Ketuk 🔖 saat membaca." | "Data kosong." |
| Success state | Faktual + konfirmasi + next step. | "Iuran Mei selesai. KTAM aktif s/d Juni." | "Berhasil! 🎉🎉" |
| Push notif title | ≤35 karakter. Informatif, tidak guilt-trip. | "Subuh sebentar lagi" | "⏰ Jangan lupa sholat!" |
| Donation CTA | Framing fleksibilitas, bukan tekanan. Sertakan nominal. | "Sedekah Rp 5.000 hari ini" | "Bantu sesama SEKARANG!" |
| Iuran framing | Partisipasi, bukan tagihan. Tunjukkan untuk apa. | "Partisipasi Mei · untuk dakwah & AUM" | "Iuran JATUH TEMPO!" |
| Streak/habit | Privat default. Tidak shaming kalau putus. | "Konsistensimu hari ke-7 🌱" | "🔥 Streak putus!" |
Component Governance
Setiap komponen baru atau perubahan komponen wajib memiliki dokumentasi struktur berikut sebelum dianggap "selesai".
| Field | Deskripsi | Required? |
|---|---|---|
| Purpose | Tujuan penggunaan komponen. Kenapa komponen ini ada. | ✅ Wajib |
| Anatomy | Elemen-elemen pembentuk komponen beserta nama masing-masing. | ✅ Wajib |
| Variants | Semua variasi yang tersedia (size, color, style). | ✅ Wajib |
| States | Semua state: default, hover, pressed, loading, error, disabled, success. | ✅ Wajib |
| Accessibility | Contrast ratio, touch target, screen reader label, WCAG level. | ✅ Wajib |
| Interaction Rules | Perilaku saat digunakan (tap, swipe, scroll, long press). | ✅ Wajib |
| Design Token Mapping | Mapping ke token CSS/Flutter. Tidak ada hardcode nilai. | ✅ Wajib |
| Copy Rules | Aturan voice dan tone untuk label/teks di komponen ini. | ✅ Wajib (baru) |
| Flutter Widget | Widget Flutter yang digunakan + props yang perlu diset. | ✅ Wajib |
| Responsive Behavior | Perilaku pada berbagai ukuran layar Android/iOS. | ✅ Wajib |
| Trust Dimension | Dimensi trust mana yang dilayani (jika ada). | 🔄 Jika relevan |
MVP Component Priority
Phase 1 — Foundation
✅ Color tokens✅ Typography✅ Spacing/Radius✅ Button (all variants)✅ Text Field✅ Bottom Nav + FAB✅ Top App Bar
Phase 2 — Core Components
✅ Card variants✅ Toast / Snackbar✅ Dialog / Bottom Sheet✅ Avatar + Badge✅ Empty States✅ Skeleton✅ Search Field
Phase 3 — Trust + Business
✅ Verification Badge✅ e-KTAM Card✅ Transparency Card✅ Impact Card✅ Donation Card✅ Event Card✅ Audit Timeline
North Star komponen: Setiap komponen MASA harus mendukung salah satu dari:
(1) Build Trust · (2) Increase Participation · (3) Strengthen Institutional Connection · (4) Communicate Impact · (5) Simplify User Actions.
Jika komponen tidak berkontribusi ke minimal satu goal ini, komponen tersebut tidak perlu ada.
(1) Build Trust · (2) Increase Participation · (3) Strengthen Institutional Connection · (4) Communicate Impact · (5) Simplify User Actions.
Jika komponen tidak berkontribusi ke minimal satu goal ini, komponen tersebut tidak perlu ada.
North Star & Anti-Patterns
North Star — MASA Design System
Jika MASA dapat secara konsisten menjawab 5 pertanyaan trust, kepercayaan menjadi fitur produk — bukan klaim marketing.
Build Trust
Increase Participation
Strengthen Institutional Connection
Communicate Impact
Simplify User Actions
Flutter Dev Spec
Referensi widget Flutter untuk setiap komponen. Gunakan token CSS sebagai referensi nilai di ThemeData.
| Komponen | Flutter Widget | Key Props |
|---|---|---|
| Primary Button | ElevatedButton / FilledButton | style: ButtonStyle, minimumSize: 44px height |
| Ghost Button | OutlinedButton | side: BorderSide, borderRadius |
| Text Button | TextButton | padding: EdgeInsets.zero untuk link style |
| Text Field | TextField / TextFormField | decoration: InputDecoration, validator, minHeight: 44 |
| Search | SearchBar / SearchAnchor (Flutter 3.10+) | hintText, leading: Icon(Icons.search) |
| Bottom Nav | NavigationBar (Material 3) | destinations: [], selectedIndex |
| FAB | FloatingActionButton | backgroundColor: amber600, shape: CircleBorder |
| Top App Bar | AppBar / SliverAppBar | centerTitle: true, leading: BackButton, actions: |
| Card | Card / InkWell + Container | elevation: 1/2/4, shape: RoundedRectangleBorder |
| Avatar | CircleAvatar | radius: 12/16/20/26/32, backgroundColor |
| Badge | Badge (Flutter 3.7+) | label: Text, backgroundColor |
| Toggle | Switch | value, onChanged, activeColor: blue500 |
| Checkbox | Checkbox / CheckboxListTile | value, onChanged, activeColor |
| Radio | Radio / RadioListTile | value, groupValue, onChanged |
| Dialog | AlertDialog / showDialog() | title, content, actions |
| Bottom Sheet | showModalBottomSheet() | shape: RoundedRectangleBorder(radius 24), isScrollControlled |
| Toast / Snackbar | ScaffoldMessenger.showSnackBar() | SnackBar(content, backgroundColor, behavior: floating) |
| Skeleton | Shimmer package / AnimatedContainer | shimmer gradient, duration: 1.5s |
| Progress | LinearProgressIndicator / CircularProgressIndicator | value: 0.0-1.0, color, backgroundColor |
| Chip | FilterChip / ChoiceChip | label, selected, onSelected |
| Tab Bar | TabBar + TabBarView | isScrollable, labelColor, indicatorColor |
ThemeData Token Mapping
// lib/theme/masa_theme.dart
ThemeData masaTheme = ThemeData(
colorScheme: ColorScheme(
primary: Color(0xFF1B77A6), // --blue-500
secondary: Color(0xFFD97224), // --amber-600
tertiary: Color(0xFF2D6A4F), // --green-500
surface: Color(0xFFFBF8F2), // --paper-1
error: Color(0xFF8E2A2A), // --err-700
onPrimary: Colors.white,
onSurface: Color(0xFF14110E), // --ink-0
),
fontFamily: 'Inter',
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
minimumSize: MaterialStatePropertyAll(Size(0, 44)),
shape: MaterialStatePropertyAll(StadiumBorder()),
textStyle: MaterialStatePropertyAll(
TextStyle(fontWeight: FontWeight.w600, fontSize: 14),
),
),
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
contentPadding: EdgeInsets.symmetric(horizontal: 14, vertical: 10),
),
);