Warna
Sumber: Brand Book 1.0 hlm. 37–41.
Warna inti (hlm. 38)
| Nama | HEX | RGB | Peran |
|---|---|---|---|
| Rich Green | #0A3A3C | 10, 58, 60 | Warna utama. Kepercayaan, stabilitas, keahlian |
| Pastel Green | #69CF72 | 105, 207, 114 | Segar, mudah didekati, berorientasi pertumbuhan |
| White | #FFFFFF | 255, 255, 255 | Kejelasan, kesederhanaan, ruang |
Warna sekunder (hlm. 39)
| Nama | HEX | RGB |
|---|---|---|
| Mint Green | #6BE3A3 | 107, 227, 163 |
| Soft Green | #A8F0C6 | 168, 240, 198 |
| Dark Cyan | #0C7C7C | 12, 124, 124 |
Dipakai untuk memberi kedalaman dan keluwesan di komunikasi merek. Tidak menggantikan warna inti.
Warna pendukung (hlm. 41)
Warna fungsional untuk umpan balik sistem. Bukan bagian dari identitas inti. Nama peran dibaca dari contoh callout di Brand Book.
| Peran | HEX |
|---|---|
| Default | #231F20 |
| Success | #19AF66 |
| Danger | #F35746 |
| Warning | #F8BF00 |
| Inverted | #FAFAFA |
Kontras [temuan]
Brand Book tidak mencantumkan rasio kontras. Angka di bawah dihitung dengan rumus WCAG 2.1. Batas AA: 4,5 untuk teks biasa, 3 untuk teks besar (24 px ke atas, atau 19 px tebal).
| Teks | Latar | Rasio | Teks biasa | Teks besar |
|---|---|---|---|---|
| White | Rich Green | 12,47 | Lolos | Lolos |
| Pastel Green | Rich Green | 6,40 | Lolos | Lolos |
| Rich Green | Pastel Green | 6,40 | Lolos | Lolos |
| Rich Green | Mint Green | 7,81 | Lolos | Lolos |
| Rich Green | Soft Green | 9,47 | Lolos | Lolos |
| White | Dark Cyan | 5,01 | Lolos | Lolos |
| White | Pastel Green | 1,95 | Gagal | Gagal |
| White | Success #19AF66 | 2,85 | Gagal | Gagal |
| White | Danger #F35746 | 3,35 | Gagal | Lolos |
| White | Warning #F8BF00 | 1,69 | Gagal | Gagal |
Default #231F20 | Warning #F8BF00 | 9,66 | Lolos | Lolos |
Akibatnya:
- Jangan menaruh teks putih di atas Pastel Green. Pakai Rich Green.
- Callout Success dan Warning dengan teks putih tidak memenuhi AA. Pakai teks gelap, atau pakai warnanya hanya sebagai garis tepi dan ikon.
- Warna tidak boleh menjadi satu-satunya pembawa arti. Sertakan ikon atau teks.
Tombol (hlm. 40)
Brand Book menunjukkan tombol dalam keadaan hover, normal, action, dan disabled, di latar terang dan gelap. Nilai persisnya ada di Figma.