Advanced · Level 17: Design SystemAdvanced65 menitBahasa Indonesia

Color and Spacing Tokens

Membuat color dan spacing tokens dengan CSS custom properties lalu mengganti nilai visual yang berulang pada UI course.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mendefinisikan color dan spacing tokens pada scope yang sesuai
Menggunakan var() untuk mengganti nilai mentah yang berulang
Membedakan background, text, border, dan action color berdasarkan peran UI
Membuat spacing scale kecil yang lebih konsisten daripada margin satu kali pakai

CSSCSS Custom PropertiesColor TokensSpacing Tokens

Isi lesson

6 blok

1.
Color dan spacing harus menjelaskan hubungan antarelemenBelum selesaiWajib
2.
Token color dan spacing untuk course panelBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Token tidak menjamin contrast secara otomatisBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Color dan spacing harus menjelaskan hubungan antarelemen

Wajib

Color token bukan sekadar mengganti #0f172a menjadi variabel. UI biasanya memiliki peran berbeda: surface, text utama, text muted, border, action primary, dan text di atas action. Memberi nama berdasarkan peran membantu kamu mengubah action color tanpa tidak sengaja mengubah semua text gelap. Hal yang sama berlaku untuk spacing. Ketika gap, padding, dan section spacing memakai beberapa ukuran yang berulang, scale kecil membuat rhythm layout lebih mudah dijaga.

CSS custom properties dideklarasikan dengan prefix -- dan dipakai melalui var(). Scope :root cocok untuk token yang dipakai banyak component; scope component cocok untuk token lokal pattern yang tidak ingin dijadikan aturan halaman. Jangan membuat semua component mendefinisikan --space-4 sendiri dengan nilai berbeda. Pilih beberapa ukuran yang telah muncul di UI dan gunakan secara konsisten, lalu review visual serta contrast setelah refactor.

Bagian ini memengaruhi progres lesson.

Token color dan spacing untuk course panel

Wajib

css

:root {
  --color-surface: #ffffff;
  --color-text: #172033;
  --color-text-muted: #536176;
  --color-border-subtle: #d8dee9;
  --color-action-primary: #0f6fda;
  --color-on-action: #ffffff;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
}

.course-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  padding: var(--space-6);
}

.course-panel p {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.course-panel a {
  background: var(--color-action-primary);
  color: var(--color-on-action);
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
}

Token action memiliki pasangan --color-on-action agar foreground dan background dapat direview sebagai satu keputusan contrast. Spacing kecil --space-2, --space-4, dan --space-6 memberi pilihan yang cukup untuk panel ini tanpa membuat setiap pixel menjadi token. Saat value berubah, semua consumer yang memakai role yang sama berubah bersama; periksa apakah itu memang dampak yang diinginkan sebelum mengubah token global.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Create course color and spacing tokens

Buat color dan spacing tokens untuk course panel, lalu gunakan var() pada surface, text, paragraph, dan action link.

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.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mengapa --color-on-action lebih baik daripada memakai --white langsung di semua Button primary?

Progres lesson naik setelah jawaban benar.

Catatan penting

Opsional

Token tidak menjamin contrast secara otomatis

Mengganti color literal dengan token tidak otomatis membuat text dapat dibaca. Periksa pasangan foreground/background pada state default, hover, focus, disabled, dan theme yang tersedia. Jangan hanya mengandalkan warna untuk menyampaikan error atau destructive state; copy, icon, dan semantic structure tetap dapat diperlukan sesuai konteks UI.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Color token diberi nama berdasarkan peran seperti surface, text, border, dan action.
Spacing scale kecil mengurangi margin serta padding satu kali pakai yang tidak konsisten.
CSS custom properties memakai -- saat deklarasi dan var() saat dipakai.
Token global perlu diubah dengan hati-hati karena beberapa consumer dapat ikut berubah.
Berikutnya, radius dan typography tokens melengkapi visual rhythm tanpa menambah nilai acak pada setiap component.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Color dan spacing harus menjelaskan hubungan antarelemen.

Memuat progres Review module