Radius and Typography
Menambahkan radius dan typography tokens agar hierarchy text serta surface UI tidak berubah-ubah antar component.
Tujuan belajar
- Menggunakan radius token untuk surface dengan peran yang konsisten
- Mendefinisikan typography token untuk body, title, dan supporting text
- Menjaga line-height dan font weight sebagai bagian dari readability, bukan hanya font-size
- Menghindari pemakaian radius serta ukuran text yang berbeda tanpa alasan product
Isi lesson
5 blok- 1.Hierarchy dan surface perlu aturan yang dapat dikenaliBelum selesaiWajib
- 2.Surface dan text mengikuti token yang terbatasBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Hierarchy dan surface perlu aturan yang dapat dikenali
WajibRadius memberi sinyal apakah surface adalah field kecil, card, dialog, atau control yang menempel pada layout. Jika setiap component memilih 6px, 10px, 12px, 14px, dan 16px tanpa pattern, UI terasa tidak sengaja dirancang. Token radius tidak harus banyak: small untuk control, medium untuk card, dan large untuk surface yang benar-benar besar sudah cukup sebagai awal.
Typography juga bukan font-size saja. Title biasanya membutuhkan size, weight, serta line-height yang berbeda dari body atau supporting text. Token typography membantu menjaga hierarchy saat author menambah card atau panel baru. Namun jangan memakai token sebagai alasan memperkecil text terlalu jauh atau mengandalkan font-weight untuk memperbaiki contrast yang buruk. Ukuran, line-height, color, dan ruang di sekitar text perlu dibaca bersama pada viewport nyata.
Bagian ini memengaruhi progres lesson.
Surface dan text mengikuti token yang terbatas
Wajib:root {
--radius-sm: 0.375rem;
--radius-md: 0.75rem;
--font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
--font-size-body: 1rem;
--line-height-body: 1.6;
--font-size-title: 1.25rem;
--line-height-title: 1.3;
--font-weight-title: 700;
}
.course-card {
border-radius: var(--radius-md);
font-family: var(--font-sans);
}
.course-card h2 {
font-size: var(--font-size-title);
font-weight: var(--font-weight-title);
line-height: var(--line-height-title);
}
.course-card p {
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}--radius-md dipakai untuk surface card, sedangkan --radius-sm dapat dipakai untuk control atau badge bila pattern tersebut nyata. Typography token membuat h2 dan paragraph memakai hierarchy yang sama pada banyak card tanpa mengulang angka. Nama token dapat mengikuti sistem project, tetapi jangan mencampur --title-20, --body-large, dan --font-size-3 tanpa convention yang dapat dijelaskan pada consumer berikutnya.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususAdd course radius and typography tokens
Tambahkan radius serta typography tokens agar CourseCard memiliki surface dan hierarchy title/body yang konsisten.
Tujuan awal: Fokus di tab CSS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Token typography mana yang paling membantu menjaga heading card dapat dibaca konsisten?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Radius token membuat hubungan antara control dan surface lebih konsisten.
- Typography token mencakup size, weight, dan line-height sesuai peran text.
- Pilih scale kecil yang sudah memiliki consumer nyata sebelum memperluasnya.
- Visual hierarchy tetap perlu diperiksa dalam context layout, contrast, dan viewport nyata.
- Berikutnya, Button variants memakai token dan union type untuk menjelaskan intent, size, focus, serta disabled state.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Hierarchy dan surface perlu aturan yang dapat dikenali.