first commit

UI_UX_CONTEXT.md

@@ -0,0 +1,88 @@
+# GeoPoverty Light: UI/UX Design Context & Guidelines (v1.0)
+
+Dokumen ini mendefinisikan bahasa visual dan standar antarmuka untuk platform **GeoPoverty GIS**. Fokus utama desain adalah kejernihan data, profesionalisme, dan efisiensi navigasi spasial dalam balutan estetika yang bersih dan modern.
+
+---
+
+## 1. Filosofi Desain: "Lumina GIS"
+Estetika ini mengutamakan **kejernihan (clarity)** dan **kedalaman (depth)**. Dengan menggunakan latar belakang yang terang dan kontras tinggi, data kemiskinan yang kompleks diubah menjadi informasi yang mudah dicerna tanpa kehilangan kesan premium.
+
+---
+
+## 2. Identitas Visual & Palet Warna
+Menggunakan skema warna yang didominasi oleh warna dingin dan netral untuk menciptakan kesan platform yang objektif dan tepercaya.
+
+### Warna Utama (Core Colors)
+- **Primary (Electric Indigo)**: `#6366F1` - Digunakan untuk aksi utama (CTA), indikator aktif, dan elemen branding.
+- **Surface (Ghost White)**: `#F7F9FB` - Warna latar belakang utama untuk menjaga tampilan tetap segar dan bersih.
+- **On-Surface (Deep Slate)**: `#1A2138` - Warna teks utama untuk keterbacaan maksimal.
+- **Secondary (Teal)**: `#14B8A6` - Digunakan untuk indikator status positif atau kategori infrastruktur tertentu.
+- **Error (Crimson)**: `#EF4444` - Digunakan untuk status "Prioritas 1" atau kondisi kritis.
+- **Outline (Soft Steel)**: `#D8DADC` - Untuk garis pemisah dan border yang halus.
+
+---
+
+## 3. Tipografi
+Menggunakan font **Hanken Grotesk** untuk kesan modern dan teknis yang tetap ramah pengguna.
+
+- **Display/Headlines**: Bold, kerning rapat (-0.02em). Memberikan penekanan kuat pada judul panel.
+- **Body Text**: Regular, line-height 1.6. Memastikan alamat dan deskripsi panjang mudah dibaca.
+- **Labels/Data**: Semi-bold, ukuran 11-12px. Digunakan untuk statistik wilayah dan label marker.
+
+---
+
+## 4. Prinsip Layout & Komposisi
+Platform ini menggunakan pendekatan **Layered Architecture**:
+
+### A. Base Layer (The Map)
+Peta selalu menjadi kanvas dasar. Gunakan basemap dengan saturasi rendah agar marker data (Indigo/Teal/Red) terlihat menonjol.
+
+### B. Glassmorphic Panels
+Semua panel UI (Sidebar, Header, Cards) menggunakan efek transparansi:
+- `background: rgba(255, 255, 255, 0.8);`
+- `backdrop-filter: blur(16px);`
+- `border: 1px solid rgba(255, 255, 255, 0.3);`
+
+### C. Container Strategy
+- **Corner Radius**: Konsisten di **16px** untuk elemen besar dan **8px** untuk elemen kecil (tombol/badge).
+- **Elevation**: Gunakan bayangan yang sangat lembut (`shadow-sm`) untuk memisahkan panel dari peta, menghindari garis hitam yang kaku.
+
+---
+
+## 5. Komponen Antarmuka (UI Components)
+
+### Data Cards (Keluarga & Infrastruktur)
+- **State**: Kartu yang dipilih (selected) harus mendapatkan aksen border Primary 2px.
+- **Hierarchy**: Nama Kepala Keluarga sebagai judul utama, diikuti oleh alamat dan status bantuan dalam bentuk badge berwarna.
+
+### Interactive Markers
+- **Active State**: Saat diklik, marker harus memberikan feedback visual (pembesaran ukuran atau pendaran cahaya/glow).
+- **Radius Visualization**: Lingkaran radius rumah ibadah menggunakan fill opacity 5% dengan garis tepi tipis (1px dashed).
+
+---
+
+## 6. Pengalaman Pengguna (UX) & Interaksi
+1. **Contextual Disclosure**: Tampilkan detail data hanya saat dibutuhkan (on-click/on-hover) untuk menjaga kebersihan peta.
+2. **Smooth Transitions**: Gunakan durasi transisi 300ms untuk pembukaan panel sidebar atau modal.
+3. **Action Priority**: Tombol "Lapor Kondisi" atau "Tambah Data" harus memiliki kontras warna tertinggi (Primary) agar mudah ditemukan seketika.
+
+---
+
+## 7. Implementasi CSS (Tokens)
+```css
+:root {
+  --lumina-primary: #6366f1;
+  --lumina-surface: rgba(247, 249, 251, 0.8);
+  --lumina-text: #1a2138;
+  --lumina-radius: 16px;
+  --lumina-glass: blur(16px);
+}
+
+.panel-premium {
+  background: var(--lumina-surface);
+  backdrop-filter: var(--lumina-glass);
+  border-radius: var(--lumina-radius);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
+}
+```