Kartu alat
Gunakan untuk item katalog, metrik, ringkasan fitur, dan pratinjau ringan.
Token
Warna, spasi, radius, dan gerak
Token adalah satu-satunya sumber kebenaran yang diizinkan untuk primitif visual. Halaman baru harus memakainya, bukan mendefinisikannya ulang.
Latar belakang
Permukaan
Aksen
Radius
6 / 10 / 16
Gunakan hanya `sm`, `md`, `lg`.
Spasi
8-32
Sebagian besar UI berada dalam rentang spasi inti.
Gerakan
150-220ms
Transisi harus tetap halus dan cepat.
Tipografi
Hierarki yang mudah dibaca dengan kepadatan ringkas
H1 halaman: identitas utama halaman
Bagian H2: blok konten utama
Grup kartu H3: pengelompokan sekunder
Kartu H4: judul kartu standar
Teks pengantar dikhususkan untuk intro halaman singkat dan keterangan penjelas.
Teks isi adalah lapisan default untuk teks bantuan, deskripsi alat, dan penjelasan hasil.
Keterangan digunakan untuk metadata, penghitung, catatan bidang, dan pembantu sekunder.
Kartu
Wadah konten terstandarisasi
Kartu daftar
Gunakan untuk baris hasil, alat terkait, daftar lompat, atau blok riwayat terbaru.
Kontrol
Tombol, kolom, pil, dan bahasa status
Pola
Komposisi halaman yang dapat digunakan ulang
!
Pemberitahuan utama
Gunakan blok pemberitahuan untuk teks bantuan, pesan privasi, atau batasan alat.
| Lapisan | Kasus penggunaan |
|---|---|
| Token | Warna, tipografi, spasi, gerak |
| Dasar | Primitif tipografi dan tata letak |
| Komponen | Tombol, kartu, kontrol formulir |