# 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);
}
```