Sistem desain menjaga konsistensi visual dan mempercepat pengembangan. Section ini membahas membangun design tokens, skala warna, tipografi, dan spacing, lalu menyusunnya menjadi tema terang dan gelap yang mudah ditukar.

# Design Tokens

Susun design tokens menjadi sistem tiga tier yang terarah: nilai primitive, alias semantik, dan konsumsi di tingkat komponen.

Buka → # Color Palettes

Bangun palet warna berupa ramp 50-900 untuk warna netral dan aksen, lalu turunkan variasinya dengan color-mix().

Buka → # Typography Scale

Susun skala tipografi berbasis rasio 1.25 sebagai custom properties agar hierarki teks konsisten di seluruh sistem desain.

Buka → # Spacing Scale

Terapkan skala spasi berbasis kelipatan 4px sebagai custom properties untuk padding, margin, dan gap yang konsisten.

Buka → # Component States

Rancang hover, focus, active, dan disabled sebagai kontrak visual per state yang konsisten untuk setiap komponen.

Buka → # Dark Mode

Bangun dark mode dengan token semantik, media query prefers-color-scheme, dan fungsi light-dark().

Buka → # Prefers-color-scheme

Kenali media query prefers-color-scheme, perilaku default headless, emulasi DevTools, dan kombinasinya dengan override data-tema.

Buka → # Theme Switching Overview

Rangkai pola theme switching lengkap: atribut data-tema, penimpaan token, transisi halus, dan penyimpanan preferensi dengan localStorage.

Buka → # Reusable Design System

Tutup section dengan prinsip sistem desain yang dapat dipakai ulang: tokens, komponen inti, dokumentasi, versioning, dan checklist adopsinya.

Buka →