# Sistem Desain Antarmuka

Dokumen ini wajib dijadikan acuan visual oleh setiap agent yang mengembangkan halaman baru.

## Arah Visual

Antarmuka menggunakan gaya dashboard modern, bersih, ringan, dan profesional. Referensi visual terdapat pada:

```text
docs/references/dashboard-theme-reference.png
```

Referensi digunakan untuk arah warna, kepadatan layout, bentuk kartu, dan nuansa. Jangan menyalin identitas merek, teks, avatar, atau isi dashboard dari referensi.

## Palet Warna

```css
--green-950: #072a1b;
--green-900: #0b4932;
--green-800: #125d3f;
--green-700: #176a47;
--green-600: #1f7b52;
--green-500: #3aa66f;
--green-400: #62c48b;
--green-200: #cce9d9;
--green-100: #e9f5ef;
--green-50: #f4faf7;
--ink: #111815;
--muted: #7b8781;
--line: #e5eae7;
--surface: #ffffff;
--surface-soft: #f7f9f8;
--canvas: #e9edee;
```

## Prinsip Layout

- Gunakan kanvas abu-abu sangat muda.
- Konten utama berada dalam bingkai putih dengan radius besar.
- Sidebar menggunakan permukaan abu-abu muda.
- Panel menggunakan latar putih, garis tipis, dan bayangan lembut.
- Aksi utama menggunakan hijau tua.
- Kartu unggulan dapat memakai gradasi hijau.
- Hindari warna yang terlalu ramai.
- Beri ruang putih yang cukup.
- Gunakan radius 12–22 piksel pada komponen.
- Tabel dan formulir harus tetap sederhana dan mudah dibaca.

## Tipografi

Gunakan font sistem:

```css
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
```

- Heading menggunakan bobot 700 dengan letter spacing negatif ringan.
- Isi menggunakan ukuran 13–15 piksel.
- Label kecil menggunakan huruf kapital dengan tracking lebih lebar.

## Komponen Utama

### Sidebar

- Lebar desktop sekitar 220 piksel.
- Item aktif berwarna hijau dengan indikator vertikal.
- Sidebar berubah menjadi drawer pada layar kecil.

### Topbar

- Berisi tombol menu mobile, area pencarian, tindakan singkat, dan identitas pengguna.
- Area pencarian dapat menjadi pencarian fungsional pada fase berikutnya.

### Kartu Statistik

- Latar putih dan radius 18 piksel.
- Kartu utama menggunakan gradasi hijau.
- Angka utama besar, tetapi tidak berlebihan.

### Form

- Label jelas.
- Input memiliki radius 10–12 piksel.
- Pesan validasi berada dekat input.
- Tombol utama hijau tua.

### Tabel

- Header lembut.
- Baris memiliki jarak vertikal cukup.
- Status tidak boleh bergantung pada warna saja.
- Gunakan pagination dan filter yang konsisten.

## Responsivitas

- Desktop: sidebar tetap terlihat.
- Tablet: sidebar menjadi drawer.
- Mobile: statistik menjadi satu kolom dan tombol memenuhi lebar.
- Lebar minimum yang didukung: 360 piksel.

## Aksesibilitas

- Seluruh tombol harus memiliki label.
- Fokus keyboard harus terlihat.
- Ikon dekoratif menggunakan `aria-hidden="true"`.
- Kontras teks harus tetap jelas.
- Hormati `prefers-reduced-motion`.

## Larangan

- Jangan memakai warna biru sebagai warna utama.
- Jangan menggunakan bayangan gelap berlebihan.
- Jangan membuat tampilan penuh warna yang bertabrakan.
- Jangan mengganti tema hijau tanpa persetujuan.
- Jangan menyalin nama produk atau isi data dari gambar referensi.
