Design Tokens and Variants
Membuat token visual sederhana dan variants yang typed agar Button serta Card konsisten tanpa menumpuk nilai CSS satu kali pakai.
Ikuti lesson dari atas ke bawah agar konsepnya nyambung. Kamu tetap bisa membuka lesson mana pun untuk review.
Alur belajar module
Lesson disusun sebagai jalur belajar. Uji Kompetensi di akhir menjadi checkpoint sebelum lanjut module berikutnya.
Design Tokens
Mengenali nilai warna, jarak, radius, dan typography yang berulang lalu memberi nama berdasarkan peran visualnya.
Color and Spacing Tokens
Membuat color dan spacing tokens dengan CSS custom properties lalu mengganti nilai visual yang berulang pada UI course.
Radius and Typography
Menambahkan radius dan typography tokens agar hierarchy text serta surface UI tidak berubah-ubah antar component.
Button Variants
Mendesain Button primary, secondary, dan destructive dengan variant yang typed serta state disabled dan focus yang dapat diakses.
Card Variants
Membuat card default, featured, dan muted sebagai product surface yang tetap menjaga hierarchy content serta tidak berubah menjadi container universal.
Uji Kompetensi Design Tokens and Variants
Membuktikan kesiapan membuat token visual sederhana serta Button dan Card variants yang konsisten, typed, dan dapat diakses.