Bab 01 · Fondasi

Warna, huruf, bentuk.

Semua komponen hanya membaca token di halaman ini. Ubah token di layout.css, dan seluruh situs — juga buku ini — ikut berubah.

01.1 — Warna

Tinta, putih, kobalt.

Warna pendamping punya peran yang jelas dan tidak menggantikan aksen. Contoh di bawah mengikuti tema yang sedang aktif; nilai terang · gelap ditulis di bawahnya.

Latar --bg Terang:oklch(0.99 0 0) Gelap:oklch(0.13 0 0) Halaman
Permukaan --surface Terang:oklch(1 0 0) Gelap:oklch(0.17 0 0) Kartu, panel, input
Permukaan 2 --surface-2 Terang:oklch(0.955 0 0) Gelap:oklch(0.22 0 0) Isian, hover, kepala tabel
Tinta --fg Terang:oklch(0.15 0 0) Gelap:oklch(0.97 0 0) Teks utama dan garis tegas
Tinta redup --muted Terang:oklch(0.45 0 0) Gelap:oklch(0.72 0 0) Teks pendukung, label
Garis --border Terang:oklch(0.86 0 0) Gelap:oklch(0.32 0 0) Pemisah
Biru kobalt --accent Terang:#2447d8 Gelap:#91a9ff Satu ajakan per layar, sorotan
Biru lembut --accent-soft Terang:#edf1ff Gelap:#17244b Latar lencana aksen
Berhasil --success Terang:oklch(0.5 0.13 150) Gelap:oklch(0.74 0.14 150) Lunas, tersimpan
Peringatan --warning Terang:oklch(0.52 0.12 65) Gelap:oklch(0.8 0.14 75) Jatuh tempo dekat
Bahaya --danger Terang:oklch(0.5 0.2 25) Gelap:oklch(0.7 0.18 25) Galat, hapus, terlambat
Kuning arsip --highlight Terang:#edcf8f Gelap:#e8bd72 Tombol accent, penemuan
Informasi --info Terang:#2447d8 Gelap:#91a9ff Petunjuk dan kabar netral
Oranye Oyen --oyen Terang:#a6551d Gelap:#f0af6b Identitas pendamping, bukan CTA
Biru mineral --burung Terang:#277587 Gelap:#83c7d2 Penemuan dan karakter burung
Kertas hangat --kertas Terang:#f2eadb Gelap:#302c25 Latar cerita dan artefak

Tubuh Bit · tiga sisi voxel, visor, LED

Sisi atas Terang:#64708c Gelap:#ffffff
Sisi depan Terang:#35415d Gelap:#dde4f4
Sisi samping Terang:#1b2440 Gelap:#8f9dbc
Visor Terang:#0b0b0d Gelap:—
LED wajah Terang:#f4f4f5 Gelap:—

Bit ikut tema situs, bukan pencahayaan adegan: sisi atas paling terang, sisi samping paling gelap, sehingga bentuk 3D tetap terbaca di kedua tema.

01.2 — Kontras

Terbaca di kedua tema.

Pasangan teks di atas latar yang benar-benar dipakai komponen. Angka dihitung dari layout.css yang sama dengan tes kontras.test.ts; di bawah 4,5:1 tesnya gagal.

Rasio kontras WCAG 2.2 untuk teks biasa. AA ≥ 4,5:1, AAA ≥ 7:1.
Teks · latar	Terang	Gelap
--fg · --bg	19,1:1AAA	18,4:1AAA
--muted · --bg	7,2:1AAA	8,1:1AAA
--muted · --surface	7,4:1AAA	7,7:1AAA
--muted · --surface-2	6,5:1AA	7,0:1AA
--accent · --bg	6,9:1AA	8,9:1AAA
--accent · --accent-soft	6,3:1AA	6,7:1AA
--accent-fg · --accent	7,1:1AAA	8,9:1AAA
--highlight-fg · --highlight	9,9:1AAA	9,6:1AAA
--danger-fg · --danger	6,7:1AA	6,9:1AA
--danger · --bg	6,5:1AA	6,9:1AA
--success · --bg	5,5:1AA	9,2:1AAA
--warning · --bg	5,5:1AA	10,6:1AAA
--oyen · --bg	5,2:1AA	10,6:1AAA
--burung · --bg	5,1:1AA	10,6:1AAA

Oranye Oyen dan biru mineral lolos sebagai teks, tetapi tetap warna pendamping. Garis tipis (--border) sengaja redup dan tidak dipakai untuk teks.

01.3 — Tipografi

Huruf yang rapat dan tenang.

Tiga keluarga, satu skala. Judul display rapat dan seimbang (text-wrap: balance); isi lega; label kecil kapital. Tidak ada komponen Typography — cukup kelas berikut.

Aa Gg 1234 Inter Tight font-sans Judul, isi, kontrol. Variabel 100–900.
Aa Gg 1234 Instrument Serif font-serif italic Aksen miring di ujung judul; tidak untuk isi.
Aa Gg 1234 IBM Plex Mono font-mono Angka, kode, nomor invoice, label teknis.

h1 · display display text-6xl sm:text-8xl: Teliti.
h2 · display display text-4xl sm:text-5xl: Dikerjakan sendiri
h3 text-2xl font-semibold: Ruang lingkup yang jelas
h4 text-xl font-semibold: Sebelum kode pertama
Lead text-lg leading-relaxed text-muted: Dari desain sampai server, dijelaskan dengan bahasa yang mudah.
Paragraf leading-relaxed: Ruang lingkup dan harga ditulis sebelum kode pertama, lalu diperiksa bersama.
Aksen serif font-serif text-4xl italic: dengan teliti.
Label label: Paket 02 — Rekomendasi
Kontrol ui text-xs: Kirim pesan
Angka font-mono text-sm tabular-nums: INV/2026/014 · Rp 6.500.000
Kecil text-sm text-muted: Diperbarui 20 Oktober 2026.

Kutipan · daftar · kode sebaris

Polanya ketemu. Coba satu langkah lagi.

Satu gagasan per butir.
Kalimat pendek, kata kerja di depan.

Impor dari #lib/ui/button.svelte.

Aturan

Satu display per layar. Judul raksasa memimpin; sisanya tunduk pada skala isi.

Serif hanya aksen. Dua sampai tiga kata di ujung judul. Di bahasa Jepang dan Tionghoa serif miring diganti tebal biasa.

Angka selalu mono. Tabular supaya kolom harga dan waktu rata.

01.4 — Garis & bayangan

Siku, 2 px, bayangan keras.

Tidak ada sudut membulat, tidak ada bayangan lembut. Kedalaman datang dari garis tegas dan bayangan pejal yang bergeser.

Garis tegasborder-border-strong

Pemisahborder-border

Melayangshadow-pop

Kosong · seretborder-dashed

Cincin fokus · tekan Tab di sini

Tautan

.focus-ring memberi outline kobalt 2 px berjarak 2 px pada setiap kontrol. Outline, bukan box-shadow, supaya tetap tampil di mode kontras tinggi. Area sentuh kontrol kecil diperluas ke ≥ 24 px dengan after:-inset-[3px].

01.5 — Grid

Dua belas kolom.

Label di kolom 1–3, judul dan isi di 4–12. Pola yang sama dipakai setiap bagian situs dan buku ini, termasuk kepala bagian di atas.

Kolom 1–3 · label

Kolom 4–12 · judul dan isi. Di ponsel keduanya bertumpuk dengan gutter 16 px. Kisi bergaris (sel berbagi garis) memakai Kisi + KisiSel dari lib/ui, seperti kartu bab di sampul.

01.6 — Token gerak UI

Ritme antarmuka.

Durasi dan kurva yang dipakai komponen. Tanggap dan terarah juga hidup sebagai variabel CSS di layout.css; tes gerak.test.ts menjaga angkanya sama dengan GERAK di gerak.ts.

Bandingkan durasi · kurva tegas

Reduced motion memendekkan semua transisi menjadi instan.
Ritme	Durasi	Variabel CSS	Dipakai untuk
tanggap	160 ms	--gerak-tanggap	Tekan, hover, toggle, tooltip
terarah	280 ms	--gerak-terarah	Panel, dialog, akordeon, perubahan keadaan
ekspresif	520 ms	— (karakter)	Antisipasi dan lompatan kecil karakter
bercerita	900 ms	— (karakter)	Rangkaian perayaan yang kembali tenang

tenang cubic-bezier(0.2, 0.8, 0.2, 1)

tegas cubic-bezier(0.4, 0, 0.2, 1)

Jarak: kecil 4pxsedang 12pxlompat 28px
Skala: tekan 0.96antisipasi 0.94pulih 1.03
Keluar: --gerak-keluar 140 ms: elemen keluar lebih cepat daripada masuk, supaya antarmuka terasa ringan saat ditutup.