# DESIGN.md — CRM Kolektor

> Arah desain ini ditulis oleh agent (bukan pemilik produk) atas pilihan user
> "lebih berkarakter / berani". Peringatan jujur sesuai antislop R-37: arah yang
> dibuat agent cenderung menuju selera default, jadi arah ini sengaja diturunkan
> dari konten nyata produk (buku rekap collection harian), bukan dari tren.

## Identitas: "Buku Rekap"

Produk ini adalah buku rekap harian kolektor: angka, garis tabel, cap status.
Identitas visual diambil dari situ, bukan dari dashboard SaaS generik.

- **Motif identitas**: garis rekap (ruled line), yaitu garis horizontal tipis
  yang muncul sebagai penanda judul halaman dan pembatas baris data. Motif yang
  sama diulang di topbar, kartu, dan login.
- **Cap (stamp)**: badge status berbentuk persegi tumpul seperti cap kertas,
  bukan pil. Status memang berfungsi sebagai cap pada rekap.

## Palet

2 warna inti + 1 aksen; warna status (merah/kuning) hanya untuk makna data,
bukan dekorasi (R-29/R-31):

| Token | Light | Dark | Alasan satu baris |
|---|---|---|---|
| `--paper` (bg) | `#f3f0e8` | `#161510` | kertas rekap, hangat, bukan abu-abu SaaS |
| `--surface` | `#fdfcf7` | `#201e16` | kertas di atas meja |
| `--text` | `#26241d` | `#ebe8dc` | tinta hitam-hijau |
| `--muted` | `#6c675a` | `#a5a08c` | tinta pudar, kontras ≥ 4.5:1 |
| `--border` | `#e2dccc` | `#383425` | garis ruling |
| `--ink` (primary) | `#14603f` | `#4ec48c` | hijau tinta rekap: uang/collection, bukan biru default AI |
| `--ink-soft` | `#dcebe0` | `#1c3327` | bidang primer lembut |
| `--accent` (amber) | `#b0670c` | `#e0a33e` | khusus target harian & penanda teratas, satu peran: garis target |
| `--red` | `#b3372e` | `#e5837a` | status di bawah target / resign (makna data) |
| `--amber` | `#96600d` | `#d9a648` | status menengah (makna data) |
| `--green` | `#1a7f37` | `#66c584` | status tercapai (makna data) |
| sisi FRONT | hijau (keluarga ink) | idem | kode sisi data: FRONT = hijau |
| sisi BACK | biru tinta `#35558a` / `#7fa3d9` | idem | kode sisi data: BACK = biru tinta |

Palette ringan lebih banyak dari 3 karena FRONT/BACK, merah/kuning/hijau adalah
kode data fungsional (hierarki informasi), bukan dekorasi; warna inti tetap
hijau tinta + kertas, aksen amber.

## Tipografi

- **Judul & brand: Georgia (serif sistem)**. Alasan: nuansa buku rekap/ledger
  yang dipakai harian; tanpa unduhan font (aplikasi wajib jalan offline).
- **Body & data: system sans (Segoe UI)**, angka tabel `tabular-nums` agar
  kolom rupiah sejajar. Alasan: keterbacaan data padat.

## Bentuk & elevasi

- Radius dua tingkat: kontrol `8px`, kartu `12px`, badge/cap `4px`. Tidak ada
  elemen pil kecuali chip yang bisa diklik (affordance tombol).
- Kartu datar (border saja); bayangan hanya untuk yang benar-benar melayang:
  dropdown, modal, palette. Alasan elevasi: hanya lapisan di atas halaman.
- Tanpa gradien. Logo & avatar: bidang hijau tinta flat.

## Dials

**ENERGY 2 / RHYTHM 2 / MOTION 1.** Alat kerja harian yang padat data: cukup
berkarakter di judul, warna, dan cap; gerak hanya hover dan transisi singkat
(maksud: konfirmasi aksi, bukan hiburan).

## Aksen

Amber muncul di satu momen: garis target harian pada grafik (dan penanda rank 1).
Bukan di tombol, bukan di semua kartu.