🎨 UI/UX Design Specification (DESIGN.md)Legacy format

Desain SI-KEMAS dibangun dengan mengutamakan aksesibilitas dan kejelasan (clarity). Mengingat pengguna utama adalah pengurus masjid (rentang usia 40-60+ tahun), antarmuka harus menanamkan rasa percaya (trustworthy), tidak membingungkan (uncluttered), dan mudah dibaca tanpa kacamata baca khusus.

Prinsip Utama:

• Aksesibilitas Pertama: Area sentuh (touch targets) yang besar dan kontras teks yang tinggi.

• Beban Kognitif Rendah: Jangan menyembunyikan fitur di balik menu yang rumit. Tampilkan aksi utama secara langsung.

• Figma-Quality Cleanliness: Menggunakan ruang kosong (whitespace) yang luas dan bayangan (shadow) yang sangat halus untuk membedakan elemen, bukan menggunakan garis tepi (border) yang tebal dan kaku.

---

### A. Cards (Kartu Kontainer)

Digunakan untuk mengelompokkan informasi seperti ringkasan metrik dan form input.

• Border Radius: Besar (1.5rem atau 24px) untuk kesan ramah.

• Shadow: Bayangan menyebar dan sangat halus. CSS parameter: `box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);`

• Border: Tidak ada border (No border), pemisahan visual murni mengandalkan shadow dan kontras antara Surface White dan Canvas Off-White.

### B. Buttons (Tombol Aksi)

Dirancang agar ramah layar sentuh (touch-friendly) untuk pengguna tablet atau HP.

• Minimum Height: 48px (Sangat penting untuk aksesibilitas jari).

• Padding: Horizontal minimum 24px.

• Border Radius: 0.75rem atau 12px.

• Primary Button: Background warna solid dengan teks putih.

• Secondary Button: Background transparan/putih dengan border 1px warna Primary.

### C. Forms (Input Data)

• Input Fields: Tinggi minimum 56px.

• Placeholder: Gunakan contoh data yang jelas (misal: "Contoh: Rp 150.000").

• Feedback: Berikan warna latar hijau muda/merah muda yang tipis jika input berhasil/gagal divalidasi.

### D. Data Tables (Buku Kas)

• Header Tabel: Gunakan warna latar abu-abu kebiruan terang (#F1F5F9) untuk membedakan dengan baris data.

• Baris (Rows): Terapkan efek hover (perubahan warna latar belakang menjadi sangat abu-abu terang) ketika kursor diarahkan, untuk membantu mata pengguna usia lanjut membaca satu baris dari kiri ke kanan.

---

• Max Width: Kontainer utama dibatasi maksimal 1200px di layar desktop agar mata tidak perlu membaca dari ujung ke ujung layar.

• Spacing (Margin/Padding): Gunakan kelipatan 8px. Spasi antar section (misal dari Kartu Saldo ke Tabel) minimal 32px atau 48px (generous whitespace).