Warna
Biru adalah warna Patepang di mana pun: biru lembut untuk identitas, biru dalam untuk yang bisa ditekan, navy dan ivory di sekelilingnya. Aprikot disimpan untuk kenangan.
Warna merek
#Patepang punya satu warna, dalam dua kekuatan. Biru lembut adalah biru ikon aplikasi: ia mengatakan siapa kami, dan tidak pernah diminta membawa kata-kata. Biru dalam adalah biru yang sama dengan bobot yang cukup untuk dibaca dan ditekan.
Navy dan ivory memegang sisanya: navy untuk kata-kata, ivory untuk latar. Biru pucat dan putih melengkapinya. Aprikot sengaja berdiri sendiri dan hanya punya satu tugas.
- Biru lembut#61A8DCIdentitas Patepang: ikon aplikasi, logo di atas ivory, navy, dan biru pucat mulai lebar 160 px, dan kamu di setiap ilustrasi. Tidak pernah kata-kata, tidak pernah kontrol.
- Biru dalam#245C8FYang bisa ditekan dan diikuti: tombol utama, tautan, cincin fokus. Juga logo di latar terang di bawah 160 px, dan cetak satu tinta.
- Navy#18273AKata-kata di latar terang, dan latar gelap itu sendiri: footer, ikon aplikasi gelap.
- Ivory#F7F5F0Kanvas tempat semuanya duduk, dan kata-kata di latar gelap.
- Biru pucat#E2ECF5Bidang tenang: chip terpilih, kartu yang disisihkan. Yang berdiri di atasnya biru dalam.
- Putih#FFFFFFLogo di atas biru lembut dan biru dalam, dan kata-kata di tombol biru dalam.
- Aprikot#E7956CHanya kenangan: panyecek wordmark di momen kenangan, dan tiga ilustrasi momen.
Peran di antarmuka
#Antarmuka tidak pernah membaca warna dari namanya. Ia membaca peran: kanvas, teks, tombol utama. Setiap peran punya nilai untuk skema terang dan nilai untuk skema gelap, dan layar yang memakai peran mengikuti skema tanpa kerja tambahan.
Peran di bawah ini yang dipakai situs hari ini. Tema aplikasi punya peran untuk tugas yang sama dengan nama di kolom terakhir.
| Peran | Terang | Gelap | Situs dan aplikasi |
|---|---|---|---|
| Kanvas | #F7F5F0 | #0F1824 | --canvas · canvas |
| Permukaan terangkat | #FFFEFB | #172334 | --raised · surface.raised |
| Permukaan tenggelam | #EFECE5 | #0B121C | --sunken · surface.sunken |
| Teks | #18273A | #F2EFE8 | --ink · text.primary |
| Teks kedua | #4B5869 | #C6D0DC | --ink-2 · text.secondary |
| Keterangan | #66717F | #9AA6B4 | --ink-3 · text.tertiary |
| Garis tipis | #E3DFD6 | #26344A | --line · border.subtle |
| Garis tegas | #8792A0 | #6E7C8F | --line-strong · border.strong |
| Tautan | #245C8F | #8DBDEB | --link · brand.text |
| Tombol utama | #245C8F | #61A8DC | --btn · brand.solid |
| Kata di tombol utama | #FFFFFF | #0F1824 | --on-btn · brand.onSolid |
| Cincin fokus | #245C8F | #8DBDEB | --focus · border.focus |
| Rona merek | #E2ECF5 | #1A2B42 | --brand-subtle · brand.subtle |
| Kata di rona merek | #245C8F | #A9CBEA | --on-brand-subtle · brand.onSubtle |
| Latar dalam | #18273A | #0B121C | --deep · hero.top |
| Kata di latar dalam | #F7F5F0 | #F2EFE8 | --deep-ink · hero.ink |
| Bidang biru lembut | #61A8DC | #245C8F | --sky · accent.decor |
| Kata di bidang biru lembut | #18273A | #F2EFE8 | --on-sky · text.primary |
Kontras yang diukur
#Setiap pasangan yang membawa kata atau menandai kontrol diukur dengan rumus WCAG 2.2, di kedua skema, dan tidak dipakai sebelum lolos: 4,5 : 1 untuk kata, 3 : 1 untuk cincin fokus.
Angka-angka ini dihitung dari nilai di halaman ini setiap kali situs dibangun, jadi tidak bisa bergeser darinya.
| Pasangan | Terang | Gelap | Paling sedikit |
|---|---|---|---|
| Teks | 13,86 : 1 | 15,54 : 1 | 4,5 : 1 |
| Teks kedua | 6,65 : 1 | 11,44 : 1 | 4,5 : 1 |
| Keterangan | 4,55 : 1 | 7,21 : 1 | 4,5 : 1 |
| Keterangan di kartu | 4,92 : 1 | 6,40 : 1 | 4,5 : 1 |
| Tautan | 6,42 : 1 | 9,02 : 1 | 4,5 : 1 |
| Tombol utama | 6,99 : 1 | 6,92 : 1 | 4,5 : 1 |
| Chip terpilih | 5,85 : 1 | 8,46 : 1 | 4,5 : 1 |
| Footer | 13,86 : 1 | 16,36 : 1 | 4,5 : 1 |
| Kata di biru lembut | 5,86 : 1 | 6,09 : 1 | 4,5 : 1 |
| Cincin fokus | 6,42 : 1 | 9,02 : 1 | 3 : 1 |
Biru lembut tidak termasuk. Ia hanya mencapai 2,58 : 1 di bawah putih dan 2,37 : 1 di atas ivory, karena itu tidak pernah membawa kata dan tidak pernah menandai kontrol. Kata di atas bidang biru lembut berwarna navy (5,86 : 1).
Warna pendukung
#Warna-warna ini berdiri di samping biru dan tidak pernah menggantikannya. Di ilustrasi, warna adalah orang: biru lembut selalu kamu, dan yang lain adalah orang yang kamu temui.
- Hijau hutan#1F5F4FOrang lain di ilustrasi.
- Daun#5DA78BOrang lain di ilustrasi.
- Amber#F0C468Orang lain, matahari, bulan, dan nyala di ilustrasi; kata peringatan di latar gelap.
- Biru muda#A9CBEAOrang lain dan bekas di ilustrasi; teks kedua di latar dalam.
- Bata#A0461EKenangan, saat aprikot harus membawa kata di latar terang.
Dua belas pigmen ilustrasi, dengan pasangannya untuk kertas gelap, ada di Ilustrasi.
Warna status
#Warna status mengatakan sesuatu berhasil, perlu dilihat, atau gagal. Ia selalu datang bersama ikon atau kata, karena warna saja bukan pesan, dan tidak pernah dipakai untuk menghias atau membedakan orang di antarmuka.
| Status | Terang | Gelap | Mengatakan |
|---|---|---|---|
| Berhasil | #2C6936 · #E3F0E4 | #8FD09B · #1C2B1F | Sesuatu berhasil. |
| Peringatan | #7A5200 · #FBEFD3 | #F0C468 · #2E2716 | Sesuatu perlu dilihat: koneksi yang memudar, sebuah draf. |
| Bahaya | #B0261D · #FBE7E4 | #FF9C90 · #3A1E1B | Sesuatu gagal, atau sebuah aksi menghapus atau mengakhiri sesuatu. |
| Informasi | #245C8F · #E2ECF5 | #8DBDEB · #18273A | Sesuatu untuk diketahui, tanpa aksi. |
Aturan
#Lakukan
- Pakai biru dalam untuk satu aksi utama di sebuah layar, untuk tautan, dan untuk cincin fokus.
- Taruh kata navy di atas ivory, dan kata ivory di atas navy.
- Simpan aprikot untuk kenangan: panyecek di momen kenangan, dan ilustrasi momen.
- Baca warna dari peran di kode, supaya kedua skema benar sekaligus.
- Pasangkan setiap warna status dengan ikon atau kata.
Jangan
- Menulis kata, ikon yang harus terbaca, atau tepi kontrol dengan biru lembut.
- Memakai biru untuk hover, tekan, atau pilihan: semuanya punya rona tenangnya sendiri.
- Menambah gradasi, pendar, atau warna hias kedua.
- Memakai hitam. Kata-kata berwarna navy; hanya cetak satu tinta yang tidak bisa biru yang hitam atau putih, penuh.
- Menimpa foto orang dengan warna.
Setiap nilai di halaman ini juga tersedia sebagai berkas: tokens.json dan tokens.css.
Yang belum selaras
#Biru untuk semua diputuskan pada 11 November 2026. Logo, ikon aplikasi, dan situs sudah mengikutinya. Yang belum:
- Tombol utama dan kata berwarna merek di aplikasi masih hijau hutan (brand.solid #1F5F4F, dan #7FCDB4 di tema gelap). Keduanya pindah ke biru dalam.
- Kata-kata di aplikasi berwarna arang hangat (#22201C) dan tema gelapnya berdiri di latar arang (#141513). Kata pindah ke navy; latar gelapnya diputuskan bersama perpindahan itu.
- Motif dua titik di aplikasi menggambar satu titik hijau hutan dan satu titik aprikot. Menurut aturan di sini, kamu biru lembut dan aprikot hanya untuk kenangan.
- Di situs, berhasil dan bahaya dekat dengan nilai aplikasi tetapi tidak sama (--ok #1F6B4A, --bad #A03A2A).
- Di situs, garis tegas (--line-strong #8792A0) mencapai 2,90 : 1 di atas kanvas. Bila ia satu-satunya tepi sebuah kontrol, ia butuh 3 : 1; nilai aplikasi untuk peran itu (#8A8378) lolos.
Masing-masing ditutup di reponya sendiri, dan halaman ini diperbarui saat itu terjadi.