# STYLE.md — Panduan Visual App HCC

Acuan tunggal untuk warna, tipografi, dan spacing. Kalau ada beda antara file ini dan hasil kerja, file ini yang menang. Versi visualnya: `hcc-style-guide.html`.

**Aturan nomor satu:** jangan menulis nilai hex atau ukuran font langsung di komponen. Selalu lewat token di bawah.

---

## 1. Warna

### Inti

| Token | Hex | Peran | Porsi |
|---|---|---|---|
| `--navy` | `#001F3F` | Teks, header, blok gelap, logo solid | ± 30% |
| `--paper` | `#FFFFFF` | Latar default semua halaman | ± 60% |
| `--sun` | `#FFE866` | Aksen: tombol utama, badge, highlight | ± 10% |

### Netral turunan

Semua digeser ke arah biru supaya tidak terlihat kotor di sebelah navy.

| Token | Hex | Dipakai untuk |
|---|---|---|
| `--mist` | `#F4F6FA` | Latar kartu, latar header tabel |
| `--line` | `#DCE3ED` | Border dan garis pemisah |
| `--muted` | `#8FA0B8` | Ikon nonaktif, placeholder |
| `--slate` | `#3D5876` | Teks sekunder, caption |
| `--sun-deep` | `#E8CF3F` | Hover tombol kuning, ring fokus |

### Kontras — hafalkan yang ini

| Kombinasi | Rasio | Status |
|---|---|---|
| Navy di atas putih | 16,6 : 1 | AAA — teks isi default |
| Putih di atas navy | 16,6 : 1 | AAA — section gelap |
| Kuning di atas navy | 13,4 : 1 | AAA — judul aksen |
| Navy di atas kuning | 13,4 : 1 | AAA — tombol utama |
| **Kuning di atas putih** | **1,2 : 1** | **GAGAL — jangan pernah untuk teks** |
| **Putih di atas kuning** | **1,2 : 1** | **GAGAL — tidak dipakai** |

Kuning hanya aman berpasangan dengan navy. Di luar itu, kuning cuma boleh jadi blok warna, bukan warna teks.

---

## 2. Tipografi

| Peran | Typeface | Bobot | Fallback |
|---|---|---|---|
| Display / heading | Bricolage Grotesque | 600, 800 | Trebuchet MS |
| Teks isi | Karla | 400, 500, 700 | Segoe UI |
| Data / kode | IBM Plex Mono | 400, 500 | ui-monospace, Menlo |

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Karla:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
```

### Skala

| Level | Ukuran | Font & bobot | Line-height | Letter-spacing | Dipakai untuk |
|---|---|---|---|---|---|
| H1 | `clamp(2.2rem, 5vw, 3.1rem)` | Bricolage 800 | 1.05 | −0.032em | Judul halaman, **satu per halaman** |
| H2 | `clamp(1.6rem, 3vw, 2.05rem)` | Bricolage 800 | 1.15 | −0.022em | Judul section |
| H3 | `1.3rem` | Bricolage 600 | 1.25 | −0.012em | Sub-section |
| H4 | `1.0625rem` | Bricolage 600 | 1.4 | 0 | Judul kartu |
| H5 | `1rem` | Bricolage 600 | 1.45 | 0 | Label dalam kartu |
| H6 | `0.8125rem` | Karla 700, uppercase | 1.5 | 0.1em | Eyebrow, label kolom |
| Body | `1rem` | Karla 400 | 1.7 | 0 | Paragraf |
| Small | `0.875rem` | Karla 400 | 1.6 | 0 | Teks pendukung |
| Caption | `0.8125rem` | Karla 400, warna `--slate` | 1.6 | 0 | Keterangan gambar |
| Mono | `0.9375rem` | IBM Plex Mono 400 | 1.6 | 0 | Tanggal, angka, kode |

Aturan tambahan:
- Baris teks isi maksimal **65 karakter** (`max-width: 65ch`).
- Heading pakai `text-wrap: balance`.
- Angka dalam kolom pakai `font-variant-numeric: tabular-nums`.
- Butuh pembeda baru? Ganti warna atau bobot, jangan tambah level heading.

---

## 3. Spacing & bentuk

Kelipatan 4px. Kalau butuh angka di luar daftar ini, kemungkinan besar layout-nya yang salah.

`4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72 · 96`

| Radius | Nilai | Untuk |
|---|---|---|
| `--r-sm` | `6px` | Badge, tag kecil |
| `--r-md` | `10px` | Tombol, input |
| `--r-lg` | `14px` | Kartu, panel |
| `--r-full` | `999px` | Pil, avatar |

Jarak antar section: 64px di desktop, 48px di mobile. Jarak bebas di sekitar logo: minimal setinggi huruf "H" pada logo.

---

## 4. Token siap pakai

```css
:root {
  /* warna */
  --navy: #001f3f;
  --paper: #ffffff;
  --sun: #ffe866;
  --sun-deep: #e8cf3f;
  --mist: #f4f6fa;
  --line: #dce3ed;
  --muted: #8fa0b8;
  --slate: #3d5876;

  /* font */
  --ff-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --ff-body: "Karla", "Segoe UI", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-14: 56px; --s-18: 72px; --s-24: 96px;

  /* radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
}
```

Kalau nanti pakai Tailwind atau sejenisnya, definisikan token ini sekali di config dan hapus blok CSS di atas — jangan disimpan dua tempat.

---

## 5. Komponen

### Tombol

| Varian | Latar | Teks | Border | Kapan |
|---|---|---|---|---|
| Primary | `--sun` | `--navy` | — | Aksi utama. **Satu per layar.** |
| Secondary (latar terang) | transparan | `--navy` | 1.5px `--navy` | Aksi pendamping |
| Secondary (latar gelap) | transparan | `--paper` | 1.5px putih 45% | Aksi pendamping di section navy |
| Danger | transparan | `#B23434` | 1.5px `#B23434` | Hapus, batalkan |

Padding `11px 20px`, radius `--r-md`, Karla 700 `0.9375rem`. Tombol primary tetap kuning-teks-navy di latar terang maupun gelap — itu satu-satunya yang tidak berubah, supaya user tahu mana yang harus diklik.

### Input

Border 1px `--line`, radius `--r-md`, padding `10px 14px`, teks `--navy`, placeholder `--muted`.
Fokus: `outline: 2px solid var(--sun-deep); outline-offset: 2px`.
Error: border `#B23434` + teks error di bawahnya, **bukan** cuma border merah.

### Kartu

Latar `--paper`, border 1px `--line`, radius `--r-lg`, padding 24px. Shadow hanya saat hover atau melayang (modal, dropdown) — bukan di kartu diam.

---

## 6. Aksesibilitas — tidak dinegosiasikan

- Setiap elemen interaktif punya `:focus-visible` yang terlihat.
- Warna tidak pernah jadi satu-satunya penanda status — sertakan ikon atau teks.
- Target sentuh minimal 44×44px.
- Semua gambar bermakna punya `alt`; yang dekoratif `alt=""`.
- Hormati `prefers-reduced-motion: reduce`.
- Teks isi minimal rasio 4,5:1 — kombinasi di bagian 1 sudah aman, di luar itu cek dulu.

---

## 7. Do & Don't

**Lakukan**
- Mulai dari latar putih, tambahkan navy untuk struktur.
- Simpan kuning untuk satu hal terpenting di layar.
- Pakai `--navy` penuh untuk teks, bukan abu-abu netral.

**Hindari**
- Teks kuning di atas putih.
- Gradasi navy ke kuning — bertabrakan di area hijau lumpur.
- Warna baru per divisi. Bedakan lewat ikon atau tipografi.
- Heading dengan typeface selain Bricolage, termasuk font bawaan Canva.

---

*Ada yang perlu diubah? Ajukan lewat PR ke file ini, bukan diputuskan sendiri di komponen.*