# hanif ui — kontrak untuk asisten koding
Sistem antarmuka untuk semua app di *.hanif.app. Baca ini SEBELUM menulis UI
apa pun. Kalau ada yang ragu, tanya pemiliknya — jangan mengarang bentuk baru.
Sumber: https://ui.hanif.app · Dokumentasi: https://ui.hanif.app/docs
Berkas: /tokens.css · /lib/ui.css · /lib/layout.css
## Cara memakai
Salin `tokens.css`, `lib/ui.css`, `lib/layout.css` ke app, lalu:
Jangan menautkan langsung ke ui.hanif.app dari app produksi: sebagian app
berjanji tidak memanggil server lain. Salin berkasnya, catat versinya.
## Langkah wajib sebelum mendesain
1. Tentukan BIDANG halaman lebih dulu — ini keputusan terbesar:
- `.shell-wide` (maks 1760px) etalase/galeri/landing. Terasa lebar, isi
menempel jauh ke tepi, kolom banyak.
- `.shell-dash` (maks 1560px) dashboard. Tetap lebar, padat data,
hiasan minim. Dipasangkan dengan `.split` + `.side`.
- `.shell-compact` (maks 460px) app kecil. Satu kolom di tengah, rasa
aplikasi HP walau dibuka di laptop.
Jangan mencampur dua bidang dalam satu halaman.
2. Baru pilih warna aksen (satu per halaman), lewat satu baris:
``
3. Baru menyusun komponen dari daftar di /docs.
## Aturan keras
- Netral dulu: bidang dan garis memakai hitam-putih (`--ink`, `--paper`,
`--line`). Warna muncul hanya untuk hal yang bisa ditekan atau ditandai.
- Satu bidang warna penuh (`.slab` / tombol isian) per layar. Dua berarti
salah satunya tidak penting.
- Warna dipakai SOLID. Dilarang: gradient dekoratif, glow, bayangan warna,
teks pelangi, kaca buram sebagai hiasan.
- Warna berani, bukan pastel dan bukan sendu. Sudah tersedia: `--blue`,
`--orange`, `--green`, `--red`, `--yellow`, `--purple`, masing-masing dengan
pasangan teks `--on-*` yang lolos kontras. Jangan membuat hex baru.
- Sudut membulat tapi masih berbahu: pakai `--r-btn` (12px), `--r-card` (18px),
`--r-lg` (24px). `--r-pill` hanya untuk chip dan tombol ikon bulat.
- Font sistem saja. Jangan menambah webfont.
- Setiap nilai warna/jarak/huruf HARUS lewat token. Dilarang menulis hex,
rem acak, atau cubic-bezier langsung di komponen.
- Angka selalu `.num` atau `.mono` (tabular, rata kanan di tabel).
- Gerak: `--d-fast` 120ms untuk tekan, `--d-mid` 220ms untuk buka/tutup,
easing `--ease`. Tidak ada pantulan, tidak ada parallax.
- Wajib: `:focus-visible` terlihat, target sentuh ≥ 44px, `prefers-reduced-motion`
dihormati, tidak ada gulir mendatar di 320px.
## Kelas yang tersedia
Tata letak: shell-wide shell-dash shell-compact split side grid grid-2 grid-3
grid-4 grid-tight row row-tight row-nowrap spacer stack stack-lg section
section-sm
Tulisan: display h1 h2 h3 lead small muted faint mono eyebrow measure
Tombol: btn btn-accent btn-outline btn-ghost btn-blue btn-orange btn-green
btn-red btn-yellow btn-lg btn-sm btn-icon btn-block
Bidang: card card-link card-flat card-pad-0 slab thumb thumb-wide ratio
ratio-16-9 ratio-4-3 ratio-1-1 rule sep
Penanda: chip chip-solid chip-line dot badge avatar avatars kbd meter
Isian: field label input select textarea hint switch check radio choice
toggles slider inputgroup affix otp calendar calendar-head calendar-grid
Data: toolbar tablewrap table table-selectable num stat progress scroller
resizable carousel skeleton skeleton-text skeleton-circle
Navigasi: topbar brand brand-mark navlink tabs tab side crumbs pager
Bertingkat: menu pop tip tiptext hovercard hovercard-panel dialog dialog-body
dialog-foot sheet sheet-bottom sheet-body command accordion disclosure
Umpan balik: alert alert-accent alert-ok alert-warn alert-danger alert-icon
toast is-on empty code
## Perilaku (lib/ui.js, opsional)
Sebagian besar komponen jalan tanpa JavaScript — pakai ,