Fondasi

Warna

Swatch dibaca langsung dari tokens.css. Setiap token punya asal di kode; nilai kembar dilipat sesuai peta di bawah.

Teal

600 adalah primary (COLORS.primary di mobile): harga, ikon aktif, fokus. 500 fill tombol primer di mobile. 400 teal terang (web dan CMS). 700/800 teks dan tombol yang perlu lulus kontras: 800 dipakai sebagai hover di web dan lulus AA dengan teks putih (4.88:1). 900 adalah usulan kit untuk hover tombol aksi. Cyan #1BB3C5 dipakai di web dan jadi warna utama CMS.

Ink (navy, neutral utama)

500 (muted) dipakai untuk lokasi, label, dan nav tidak aktif, tapi hanya 3.10:1 di atas putih. 400 adalah placeholder aslinya (2.46:1).

Forest (hijau tua)

Dipakai di halaman booking web (booking-initiate.css) sebagai warna teks dan judul, berdampingan dengan navy di halaman lain. Dua keluarga ink dalam satu produk: kandidat untuk disatukan, belum diputuskan.

Surface & garis

Latar halaman putih murni (web dan mobile). Draf awal menyebut warm off-white, tapi kode tidak memakainya, jadi kit mengikuti kode. line #E1EDE9 (hijau muda) adalah border kartu dan section yang paling sering muncul.

Semantic (usulan kit)

Kode memakai skala oklch yang chroma-nya di luar gamut sRGB, sehingga render-nya ter-clamp, dan komponen justru memakai hex langsung. Pasangan bg/fg di sini adalah usulan kit; merah solid mengikuti mobile (#EF4444).

Peta nilai di kode ke token

Jumlah adalah kemunculan hex di kode sumber (web: src/**/*.css,svelte; mobile: src/**). Pasti berarti nilainya sama persis atau token resmi di kode. Usulan berarti dilipat ke token terdekat, perlu persetujuan. Belum berarti belum ada token.

Aturan pakai

Kontras

Dihitung langsung di browser dari token (rumus WCAG 2.x). Ambang: 4.5:1 untuk teks normal, 3:1 untuk teks besar dan komponen UI. Baris yang gagal adalah kombinasi yang sudah ada di kode, bukan ciptaan kit.