Skip to content
CARAKA · SISTEM WARNA
v1.0 · METODE DIFERENSIAL

Lebih sedikit hue, bukan lebih banyak

Sistem ini disusun dengan metode diferensial: setiap warna diuji jarak perseptualnya (ΔE OKLab) terhadap semua warna lain — dalam penglihatan normal, deuteranopia, dan protanopia — dan hanya diterima bila jaraknya di atas ambang.

Pengujian itu membalik rencana awal. Saya menyisir seluruh roda warna untuk mencari hue secondary dan tertiary. Kandidat terbaik hanya mencapai ΔE 13,2 — di bawah ambang aman 15. Enam warna status Telegram sudah memenuhi roda warna; hue baru apa pun pasti bertabrakan dengan salah satunya.

KEPUTUSAN
Satu hue merek. Kesumba, dengan tangga nada penuh.
Secondary & tertiary bukan hue baru — diturunkan dari netral dingin dan dari kesumba itu sendiri.
Status terkunci pada enam warna ikon topic Telegram. Tidak bisa diubah.
Warna tidak pernah jadi satu-satunya sinyal. Buktinya ada di §4.
PRIMARYKesumbamerek, gerbang aktif, aksi utama
SECONDARYNetral dingin90% permukaan, teks, batas
TERTIARYPermukaan bernadabaris aktif, sorotan, kartu terpilih
SEMANTIKEnam statusterkunci pada ikon topic Telegram
01 · PRIMARY — KESUMBA

Tangga nada dibangun di ruang OKLCH pada hue tetap 31,8°, dengan lightness berjarak perseptual seragam dan chroma meruncing di kedua ujung. Inilah sebabnya nada 50 dan 950 tidak terlihat "berlumpur" seperti ramp yang dibuat dengan mencampur putih dan hitam.

50
#FFEDE7
100
#FFE0D8
200
#FFC9BC
300
#FFA694
400
#FF7A5E
500
#E2452C
600
#C02F17
700
#952C1B
800
#6F271B
900
#492019
950
#2B1612
TUGAS TIAP NADA
50 – 200latar terang, badge lembut
300batas fokus di latar terang
400teks & tautan di latar gelap · AAA
500warna merek · lambang · tombol utama
600hover tombol
700 – 800aktif / ditekan · batas
900 – 950permukaan bernada di latar gelap
ATURAN PENTING

Kesumba 500 tidak boleh dipakai untuk teks. Di atas void ia hanya mencapai 4,89:1 — cukup untuk elemen besar, tidak untuk teks kecil.

Untuk teks dan tautan di latar gelap, pakai kesumba 400 #FF7A5E — 7,83:1, lolos AAA.

Di atas kesumba 500, tinta tergelap #07090D hanya mencapai 4,86:1 — jadi label di dalam tombol kesumba wajib berukuran ≥ 16px atau tebal.

02 · SECONDARY — NETRAL DINGIN

Membawa 90% permukaan produk. Bukan abu-abu murni: hue dikunci di 250° dengan chroma 0,005–0,020 — cukup untuk terasa dingin dan teknis, terlalu rendah untuk bersaing dengan kesumba.

000
#05080C
050
#0C1116
100
#171C22
200
#292E35
300
#414950
400
#5D666F
500
#7A848F
600
#95A0AB
700
#B2BCC6
800
#D2D8DF
900
#E9EDF2
950
#F6F9FC
KONTRAS TEKS DI n-000
n-950 · #F6F9FC18,99AAA
n-900 · #E9EDF217,07AAA
n-800 · #D2D8DF13,98AAA
n-700 · #B2BCC610,42AAA
n-600 · #95A0AB7,54AAA
n-500 · #7A848F5,28AA
n-400 · #5D666F3,44hanya teks besar
TUGAS
n-000latar terdalam
n-050panel, kartu
n-100batas, pemisah
n-200batas kuat, input
n-400teks nonaktif · besar saja
n-500 – 600label, metadata
n-700 – 800teks pendukung
n-900 – 950teks utama
03 · TERTIARY — PERMUKAAN BERNADA KESUMBA

Bukan hue ketiga. Ini kesumba pada chroma sangat rendah (0,010–0,030), dipakai untuk permukaan yang harus terasa "milik merek" tanpa berteriak: latar kartu aktif, sorotan baris, batas panel yang sedang dipilih.

surface-active#12100Fbaris atau kartu yang sedang aktif
surface-raised#1E1614panel menonjol bernada merek
border-brand#2B1612batas halus milik merek
overlay-brand#492019sorotan, latar badge
CONTOH · DAFTAR SESI
toko-api · rate limit login#a91
toko-api · audit dependency#a92
web · revisi hero#a85

Baris aktif memakai surface-active #12100F — hanya sedikit lebih hangat dari panel di sebelahnya, tetapi cukup untuk terbaca sebagai "yang ini". Penanda kuat justru datang dari batas kiri kesumba dan dari glif status, bukan dari latar.

04 · UJI DIFERENSIAL — TEMUAN PALING PENTING

Warna status terkunci pada enam warna ikon topic Telegram — API hanya menerima keenamnya. Diuji dengan simulasi CVD, himpunan itu gagal. Ini bukan sesuatu yang bisa diperbaiki dengan memilih warna lebih baik; ia harus diselesaikan di lapisan desain.

PENGLIHATAN NORMAL
run
wait
done
fail
canc
terdekat: failed ↔ cancelled = ΔE 11,8

Semua pasangan di atas 11. Cukup — meski failed dan cancelled sudah agak berdekatan.

DEUTERANOPIA
run
wait
done
fail
canc
terdekat: done ↔ cancelled = ΔE 2,5

Hijau dan ungu sama-sama luruh jadi abu yang praktis identik. Kuning dan magenta hanya berjarak 5,0. Gagal telak.

PROTANOPIA
run
wait
done
fail
canc
terdekat: waiting ↔ done = ΔE 3,8

Kuning dan hijau menyatu; magenta justru bergeser ke kuning-hijau. Empat pasangan di bawah ambang.

KONSEKUENSI — ATURAN WAJIB

Warna tidak pernah menjadi satu-satunya sinyal status

Pada deuteranopia, hijau done dan ungu cancelled berjarak ΔE 2,5 — praktis identik. Kuning waiting dan magenta failed berjarak 5,0.

Karena itu setiap status wajib membawa glif teksnya di nama topic. Prefiks bukan hiasan — ia satu-satunya sinyal yang bertahan untuk sekitar 8% pria. Aturan ini sudah ada di spesifikasi; uji ini yang membuktikan bahwa ia tidak boleh dilepas.

running
awaiting
done
failed
cancelled
05 · SEMANTIK — TERKUNCI PADA TELEGRAM

Telegram hanya menerima enam nilai icon_color. Memakai warna lain di UI kita akan memutus hubungan antara apa yang terlihat di daftar topic dan apa yang terlihat di dasbor — jadi keenamnya diadopsi apa adanya.

running#6FB9F07322096
awaiting#FFD67E16766590
done#8EEE989367192
failed#FF93B216749490
cancelled#CB86DB13338331
dikosongkan#FB6F5F16478047

Merah Telegram #FB6F5F sengaja dikosongkan. Jaraknya ke kesumba hanya ΔE 9,9 — terlalu dekat, dan pengguna akan bingung membedakan "merek" dari "gagal". Status failed karena itu memakai magenta #FF93B3, yang berjarak aman dari keduanya. Ini satu-satunya perubahan dari pemetaan status sebelumnya.

06 · TOKEN

Token semantik menunjuk ke nada, bukan ke hex. Mengganti seluruh identitas nanti berarti mengubah satu hue di ramp, bukan menyisir ratusan nilai.

/* permukaan */
--surface-basen-000
--surface-paneln-050
--surface-activekesumba-950
--surface-raisedkesumba-900
--border-subtlen-100
--border-strongn-200
--border-brandkesumba-800
--border-focuskesumba-400
/* teks & aksi */
--text-primaryn-900
--text-secondaryn-700
--text-mutedn-500
--text-brandkesumba-400
--action-bgkesumba-500
--action-hoverkesumba-600
--action-inkkesumba-50
--focus-ringkesumba-400
caraka
Satu hue. Sisanya nada.