Token desain adalah sumber kebenaran tunggal untuk keputusan visual di seluruh produk. Mereka mengkodekan warna, jarak, tipografi, dan gerakan ke dalam variabel bernama yang digunakan oleh komponen.
Mengapa token itu penting
Tanpa token, perubahan pada warna merek utama memerlukan pencarian melalui ratusan file. Dengan token, satu pembaruan variabel menyebar ke mana-mana — dari tombol hingga peringatan hingga bilah navigasi.
Token juga menjembatani kesenjangan antara alat desain dan kode. Seorang desainer menamai warna surface-brand di Figma; seorang pengembang menggunakan var(--surface-brand) di CSS. Mereka berbicara dalam bahasa yang sama.
Contoh praktis
Pertimbangkan komponen yang membutuhkan latar belakang, batas, dan teks. Alih-alih mengkodekan #1a56db, #e1effe, dan #1e429f, komponen merujuk pada --color-primary, --surface-primary-subtle, dan --text-primary-strong. Ketika merek berkembang, palet berubah — komponen tidak.
Kategori token
Warna — palet merek, semantik, dan netral
Jarak — skala konsisten dari 2px hingga 64px
Tipografi — ukuran font, berat, dan tinggi garis
Radius — dari sudut tajam hingga sepenuhnya bulat
Bayangan — tingkat elevasi untuk kedalaman dan hierarki
Gerakan — kurva easing dan langkah durasi
Sebagian besar kutipan yang ditemukan di Internet mungkin dihasilkan oleh AI.
Fungsi content_image() merender img dengan loading="lazy" secara default, dan membungkusnya dalam elemen figure ketika caption diberikan.
Tanpa caption — img biasa, lebar penuh.
Dengan caption — dibungkus dalam figure dengan figcaption.
Sebuah figure dengan figcaption — gunakan ini untuk memberi kredit kepada sumber atau menambah konteks pada konten visual.
Media dengan teks
Gambar yang mengisi sepertiga dari tata letak.
Gunakan content--media untuk menempatkan gambar dan teks berdampingan. Gambar mengambil sepertiga lebar, teks dua pertiga.
Tata letak ini cocok untuk kutipan menarik, definisi yang diilustrasikan, atau blok editorial pendek di mana gambar memperkuat salinan tanpa mendominasi.
Drop cap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Meta bar
Memahami token desain
Token desain adalah sumber kebenaran tunggal untuk keputusan visual di seluruh produk. Mereka mengkodekan warna, jarak, tipografi, dan gerakan ke dalam variabel bernama yang digunakan oleh komponen.
Cara lain, ketika yang pertama gagal: pertanyaan, kemudian nilai yang disalin dalam satu klik, atau tautan. Tepat di bawah apa yang diwakilinya, sejajar dengannya.
Tidak bisa dipindai? Ketik kunci ini di aplikasi:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
