MASA — UI Component Reference

Button Component

Aksi utama user. Selalu gunakan button untuk tindakan yang mengubah state atau navigasi. Maksimum 1 Primary button per layar.

Component · Actions

Button

8 variant × 3 ukuran × 5 state. Hierarchy: Primary → Secondary → Ghost → Text. Hanya satu Primary per layar.

Min height 44px (touch target)

Radius --r-full (9999px)

Flutter ElevatedButton / OutlinedButton / TextButton

Anatomy — Primary Button

① container

② leading icon

③ label

1

Container --ink-0 bg · --r-full · min-h 44px

2

Leading icon (optional) 16–18px · gap sp-2

3

Label Inter 14px W600 · color #fff

All Variants

Primary Default

Blue Default

Amber Default

Green Default

Secondary

Ghost

Danger

Text

Sizes

Small · 32px

Medium · 44px

Large · 52px

Full Width

States (Primary)

Default idle

Loading loading

Disabled disabled

Spacing Annotation — Medium Button

10px top

24px

h: min 44px

Token: padding: 10px 24px · min-height: 44px · border-radius: --r-full · font: Inter 14px W600

In-Context Examples

Gunakan ini — bottom of form

Bayar Iuran

Metode bayar

Jangan ini — 2 primary buttons

Konfirmasi

✕ Dua primary button membingungkan user

Usage Rules

✓ Do

Maks 1 Primary button per screen
Label selalu Verb + Object: "Bayar Iuran Rp 25.000"
Primary selalu paling bawah di form
Gunakan Full Width untuk form/payment screen
Loading state saat proses — jangan disable saja

✕ Don't

2 Primary dalam satu screen
Label vague: "OK", "Submit", "Klik"
Disabled tanpa penjelasan kenapa
Warna custom di luar 8 variant yang didefinisikan
Primary button di tengah konten (hanya di bottom)

FAB & Icon Button

FAB Sedekah amber selalu hadir di semua halaman utama. Icon button 36px untuk aksi sekunder di AppBar. Tidak boleh diganti fungsinya.

Component · Actions

FAB + Icon Button

FAB (56px visual, 64px touch) selalu amber untuk Sedekah. Icon button (36px visual, 44×44px touch area) untuk back/settings/share di AppBar.

FAB size 56px visual · 64px touch

Icon btn 36px visual · 44px touch

Flutter FloatingActionButton · IconButton

All Variants

FAB Sedekah

❤

Extended FAB

❤ Sedekah hari ini

Icon Button (Back)

←

Icon Button (Action)

⚙

Usage Rules

✓ Do

FAB selalu amber — tidak pernah diganti warna
FAB selalu untuk aksi Sedekah — tidak boleh ganti fungsi
Extended FAB untuk konteks onboarding awal
Touch area icon button minimal 44×44px

✕ Don't

Mengubah warna FAB
Menggunakan FAB untuk aksi selain Sedekah
Icon button tanpa 44px touch target (GestureDetector)
Lebih dari satu FAB di satu halaman

Slide to Confirm

Konfirmasi aksi financial atau penting yang tidak bisa di-undo. Mencegah accidental tap. Dipakai di: Sedekah Subuh, Kurban pembayaran, Iuran.

Component · Actions

Slide to Confirm

Height 52px

Handle 44px amber circle

Flutter Custom GestureDetector + AnimatedPositioned

States

Idle

→

⟶ Geser untuk sedekah

Dragging (50%)

→

⟶ Geser untuk sedekah

Confirmed

✓

Sedekah dikonfirmasi

Usage Rules

✓ Do

Gunakan untuk aksi financial yang tidak bisa di-undo
Haptic feedback saat confirmed
Kembali ke idle jika user lepas sebelum 80% slider

✕ Don't

Gunakan untuk aksi non-finansial biasa
Tanpa haptic feedback
Konfirm di bawah 50% drag

Top App Bar

Header setiap layar. 3 varian: Standard (navigasi), Search (dengan input), Large (homepage). Selalu ada Back button kecuali root screen.

Component · Navigation

Top App Bar

Height 56px (standard)

Flutter AppBar · SliverAppBar

Back btn 36px · 44px touch

Anatomy — Standard

① back btn

② title (center)

③ actions (max 2)

Variants

Standard

Search

Large (Homepage)

MASA by LabMu

🔔

Assalamualaikum 👋

Usage Rules

✓ Do

Title selalu center
Back button di kiri SEMUA layar non-root
Max 2 icon action di kanan
surfaceTintColor: transparent di Flutter

✕ Don't

Title terlalu panjang (max 20 char)
Lebih dari 2 action di kanan
Hilangkan back button kecuali root screen
Warna AppBar berbeda dari --paper-0

Bottom Navigation

4 tab utama + FAB center. Selalu hadir di semua root screen. Tab: Beranda · Ibadah · [FAB❤] · Konten · Saya.

Component · Navigation

Bottom Navigation

Flutter NavigationBar (Material 3)

Tab height 64px (+ 20px safe area)

FAB 44px · amber-600

Anatomy

Beranda

Ibadah

❤

Konten

Saya

1

Active tab --ink-0 icon · label 9.5px W500

2

Inactive tab --ink-4 icon · label 9.5px W500

3

FAB center 44px · --amber-600 · margin-top: -18px

Usage Rules

✓ Do

Selalu hadir di semua root screen
FAB selalu posisi center, selalu amber
Active state: icon + label --ink-0
Safe area padding di bawah (iOS)

✕ Don't

Lebih dari 5 item (sudah fixed 4 + FAB)
Ubah urutan tab
Ubah warna FAB
Sembunyikan saat scroll (always visible)

Chip · Tab & Filter

Component · Navigation

Chip / Tab / Filter

Height 32px (chip) · 44px (tab)

Flutter FilterChip · ChoiceChip · TabBar

All Variants

Filter Chip (multiple select)

SemuaPendidikanKesehatanSosial

Tab Bar (single select)

Surah

Juz

Bookmark

Segmented Control

Surah

Juz

Bookmark

Text Field

Semua input form. 6 state wajib. Error message harus human-readable, bukan kode error.

Component · Inputs

Text Field

Min height 44px

Radius --r-s (8px)

Flutter TextFormField

Anatomy

Email

✓ Email valid

padding: 10px 14px

Label: 11.5px W600

All States

Default

Hint: gunakan email aktif

Focus

Error

Format email belum lengkap. Contoh: nama@email.com

Success

✓ Email valid

Filled

Disabled

Usage Rules

✓ Do

Label selalu terlihat (tidak menghilang saat ada value)
Error state: teks + border merah (tidak hanya warna)
Helper text menjelaskan format yang benar
Min height 44px untuk touch target

✕ Don't

Placeholder menggantikan label
Error hanya border merah tanpa pesan
"Input tidak valid" tanpa konteks
Label menghilang saat diisi

Toggle · Checkbox & Radio

Component · Inputs

Selection Controls

Toggle 44×24px · Flutter: Switch

Checkbox 18×18px · Flutter: Checkbox

Radio 18×18px · Flutter: RadioListTile

All Variants

Toggle ON (blue)

🔔 Notif Adzan

Toggle OFF

💳 Notif Iuran

Toggle ON (amber — Sedekah)

❤ Sedekah Subuh

Checkbox ON

✓

Saya setuju

Checkbox OFF

Ulangi tiap Subuh

Radio selected

Bayar penuh

Toast & Snackbar

Feedback singkat 3 detik. Floating style. Maks 1 sekaligus. Selalu ada pesan + next step.

Component · Feedback

Toast / Snackbar

Duration 3 detik default · 5 detik untuk error

Flutter ScaffoldMessenger.showSnackBar()

4 Semantic Variants

✅

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

Copy Rules per Toast

✓ Do

Title: apa yang berhasil/gagal (konkret)
Desc: langkah selanjutnya atau konteks tambahan
Success: faktual — "Iuran Mei selesai. KTAM aktif s/d Juni."
Error: apa + solusi — "VA gagal. Coba QRIS."

✕ Don't

"Berhasil!" tanpa konteks
"Error 500" atau kode teknis
"Terjadi kesalahan" tanpa solusi
Emoji berlebihan 🎉🎉

Empty State

Selalu tampilkan ketika list/data kosong. Bukan blank. Selalu ada icon + title + desc + CTA.

Component · Feedback

Empty State

Flutter Custom widget (Column)

Icon size 48px · 50% opacity

6 Types

📭

Belum ada apa-apa

Mulai eksplorasi dari beranda.

🔍

Tidak ditemukan

Coba kata kunci lain.

📡

Koneksi terganggu

Cek koneksimu, lalu coba lagi.

❤️

Belum ada donasi

Mulai dari yang kecil.

🔔

Izin belum diberikan

Aktifkan notifikasi untuk pengingat salat.

🔖

Belum ada bookmark

Ketuk 🔖 saat membaca untuk menyimpan.

Skeleton Loader

Tampilkan saat data loading. Bentuknya harus mirip layout akhir. Animasi shimmer 1.5 detik.

Component · Feedback

Skeleton Loader

Duration 1.5s shimmer

Flutter shimmer package · AnimatedContainer

Card Skeleton

Card Variants

6 variant card untuk konteks berbeda. Standard untuk konten biasa, Accent untuk highlighted info, Elevated untuk konten yang perlu menonjol.

Component · Data Display

Card

Radius --r-m (12px)

Padding 16px (sp-4)

Flutter Card · Container + BoxDecoration

All 6 Variants

Standard

Judul konten

Deskripsi singkat item ini.

Elevated (EL-2)

Elevated card

Float di atas background.

Outlined

Outlined card

Batas jelas, no fill.

Blue Accent — NOW/Info

Subuh 04:42

8 menit lagi · Yogyakarta

Amber Accent — Sedekah

Sedekah Subuh

Kebiasaan baik pagi hari

Gold Accent — Trust/LazisMu

LazisMu resmi

Kuitansi tersedia

When to Use Each Variant

Variant	Gunakan untuk	Contoh screen
Standard	Konten biasa, list item, setting row	List berita, setting Notif
Elevated	Featured card, hero card	Homepage hero, donation featured
Blue Accent	Info aktif, NOW zone, current state	Waktu salat berikutnya
Amber Accent	Habit/Sedekah, warm CTA, alert ringan	Bridge B, Sedekah reminder
Gold Accent	Authority, trust badge, kuitansi	LazisMu badge, Pesan Hari Ini

Avatar & Badge

Component · Data Display

Avatar + Badge

Sizes XS 24 · S 32 · M 40 · L 52

Flutter CircleAvatar · Badge (Flutter 3.7+)

All Variants

Sizes

IQ

Status Badge

Aktif Menunggu Nonaktif Baru Draft

Avatar + Notification Badge

IQ

3

LA

Progress & Timeline

Component · Data Display

Progress + Audit Timeline

Height 4–6px

Flutter LinearProgressIndicator · Custom timeline

Progress Bars

Target donasi65%

Habit konsistensi7/10 hari

Qur'an Al-Baqarah38%

Audit Timeline

Program dibuat

LazisMu · 1 Jun 2026

Dana terkumpul

Rp 48 juta · 247 donatur

Penyaluran

Dijadwalkan Idul Adha

Laporan

Menunggu

Verification Badge

Trust component paling penting. WAJIB tampil di semua donation campaign, event, dan organization card.

Trust System · MASA-specific

Verification Badge

Flutter Custom widget · Row(icon + text)

Placement Di bawah nama organisasi, di atas judul campaign

Anatomy

✓ Terverifikasi

icon 12px

label Inter 11px W600

4 Status States

Verified verified

✓ Terverifikasi

Pending pending

⏳ Menunggu verifikasi

Rejected rejected

✕ Ditolak

Suspended suspended

⊘ Dinonaktifkan

In-Context — Donation Card

Dengan verification badge

✓LazisMu Nasional

Beasiswa santri pondok

Tanpa badge — trust hilang

LazisMu Nasional

Beasiswa santri pondok

✕ Tidak ada bukti kredibilitas

e-KTAM Card

Kartu kader digital 3 state. State ditentukan oleh status iuran dan verifikasi NBM. Aktif hanya jika iuran bulan berjalan lunas.

Trust System · MASA-specific

e-KTAM Card

Flutter Custom widget · gradient Container

Size max-width 320px · aspect ratio ~1.6:1

3 States

Aktif iuran lunas

MASA by LabMu

AKTIF

Muhammad Iqbal

NBM · 12.345.678

s/d Juni 2026

Nunggak iuran telat

MASA by LabMu

⚠ NUNGGAK

Muhammad Iqbal

NBM · 12.345.678

Iuran Mei belum dibayar → bayar sekarang

QR Mode tap untuk scan

QR CODE

Muhammad Iqbal · NBM 12.345.678

Anatomy

1

Header: logo "by LabMu" + status pill

2

Name: Inter 17px W700 · white

3

NBM: JetBrains Mono 11px · 70% opacity

4

Footer: branch name + QR button

5

Background: gradient --blue-900 → --blue-700 (aktif) · amber (nunggak)

Donation Card

Card campaign donasi. Selalu tampilkan: foto nyata, nama organisasi + verification badge, progress bar, jumlah donatur.

Trust System · MASA-specific

Donation Card

Flutter Custom widget · ClipRRect + Column

Image CachedNetworkImage · 100px height

Full + Compact

Full (grid/featured)

📷 foto program

✓LazisMu Nasional

Beasiswa santri pondok pesantren

Rp 48 jutaterkumpul

247donatur

Compact (list view)

📷

Bantuan dhuafa bulanan

42% · Rp 25jt / 60jt

Pesan Hari Ini

Card khusus homepage. Selalu di zone paling atas. Konten dari API /home/daily-message. Font Newsreader Italic untuk kutipan.

Pattern · Homepage

Pesan Hari Ini

Flutter Custom widget · Newsreader italic text

API GET /home/daily-message

Component

Pesan Hari Ini

"Sebaik-baik kalian adalah yang belajar Al-Qur'an dan mengajarkannya."

HR. Bukhari · Dikurasi Majelis Tarjih

Token spec

1

Background: --gold-50 → --amber-50 gradient · border --gold-100

2

Overline: Mono 9px W600 · --gold-600 · UPPERCASE LS 7%

3

Quote text: Newsreader Italic 15px · --ink-0 · LH 1.5

4

Source: Inter 10px · --ink-4

Impact Card

Ditampilkan post-donation. Menunjukkan dampak nyata. Foto + angka + lokasi. Anti "lubang hitam donasi".

Trust System · Post-action

Impact Card

Timing Muncul setelah donation_completed

Flutter Custom widget · green gradient header

Component

Penerima Manfaat

247

Lokasi

NTT

Periode

Q2 2026

Laporan

Tersedia →

Status

Distribusi

Audit Timeline

Jejak digital setiap aktivitas penting. Wajib di: Kurban tracking, Donasi status, Iuran riwayat.

Trust System · Transparency

Audit Timeline

Flutter Custom widget · Stack dengan ConnectedWidget

States Done (green) · Pending (amber) · Future (neutral)

Component

Program dibuat oleh LazisMu

Admin LazisMu · 1 Jun 2026 · 09:00 WIB

Hewan dibeli dari peternak

Peternak NTT · 5 Jun 2026

Menunggu Idul Adha

Dijadwalkan: 8 Jun 2026

Laporan distribusi

Menunggu

State mapping

✓

Done --green-500 dot · ink-0 text · mono date

…

Pending --amber-400 dot · ink-3 text

○

Future --line dot · ink-5 text

Search Field

Input pencarian dengan icon kiri. Bisa standalone atau dengan filter button. Border invisible saat idle — muncul saat focus.

Component · Inputs

Search Field

Height 44px

Radius --r-full (pill shape)

Flutter SearchBar (Material 3, Flutter 3.10+)

Anatomy

🔍 Cari program donasi...

① search icon 15px

② placeholder text

1

Search icon 15px · --ink-4 · left-16px

2

Placeholder Inter 13px · --ink-4

3

Container --paper-2 bg · --r-full · h 44px · padding 8px 16px

Variants & States

Idle default

🔍Cari surah atau ayat...

Focus focus

🔍Al-Baqarah

With filter button

🔍Cari event...

With suggestion chips

🔍donasi

Donasi Pendidikan Donasi Santri Donasi Dhuafa

Sizing

Ukuran	Nilai	Token
Height	44px	touch target
Padding	8px 16px	--sp-2 --sp-4
Icon size	15px	fixed
Border radius	9999px	--r-full

Dropdown & Select

Single select, multi select (chips), dan segmented control. Pilih tipe sesuai jumlah opsi: ≤4 = chips, >4 = dropdown.

Component · Inputs

Dropdown & Select

Flutter DropdownButtonFormField · PopupMenuButton · ChoiceChip

All Variants

Single select dropdown

Pilih ranting

▾

Currency / amount input

Nominal sedekah

Rp

Multi select chips (≤5 opsi)

Kategori minat

Ibadah Pendidikan Sosial Kesehatan

Segmented control (2–4 opsi)

Bayar penuh

Cicil 3x

Cicil 6x

Sizing & Anatomy

1

Dropdown height 44px min · same as Text Field

2

Chevron icon right: 12px · --ink-4

3

Currency prefix left: 12px · Inter 13px W600

4

Chip padding 5px 12px · --r-full

5

Segmented control 3px padding outer · 6px radius inner

When to use each

Type	Gunakan	Contoh MASA
Dropdown	Banyak opsi (>5), string panjang	Pilih ranting, Pilih program
Chips	2–5 opsi singkat, bisa multi-select	Kategori donasi, Minat
Segmented	2–4 opsi eksklusif, labels pendek	Bayar penuh/Cicil, Surah/Juz
Currency input	Input angka finansial dengan prefix	Nominal sedekah, Zakat

OTP & Amount Picker

OTP 6-digit untuk verifikasi auth. Amount picker preset untuk nominal cepat tanpa mengetik.

Component · Inputs

OTP + Amount Picker

OTP 6 digit · auto-advance · haptic per char

Flutter pinput package v5 · custom Row untuk amount

OTP Input — 3 States

Idle (empty)

—

Filling (2 of 6) focus

4

2

|

Error invalid

9

Kode tidak valid. Kode sudah kadaluarsa. Kirim ulang →

Amount Picker

Preset amounts + custom

Rp 2.000

Rp 5.000 ✓

Rp 10.000

Bebas ✎

Sizing

1

OTP cell size 44×52px · --r-s · border 1.5–2px

2

OTP font JetBrains Mono 22px W700

3

Gap between cells 8px (--sp-2)

4

Amount chip padding 10px 18px · --r-s · min-w 80px

5

Amount chip selected --amber-600 border 2px · --amber-50 bg

Dialog Component

Modal confirmation. Dipakai untuk aksi yang perlu konfirmasi eksplisit. Backdrop blur, max-width 320px, radius --r-l.

Component · Feedback

Dialog

Max width 320px

Radius --r-l (16px)

Flutter AlertDialog · showDialog()

Anatomy

Batalkan sedekah?

Sedekah ini belum diproses. Kamu bisa sedekah lagi kapan saja.

① title

② actions (right-aligned)

1

Title Inter 16px W700 · --ink-0

2

Body Inter 13px · --ink-2 · LH 1.5 · mb 18px

3

Actions right-aligned · gap 8px · secondary + primary/danger

4

Container --n-0 bg · --r-l · padding 24px · EL-4 shadow · max-w 320px

Dialog Types

Confirmation (default)

Lanjutkan pembayaran?

Rp 25.000 akan diproses via QRIS.

Destructive

Hapus akun?

Semua data akan dihapus permanen. Tidak bisa dipulihkan.

Sizing

1

Width max-width 320px · min-width 240px

2

Padding 24px all sides (--sp-6)

3

Title → Body gap 8px (--sp-2)

4

Body → Actions gap 18px

5

Action buttons gap 8px (--sp-2)

Usage Rules

✓ Do

Backdrop: 40% opacity --ink-0 overlay
Max 2 action buttons (secondary + primary/danger)
Dismiss on backdrop tap (kecuali aksi destruktif)
Focus di primary action saat muncul

✕ Don't

Lebih dari 2 action
Dialog untuk info yang tidak butuh konfirmasi → gunakan Toast
Body text >3 baris → gunakan Bottom Sheet
Scrollable content di dialog

Bottom Sheet

Panel yang muncul dari bawah. Dipakai untuk: action list, detail panjang, form sekunder. Ada handle drag di atas.

Component · Feedback

Bottom Sheet

Top radius --r-xl (24px)

Handle 36×4px · --paper-4

Flutter showModalBottomSheet() · isScrollControlled: true

Anatomy

Bagikan ke

💬 WhatsApp

📋 Salin tautan

📤 Lainnya...

1

Handle 36×4px · --paper-4 · --r-full · mb 16px · centered

2

Title Inter 15px W700 · mb 12px

3

Action items padding 11px 0 · border-bottom · icon 18px · gap 10px

4

Container --r-xl top corners · padding 20px · EL-4

3 Types

Action Sheet (share)

Bagikan kuitansi

💬

📋

Salin

📤

Lainnya

Form Sheet (payment method)

Pilih metode bayar

QR

QRIS ✓

VA

Virtual Account

Sizing

1

Top radius 24px (--r-xl) · bottom = 0

2

Handle width 36px · height 4px · center · mb 16px

3

Inner padding 20px all (--sp-5)

4

Action icon size 44×44px touch · 18–24px icon visual

5

Max height 90vh · isScrollControlled: true

Alert & Banner

Inline feedback — bukan floating. Tampil di dalam konten halaman untuk info, warning, error, atau success yang perlu terlihat persisten.

Component · Feedback

Alert Banner

Flutter Container + Row (custom) · MaterialBanner

Left border 3px · semantic color

4 Semantic Variants

✅

Iuran Mei selesai

KTAM aktif sampai Juni 2026.

⚠️

Iuran Mei belum dibayar

KTAM akan nonaktif 5 Juni.

❌

VA gagal dibuat

Coba QRIS sebagai alternatif bayar.

ℹ️

Sedekah Subuh tersedia

Aktifkan kebiasaan harian dari Beranda.

Sizing

1

Left border 3px solid · semantic color

2

Padding 12px 16px (--sp-3 --sp-4)

3

Icon 15px · flex-shrink 0 · gap 10px

4

Radius --r-s (8px)

5

Title Inter 12.5px W600 · mb 2px

Alert vs Toast — kapan pakai yang mana

Situasi	Gunakan	Alasan
Aksi selesai (bayar, simpan)	Toast	Ephemeral, tidak perlu persisten
Status yang perlu perhatian terus	Alert Banner	Iuran nunggak, koneksi offline
Konfirmasi butuh keputusan	Dialog	Hapus, batalkan, izin
Aksi banyak pilihan	Bottom Sheet	Share, metode bayar, filter

List Item

Row dalam list. 4 tipe: Simple, Avatar, Settings, Danger. Touch target minimal 44px.

Component · Data Display

List Item

Min height 48px (lebih lega dari touch target 44px)

Flutter ListTile · SwitchListTile · CheckboxListTile

Anatomy — Standard List Item

IQ

Muhammad Iqbal

PCM Caturtunggal

Aktif

① leading (avatar/icon)

③ trailing

4 Types

📖

Jadwal Salat

→

IQ

Muhammad Iqbal

PCM Caturtunggal

Aktif

🔔

Notifikasi

Atur per waktu salat

🗑️

Hapus akun

Sizing

1

Min height 48px (touch 44px minimum)

2

Horizontal padding 16px (--sp-4)

3

Leading (avatar) 36–40px · gap 12px

4

Title Inter 13px W500–W600

5

Subtitle Inter 11px · --ink-4

6

Trailing arrow 13px / badge / toggle

Quick Action Grid

8-puck grid 4×2 di homepage. Akses cepat ke semua layanan utama. Urutan berbeda per segmen user.

Component · Data Display

Quick Action Grid

Grid 4 kolom × 2 baris

Puck size aspect-ratio 1:1 · min 64px

Flutter GridView.count crossAxisCount:4

Anatomy per Puck

📖 Qur'an

① icon 22px

② label 9.5px

Grid 4×2 — Varian per segmen

Muslim Umum

📖Qur'an

🕌Salat

❤️Sedekah

🤲Doa

🧮Zakat

🐄Qurban

🗓️Event

⋯Semua

Kader

🪪KTAM

💳Iuran ⚠

📖Qur'an

🕌Salat

🏘️Ranting

🗓️Event

❤️Sedekah

⋯Semua

Sizing

1

Grid 4 kolom · gap 6–8px

2

Puck aspect-ratio 1:1 · min 64px · --r-s border · --n-0 bg

3

Icon 18–22px · centered

4

Label Inter 8.5–9.5px W500 · --ink-3 · max 1 line · ellipsis

5

Touch target full puck area · InkWell splash

Event Card

Card event dengan date pill di kiri. Selalu tampilkan: tanggal, penyelenggara dengan verification badge, lokasi.

Component · Trust System

Event Card

Flutter Custom widget · Row(date + content)

Date pill 52px wide · blue-700 bg

Anatomy

7

JUN

PCM Caturtunggal

Pengajian Akbar Akhir Semester

✓ Terverifikasi

📍 Masjid Gedhe Kauman, Yogya

① date pill

② content

Variants

List view (default)

7

JUN

PCM Caturtunggal

Pengajian Akbar

📍 Masjid Gedhe

Upcoming (highlighted)

14

JUN

Ranting Saya · 3 hari lagi

Workshop Kader

📍 Kampus UMY · 09:00

Sizing

1

Date pill width 52px fixed · full height

2

Day number Inter 20–22px W800 · white

3

Month Inter 8–9px W600 · uppercase · 80% opacity

4

Content padding 10–12px

5

Organizer label Mono/Inter 9px W600 · --blue-700 · UPPERCASE

Organization Card

Card organisasi Muhammadiyah (PCM, LazisMu, AUM). Selalu ada verification badge dan jumlah anggota/kontribusi.

Component · Trust System

Organization Card

Flutter Custom widget · Row(logo + info) + actions

Logo 44×44px · --r-s · --blue-50 bg

Variants

Ranting / PCM Card

🕌

PCM Caturtunggal

✓ Terverifikasi

📍 Caturtunggal, Sleman · 1.240 jamaah

LazisMu / Amil Card

🏥

LazisMu Nasional

✓ Terverifikasi Kemenag

SK Kemenag 2021 · Nasional · 847 program aktif

Sizing

1

Logo 44×44px · --r-s · --blue-50 / --gold-100 bg

2

Gap logo → info 10px (--sp-3)

3

Name Inter 13–14px W700 · mb 2px

4

Verification badge mt 2px · font-size 9px

5

Meta text Inter 11–11.5px · --ink-3 · mb 8px

6

Actions full-width row · gap 6px

Transparency Card

Menampilkan breakdown alokasi dana donasi. Wajib di halaman detail campaign. Menjawab "dana saya dipakai untuk apa?"

Trust System · MASA-specific

Transparency Card

Flutter Custom widget · dark header + 3-col grid

Colors --ink-0 header · --n-0 stats

Anatomy

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

1

Header --ink-0 bg · white text · padding 12px 16px

2

Stat label Mono 9px · --ink-4 · uppercase · ls 6%

3

Stat value Inter 18px W800 · LS -1.8%

4

Stat sub Inter 10px · --ink-4

5

Grid 3 columns · dividers --line · padding 12px 14px each

Usage Rules

✓ Do

Tampil di setiap halaman detail campaign donasi
Data dari API — bukan static
Update realtime atau max 24 jam sekali
Selalu tampilkan tanggal update terakhir

✕ Don't

Sembunyikan transparency card
Tampilkan angka yang tidak akurat
Lebih dari 3 stat dalam satu card
Static/hardcoded angka

Hero Banner

Banner campaign di homepage. Gradient background, copy singkat, satu CTA. Dirotasi saat ada campaign aktif (Qurban, Ramadan, dll).

Pattern · Homepage

Hero / Campaign Banner

Flutter Container + LinearGradient · Stack

Height 100–120px · full width

Campaign Variants

Qurban Campaign

Qurban 2026

Kurban bertahap mulai Rp 934rb/bulan

NTT · Terverifikasi Muhammadiyah

Sedekah Campaign

Sedekah Subuh

Mulai kebiasaan baik hari ini

1.243 jamaah sudah bergabung

Anatomy Token Spec

1

Background LinearGradient 135° · 2 brand colors

2

Decoration circle position: top-right · 100px · rgba 7% white

3

Overline Mono 9px W600 · uppercase · 75% opacity · ls 6%

4

Headline Inter 17px W700 · white · LH 1.2 · mb 4px

5

Subtext Inter 11px · 80% opacity · mb 10px

6

CTA --btn-sm · amber (on blue bg) / ghost-white (on green bg)

7

Container padding 16px 20px · --r-m

Form Pattern

Pola standar untuk semua form di MASA: Auth, Iuran, Donasi, Profile. Field order, validation timing, CTA placement — semua konsisten.

Pattern · Inputs

Form Pattern

Flutter Form widget + GlobalKey + FormState.validate()

Validation onChanged per field · onSubmit full form

Standard Form Layout

Pembayaran Iuran

Bulan Mei 2026

Metode bayar

▾

Jumlah

Rp

Catatan (opsional)

Partisipasi Mei: 40% dakwah · 35% kaderisasi · 25% AUM

Batal

Form Rules

1

Field order Most important first · optional fields last

2

Field gap 12px (--sp-3) between fields

3

Summary/info Gold or Blue accent card · above CTA

4

Primary CTA full-width · always bottom · verb+amount: "Bayar Rp 25.000"

5

Cancel/skip Text button below primary · never as ghost button

6

Validation onChanged (real-time for format) · onSubmit (full check)

Form Do/Don't

✓ Do

1 Primary CTA per form, selalu di bawah
Label selalu terlihat (tidak floating)
Error inline di bawah field yang salah
Readonly field tidak bisa di-edit (bukan disabled)
Tampilkan summary/trust info sebelum CTA

✕ Don't

Lebih dari 2 scroll screens untuk 1 form
Validation hanya saat submit
Placeholder text sebagai pengganti label
2 CTA yang sama kekuatannya
Form tanpa cancel/skip option

Sizing Reference

Tabel ukuran lengkap semua komponen MASA. Designer gunakan ini sebagai referensi saat membuat desain baru di Figma. Semua ukuran sudah terstandarisasi — tidak ada nilai arbitrary.

Reference · Comprehensive

Component Sizing Table

Semua 35 komponen dengan ukuran eksak. Diurutkan per kategori. Gunakan token CSS ketika tersedia, nilai px hanya sebagai referensi konkret.

Touch Targets — Prinsip dasar

Aturan touch target WAJIB

Minimum: 44×44px

Semua tappable elements

Ideal: 48×48px

Navigation items

FAB: 56–64px

Primary FAB Sedekah

Visual ≠ Touch

Icon 20px visual = 44px touch area

Actions Sizing

Component	Width	Height	Padding	Radius	Font
Button SM	auto	32px	6px 16px	--r-full	12px W600
Button MD	auto	44px ★	10px 24px	--r-full	14px W600
Button LG	auto	52px	14px 32px	--r-full	15px W600
Icon Button	44px ★	44px ★	10px	50%	icon 18–20px
FAB (visual)	56px	56px	16px	50%	icon 22px
FAB (touch)	64px ★	64px ★	GestureDetector	50%	—

Navigation Sizing

Component	Height	Padding	Icon	Label	Notes
Top App Bar	56px ★	0 16px	36×36px	15px W700 center	surfaceTint: transparent
Bottom Nav	64px + safe	8px 8px 20px	22×22px	9.5px W500	4 tabs + FAB center
Tab Bar item	44px	10px 16px	—	13px W600	indicator: 2px --blue-700
Filter Chip	32px	5px 14px	—	12px W500	--r-full
Puck Grid item	aspect-ratio 1:1	8px	18–22px	8.5–9.5px W500	min 64px · --r-s

Inputs Sizing

Component	Height	Padding	Radius	Font	Border
Text Field	44px min ★	10px 14px	--r-s (8px)	13px W400	1.5px --n-300
Search Field	44px ★	8px 16px	--r-full	13px W400	none idle
OTP Cell	52px	—	--r-s (8px)	Mono 22px W700	1.5–2px
OTP Cell width	—	—	—	—	44px per cell · 8px gap
Toggle	24px	—	99px	—	44px wide · thumb 20px
Checkbox	18px	—	4px	—	touch: 44×44px wrapper
Radio	18px	—	50%	—	touch: 44×44px wrapper

Feedback & Overlay Sizing

Component	Width	Padding	Radius	Notes
Toast	max 360px	12px 16px	--r-m (12px)	3s duration · floating
Dialog	max 320px	24px	--r-l (16px)	EL-4 shadow · backdrop 40%
Bottom Sheet	100%	20px	--r-xl top (24px)	max-h 90vh · handle 36×4px
Alert Banner	100%	12px 16px	--r-s (8px)	left-border 3px · inline
Empty State	100%	32px 24px	—	icon 48px 50% opacity

Data Display Sizing

Component	Key Sizes	Padding	Radius	Notes
Card Standard	full-width	16px (--sp-4)	--r-m (12px)	border 1px --line · --n-0 bg
Avatar XS	24×24px	—	50%	font 9px
Avatar S	32×32px	—	50%	font 11px
Avatar M	40×40px	—	50%	font 14px
Avatar L	52×52px	—	50%	font 18px
List Item	full-width	12px 16px	--r-s	min-height 48px
Progress Bar	full-width	—	99px	height: 4–6px
Donation Card image	full-width	—	—	height: 100px

Trust System Sizing

Component	Key Sizes	Notes
Verification Badge	h: auto · padding 3px 10px	font: Inter 11px W600 · --r-full
e-KTAM Card	max-w 320px · aspect ~1.6:1	padding 20px · --r-l · gradient bg
Organization logo	44×44px	--r-s · --blue-50 bg
Event date pill	52px wide × full height	--blue-700 bg · day 20px W800
Impact Card header	full-width · padding 16px	gradient green · number 36px W800
Hero Banner	full-width · h 100–120px	padding 16px 20px · --r-m · gradient

★ Touch Target Rule

Semua nilai yang ditandai ★ adalah minimum touch target. Jika visual element lebih kecil (mis. icon 20px), tambahkan GestureDetector / InkWell dengan padding agar total area tappable = 44×44px.

← Index · DS v2 35 components · MASA UI Reference v2.0 · 14 Jun 2026