Design Token | Fathul

Design token itu atom-nya sebuah tema. Ubah satu, semua komponen yang pakai token itu ikut bergeser bareng. Post ini me-render semua token yang ada di src/styles/global.css biar seluruh sistem terlihat sekaligus — dan biar gampang ketahuan kalau ada yang geser di mode terang atau gelap pas lagi di-tune.

Coba toggle tema pakai tombol di nav (atau biarkan ikut OS kamu) dan semua swatch di halaman ini ikut berubah. Itu intinya semantic token: nama sama, tapi nilainya beda di tiap mode.

Warna

Semua warna itu CSS variable yang di-scope ke :root buat mode terang dan .dark buat mode gelap. Komponen mereferensikan token berdasarkan tujuan, bukan nilainya langsung, jadi mode bisa bertukar tanpa menyentuh satu pun file komponen.

Surface

Background dan panel card. Background utama yang menahan halaman; sisanya variasi berlapis di atasnya.

—bg

Background halaman utama

—bg-secondary

Background sekunder, kontras tipis

—card-bg

Background card dan tag pill

—tag-bg

Background tag lama (nada hangat)

Teks

Tiga level penekanan baca. Primary buat konten utama, secondary buat caption dan copy pendukung, muted buat label mono meta dan tanggal.

—text

Seekor rubah coklat cepat melompati anjing malas

—text-secondary

Seekor rubah coklat cepat melompati anjing malas

—text-muted

Seekor rubah coklat cepat melompati anjing malas

—tag-text

Seekor rubah coklat cepat melompati anjing malas

Aksen

Emas hangat yang jadi identitas brand. --accent itu basis-nya; --accent-hover buat state interaktif; --accent-light versi desaturasi buat underline dan highlight tipis.

—accent

Aksen utama

—accent-hover

State hover

—accent-light

Desaturasi

Contoh aksen saat dipakai:

Ini teks body dengan frasa yang di-highlight dan

link bergaris bawah

pakai keluarga warna aksen.

Border

Dua bobot border — primary buat pemisah section, subtle buat pemisah card.

—border

Pemisah section utama

—border-light

Pemisah card, garis tipis

Tipografi

Delapan token teks semantik. Masing-masing memetakan ke font-size dan line-height yang cocok lewat directive @theme Tailwind 4, jadi nyetel skala cukup di satu file saja.

Aturannya: kasih nama berdasarkan tujuan, jangan berdasarkan ukuran. Waktu semua text-[Npx] di codebase diganti pakai token ini, halaman utama langsung jauh lebih mudah dipahami.

text-lead

Seekor rubah coklat cepat

text-name

Seekor rubah coklat cepat

text-heading

Seekor rubah coklat cepat melompat

text-card

Seekor rubah coklat cepat melompat

text-body

Seekor rubah coklat cepat melompati anjing malas

text-caption

Seekor rubah coklat cepat melompati anjing malas

text-meta

Seekor rubah coklat cepat melompati anjing malas

text-micro

Seekor rubah coklat cepat melompati anjing malas

Token	Ukuran	Line height	Dipake buat
`text-micro`	10px	1.4	Tag pill, badge tipe
`text-meta`	11px	1.5	Tanggal, label mono meta
`text-caption`	14px	1.55	Deskripsi card
`text-body`	16px	1.65	Register baca utama
`text-card`	17px	1.35	Judul card post dan project
`text-heading`	18px	1.3	Heading section
`text-name`	20px	1.15	Nama hero
`text-lead`	22px	1.5	Tagline hero

Keluarga Font

Dua keluarga, sudah cukup: sans buat baca dan mono buat metadata, code, dan apa pun yang ingin terlihat “system-native.”

—font-sans

Geist — Sans yang clean dan modern, didesain buat interface. Seekor rubah coklat cepat melompati anjing malas. 0123456789

—font-mono

Geist Mono — Monospace buat code dan meta. Seekor rubah coklat cepat melompati anjing malas. 0123456789

Di Mana Token Ini Tinggal

Semua token di post ini didefinisikan di satu file:

src/styles/global.css

Skala tipografi ada di blok @theme paling atas. Palet warna ada di @layer base dengan dua blok — :root buat mode terang dan .dark buat mode gelap. Komponen mereferensikan token lewat utilitas Tailwind (text-body, bg-[var(--bg)], border-[var(--border)], dll.) jadi nggak ada nilai hardcoded di mana pun di component tree.

Kalau ada token yang keliatan salah di halaman ini di mode mana pun, fix-nya masuk ke satu file itu dan semua komponen update di reload berikutnya.

Post ini sengaja featured: false. Ini referensi, bukan showcase — nggak seharusnya maksa masuk ke daftar featured di halaman utama. Cari lewat /content atau tag design-system.