# DESIGN.md: Kiostore Design System

> Status: Approved Design Direction
> Dials: ENERGY 3 / RHYTHM 2 / MOTION 1

## 1. Product & Audience
* **Product:** Kiostore (Top Up Game, Token Listrik PLN, Nomor Virtual OTP Server 1 & Server 2, Saldo Digital).
* **Target Audience:** Gamers mobile dan pengguna digital di Indonesia yang mengutamakan kecepatan proses, kejelasan data harga, dan kemudahan transaksi via mobile (PWA/TWA).
* **Core Philosophy:** *Utilitarian Fast-Checkout Instrument* (Alat utilitas berpresisi tinggi: cepat, padat informasi, bebas dekorasi semu, responsif di setiap sentuhan jari).

## 2. Palette & Atmosphere
* **Background:** Obsidian Navy pekat (`#0c0f17`)
* **Surface / Cards:** Slate Tint kokoh (`#141923`)
* **Border:** Halus berdefinisi (`rgba(255, 255, 255, 0.08)`)
* **Primary Accent:** Energetic Amber-Orange (`#f97316` / `#ea580c`), hanya digunakan untuk tindakan utama (CTA), indikator terpilih, dan status penting.
* **Functional Status Colors:**
  * Success / Verified: `#10b981` (Emerald Green)
  * Pending / Process: `#f59e0b` (Warm Amber)
  * Error / Cancel / Danger: `#ef4444` (Crimson Red)
* **Anti-Slop Guardrails:**
  * Dilarang menggunakan gradasi ungu-ke-biru generik (R-01).
  * Dilarang menumpuk glassmorphism blur di semua kontainer (R-10).
  * Dilarang menggunakan glow tak bertujuan (R-13).

## 3. Typography & Formats
* **Font:** Inter
* **Number & Currency:** `font-variant-numeric: tabular-nums` untuk nominal harga Rupiah, kode OTP, dan nomor meter agar rapi vertikal.
* **Hierarchy:** Kontras teks tinggi (WCAG AA min 4.5:1), tidak menggunakan abu-abu tipis di latar gelap (R-25).
* **Copywriting:** Dilarang menggunakan em dash (`—`) dalam teks UI; gunakan koma, titik, titik dua, atau tanda kurung (R-02).

## 4. Dials
* **ENERGY:** 3 (Kontras tinggi, aksen tajam, jelas terbaca).
* **RHYTHM:** 2 (Pola tata letak terstruktur, tap target min 44px di mobile).
* **MOTION:** 1 (Transisi singkat 120-150ms untuk feedback tombol dan modal, menghormati `prefers-reduced-motion`).