# DESIGN.md: halaman pola saham (screener.arcadev.my.id/volspike/)

Dokumen arah desain. Ini sumber "jiwa" halaman; `gen_halaman.py` adalah penerapnya,
dan antislop R-01..R-38 adalah filternya.

## Kalimat arah (Design Read)

> Dibaca sebagai: alat screening data pasar untuk pemakai teknis di Indonesia,
> dengan bahasa visual "meja kerja analis" yang padat dan tenang,
> dial ENERGY 1 / RHYTHM 2 / MOTION 1.

Dial diambil dari sifat pekerjaannya: orang membuka halaman ini untuk **memindai angka cepat**
lalu memutuskan satu saham. Yang dibutuhkan bukan kemegahan, tapi angka yang gampang dibandingkan
dan kontrol yang tidak menghalangi.

## Dial

- **ENERGY 1 (tenang).** Halaman kerja, bukan halaman jualan. Tidak ada hero, tidak ada ajakan.
- **RHYTHM 2 (cukup konsisten dengan beberapa jeda).** Tabel berulang memang sifat datanya, jadi
  satu bentuk tabel dipakai untuk ketiga daftar. Jeda datang dari dua blok rangkaian pola di atas
  yang bentuknya sengaja berbeda dari tabel.
- **MOTION 1 (hover dan focus saja).** Tidak ada animasi masuk, tidak ada loop. Angka datar lebih
  mudah dipindai kalau tidak bergerak.

## Palet (R-29: netral + 1 aksen, ditambah 2 warna semantik data)

| Peran | Gelap | Terang | Alasan satu baris |
|---|---|---|---|
| Latar | `#0e1319` | `#f4f6f9` | Netral, supaya warna data yang berbicara |
| Permukaan | `#161c24` | `#ffffff` | Memisahkan tabel dari latar tanpa bayangan |
| Garis | `#2b3440` | `#ccd5e0` | Batas baris harus terlihat tanpa jadi garis berat |
| Teks | `#e8eef5` | `#141a21` | Kontras tinggi untuk angka kecil, sudah diukur |
| Teks sekunder | `#a8b5c3` | `#4d5966` | Label pendukung tetap lolos AA, bukan abu samar |
| **Aksen** | `#f0a93c` | `#8a5605` | Satu warna untuk menandai acuan dan keadaan aktif |
| Naik | `#4cc06a` | `#12692f` | Semantik data harga naik |
| Turun | `#ff8078` | `#b3261e` | Semantik data harga turun |

Kenapa aksen amber, bukan biru: biru adalah warna bawaan yang muncul di hampir semua antarmuka
hasil generator, jadi ia tidak menandai apa pun. Amber dipakai **hanya** di tiga tempat:
garis MA20 pada grafik, penanda baris acuan, dan keadaan aktif (focus, urut aktif, halaman aktif).
Hijau dan merah tidak dipakai sebagai dekorasi; keduanya hanya berarti arah harga.

Kenapa gelap sebagai bawaan: halaman ini alat kerja teknis yang dibuka lama sambil menyilangkan
angka dengan chart lain, dan itu alasan sah untuk gelap menurut R-21. Tapi karena pemakainya juga
memakai mode terang, **toggle terang/gelap tetap dibuat dan kedua mode diuji** (R-34).

## Tipografi (R-06)

- Teks dan judul: `system-ui, Segoe UI, Roboto, ...`. Alasan satu baris: dirender langsung tanpa
  unduhan font, tidak bergeser saat memuat, dan huruf lokal perangkat punya cakupan aksara Indonesia
  yang aman untuk prosa.
- **Angka: monospace** (`ui-monospace, SF Mono, Menlo, Consolas`). Alasan satu baris: kolom angka
  harus sejajar digit per digit supaya bisa dipindai vertikal, dan itu keputusan keterbacaan, bukan
  gaya terminal.
- Label kolom memuat satuannya (`Vol kering (%)`, `Nilai/hari (juta Rp)`) supaya filter tidak perlu
  ditebak.

## Bentuk dan motif identitas

Motifnya adalah **rangkaian tahap**: pola MUTU dan MITI memang urutan kejadian
(spike, turun kering, sentuh MA, mantul), jadi di atas tabel keduanya digambar sebagai
empat tahap bernomor yang tersambung garis, bukan sebagai grid kartu seragam.
Bentuk tampilan mengikuti bentuk isi (C-3).

Di dalam tabel, motif yang sama muncul sebagai **sparkline**: bar volume tipis di belakang
dan garis close di depan, dengan garis MA20 putus-putus sebagai acuan.

## Grafik TradingView di dalam halaman

Memindai pola lalu memutuskan butuh grafik penuh; sparkline di kolom *Grafik* cuma 200x48 piksel
dan tidak bisa digeser atau diperbesar. Karena itu **kode saham di setiap baris jadi tombol**
yang membuka panel grafik TradingView untuk saham itu, dan klik di bagian lain barisnya membuka
panel yang sama.

Keputusan dan alasannya:

- **Panel, bukan tab baru.** Angka pembanding dan grafik dibaca bergantian, jadi pindah tab
  berarti kehilangan konteks tabel. Panel bisa ditutup dengan `Esc` dan fokus kembali ke baris
  yang tadi ditekan, jadi alurnya tidak putus.
- **Widget dimuat saat panel dibuka, bukan saat halaman dimuat.** 142 baris tidak boleh memicu
  142 iframe; halaman harus tetap ringan untuk dipindai.
- **Ticker jadi `<button>` sungguhan, bukan `<span onclick>`.** Bisa difokus dengan Tab, dibuka
  dengan Enter, dan punya tanda garis bawah titik-titik supaya tidak jadi kejutan (R-26, R-32).
- **Judul panel memuat kode lengkapnya (`IDX:LAJU`), bukan hanya `LAJU`.** Kode bursanya
  ditampilkan supaya tidak ambigu, dan tombol **Buka di TradingView** menuju simbol yang sama persis.
- **Grafiknya mengikuti tema halaman.** Panel dibuka dalam mode gelap atau terang sesuai tombol
  tema, bukan memaksa satu tema saja.
- **Kalau widget gagal dimuat dalam 8 detik, halaman memberi tahu dan mengarahkan ke TradingView.**
  Panel kosong tanpa penjelasan adalah kontrol yang berbohong (R-26).
- **Latar halaman digelapkan rata, bukan diburamkan.** Tidak ada glassmorphism, sesuai daftar di
  bawah; pemisahan datang dari gelapnya latar dan garis panel, bukan dari efek.

## Keputusan lain dan alasannya (R-31)

- **Radius 6px untuk kontrol, 10px untuk panel.** Radius jadi penanda jenis: kontrol kecil,
  wadah besar. Bukan satu angka yang ditempel ke semua elemen.
- **Tanpa bayangan sama sekali, hanya garis.** Halaman padat; bayangan di setiap kartu akan
  membuat semuanya terlihat mengambang tanpa ada yang benar-benar menonjol.
- **Hijau dan merah tidak pernah jadi satu-satunya penanda.** Setiap nilai naik atau turun
  selalu membawa tanda `+` atau `-` di depannya, jadi masih terbaca tanpa warna.
- **Baris acuan (MUTU dan MITI) ditandai garis kiri aksen dan kata "acuan".** Garis itu membawa
  informasi nyata (baris pembanding pola), jadi bukan hiasan, dan kata "acuan" membuatnya tidak
  bergantung warna saja.
- **Di layar sempit setiap baris jadi kartu.** Alasan satu baris: 12 sampai 14 kolom tidak mungkin
  muat di 375 piksel tanpa gulir mendatar, dan gulir mendatar itu kegagalan R-03.
  Baris filter ikut jadi daftar bertumpuk dan muncul lewat tombol "Filter kolom".
- **Tombol pager dan kontrol jadi 44 piksel di layar sempit.** Ukuran jari, bukan ukuran kursor.
  Di desktop tetap 34 piksel dengan alasan kepadatan tabel.

## Yang sengaja tidak dipakai

Tidak ada gradien, tidak ada glassmorphism, tidak ada glow, tidak ada bayangan, tidak ada
emoji, tidak ada grid latar, tidak ada animasi masuk. Bukan karena dilarang, tapi karena tidak
ada satu pun yang melayani pekerjaan di halaman ini.