Warna

Tiga palet brand, diturunkan dari warna resmi W4C. Komponen tidak memakai palet ini langsung. Komponen memakai token semantik, supaya dark mode dan perubahan brand cukup diatur di satu tempat.

Palet brand

Kotak bertanda brand adalah warna resmi. Langkah lainnya dihitung di ruang warna OKLCH supaya terang-gelapnya naik secara merata.

primary

Warna utama W4C (#1C9DBD). Dipakai untuk aksi utama, link, fokus, dan elemen aktif.

50

#ebfaff

100

#d7f2fc

200

#b4e6f6

300

#87d5ed

400

#54bad8

brand

500

#1c9dbd

600

#0a819d

700

#096b83

800

#02566a

900

#014555

950

#002e3a

navy

Warna navigasi W4C (#121D2C), sekaligus skala abu-abu untuk teks, border, dan latar.

50

#f8fafc

100

#f0f3f7

200

#e0e6ed

300

#c9d2dd

400

#9aa6b6

500

#748194

600

#576476

700

#3f4b5d

800

#283444

brand

900

#121d2c

950

#06101e

green

Hijau logo W4C (#84C15D). Dasar warna success. Terlalu terang untuk teks putih di atasnya.

50

#f2fced

100

#e4f7da

200

#cbeeb8

300

#addf90

brand

400

#84c15d

500

#6aa541

600

#4c8222

700

#3a6913

800

#2d530e

900

#23410b

950

#132b01

Token semantik

Pakai ini di halaman dan komponen: bg-surface-raised, text-content-muted, border-border, bg-primary-soft. Nilainya otomatis berganti di mode gelap. Coba ganti tema lewat tombol di kanan atas.

Permukaan & teks

--color-surface

Latar halaman

--color-surface-muted

Latar hover, area sekunder

--color-surface-raised

Kartu, input, popover

--color-border

Garis pemisah, border kartu

--color-border-strong

Border input dan tombol outline

--color-content

Teks utama

--color-content-muted

Teks pendukung

--color-content-subtle

Placeholder, label kecil

--color-shell

Sidebar dan topbar (navigasi)

Tone (primary, neutral, success, warning, danger)

--color-primary

Isi tombol solid

--color-primary-hover

Isi tombol solid saat hover

--color-primary-content

Teks di atas isi solid

--color-primary-soft

Latar lembut (badge, tombol soft)

--color-primary-text

Tone sebagai warna teks di atas surface

--color-success

Sama, untuk status berhasil

--color-warning

Sama, untuk peringatan

--color-danger

Sama, untuk error dan aksi merusak

Warna kode

Dipakai W4cCodeBlock untuk mewarnai sintaks. Latar kode selalu gelap di kedua mode, dan setiap warna di bawah punya kontras minimal 4.5:1 terhadapnya.

--w4c-code-foreground

Teks biasa

--w4c-code-token-keyword

const, export, if, return

--w4c-code-token-string

String: 'Simpan'

--w4c-code-token-function

Nama fungsi, perintah bash

--w4c-code-token-constant

Angka, konstanta, nama variabel

--w4c-code-token-punctuation

Tanda baca

--w4c-code-token-comment

Komentar

--w4c-code-token-link

URL