# Doughlicious POS Typography Guideline

Tujuan guideline ini: mobile POS harus terbaca cepat saat kasir sedang melayani, bukan terasa seperti banner promosi. Karena target awal PWA Android, font stack utama memakai system UI supaya cepat, modern, dan aman offline:

`ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif`

Di Android font yang aktif biasanya Roboto; di iOS SF Pro; di Windows Segoe UI. Jika nanti ingin brand font khusus, rekomendasi aman adalah Inter/Geist untuk UI, bukan font dekoratif.

## Skala yang dipakai

| Token | Ukuran | Line-height | Pemakaian |
| --- | ---: | ---: | --- |
| `--text-display` | 28–34px | 1.12 | Judul login / hero utama |
| `--text-screen-title` | 25–30px | 1.12 | Judul layar: Kasir, Transaksi, Produk |
| `--text-section-title` | 20px | 1.28 | Judul section/card: Daftar produk, Grafik 7 hari |
| `--text-title` | 16px | 1.28 | Nama produk, judul item, card penting |
| `--text-body` | 15px | 1.48 | Input, isi form, teks kerja utama |
| `--text-body-sm` | 13px | 1.48 | Deskripsi produk, helper text, note |
| `--text-label` | 12px | 1.35 | Label field, eyebrow, metadata penting |
| `--text-caption` | 12px | 1.35 | Harga kecil, badge, waktu transaksi |

## Aturan per section

- Login: display 28–34px, body 13–15px, label 12px. PIN input minimal 15px supaya mudah dibaca.
- Kasir/menu: nama produk 16px, deskripsi 13px, varian/harga 12px. Tombol plus/minus tetap icon-first tapi target sentuh minimal nyaman.
- Tinjau pesanan: nama item 16px, variant/harga 12–13px, total 28px+ agar keputusan bayar cepat.
- Saluran dan pembayaran: label metode 14px semibold, deskripsi 12–13px, input detail 15px.
- Produk/admin: field form sama dengan manual add; label 12px, input 15px, deskripsi 15px dengan area lebih tinggi.
- Transaksi/laporan: angka omzet 28–36px, receipt 12–13px, metadata 12px. History ditampilkan per tanggal agar transaksi kemarin tidak terasa hilang.

## Basis riset

- Material Design 3 menyederhanakan type scale menjadi display, headline, title, body, label; body default 16/24 dan label 12–14px.
- Apple menyarankan primary content bisa membesar tanpa overlap/truncation, idealnya diuji sampai 200%+.
- WCAG 2.2 mensyaratkan target pointer minimal 24×24 CSS px; untuk kontrol penting mobile POS kita arahkan 40–50px.
- WCAG contrast mengingatkan bahwa font tipis/terlalu kecil lebih sulit dibaca, jadi UI ini menghindari 8–10px untuk informasi operasional.

Sumber:

- Android Developers — Material 3 typography: https://developer.android.com/develop/ui/compose/designsystems/material3
- Apple Developer — Larger Text evaluation criteria: https://developer.apple.com/help/app-store-connect/manage-app-accessibility/larger-text-evaluation-criteria/
- W3C WCAG 2.2 — Target Size Minimum: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
- W3C WCAG 2.2 — Contrast Minimum: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum