Beranda > Standar Konsistensi Palet
Panduan informatif · ditinjau 2026-08-28

PETATOTO - Satu Tata Bahasa Warna untuk Semua Komponen

Konsistensi bukan berarti seluruh permukaan memakai warna serupa. Setiap token memperoleh tugas yang terbatas: latar membangun kedalaman, teks menjaga bacaan, primer menandai tindakan utama, aksen menunjukkan perhatian, dan border memisahkan komponen tanpa menjadi satu-satunya pembawa makna.

31halaman
Gratisbiaya akses
18+batas usia
2026-08-28tinjauan

Uraian utama

Standar ini menetapkan fungsi latar, panel, teks, primer, aksen, batas, status, dan fokus supaya warna membawa arti yang sama pada setiap halaman.

Konsistensi bukan berarti seluruh permukaan memakai warna serupa. Setiap token memperoleh tugas yang terbatas: latar membangun kedalaman, teks menjaga bacaan, primer menandai tindakan utama, aksen menunjukkan perhatian, dan border memisahkan komponen tanpa menjadi satu-satunya pembawa makna.

  • bg dan bgSoft hanya mengatur lapisan permukaan; keduanya tidak dipakai sebagai warna teks, ikon status, atau tanda keberhasilan.
  • primary melayani tombol tindakan utama dan penekanan terpilih, sedangkan primaryContrast wajib menjadi warna label pada permukaan tersebut.
  • accent dipakai untuk fokus, indikator kecil, dan hubungan kontekstual; accentContrast menjaga teks di atas aksen tetap terbaca.
  • border membantu batas kartu, tetapi keadaan aktif, gagal, atau dipilih selalu mendapat label, ikon, atau bentuk tambahan yang tidak bergantung pada warna.

Komponen dilarang menukar primer dan aksen hanya karena salah satunya terlihat lebih mencolok pada halaman tertentu. Pertukaran tanpa aturan akan membuat tombol, fokus, dan penanda informasi kehilangan pola, sehingga pembaca harus mempelajari ulang arti warna pada setiap topik.

Status semantik seperti informasi, peringatan, kesalahan, dan selesai memerlukan pasangan label serta ikon. Bila variasi warna tambahan dibutuhkan, nilainya harus didaftarkan sebagai token status dengan kontras terukur; mengambil warna langsung dari banner tidak cukup sebagai dasar penggunaan.

Mode terang dan gelap merupakan dua realisasi dari peran yang sama, bukan dua desain yang tidak terkait. Pergantian mode mempertahankan susunan, nama komponen, bobot tindakan, dan urutan fokus, sementara nilai warna berubah untuk menjaga keterbacaan serta suasana visual.

  • Tindakan utama hanya mempunyai satu gaya primer dalam satu konteks keputusan.
  • Tautan teks tetap dikenali melalui dekorasi atau konteks selain perbedaan rona.
  • Outline fokus memiliki ketebalan dan jarak yang terlihat pada seluruh permukaan.
  • Nilai warna baru harus melewati pemeriksa kontras sebelum masuk ke theme.json.
  • Audit pencarian mendeteksi kode warna lokal yang melewati sistem token tanpa izin.

Enam sorotan

Kanvas Halaman

bg #050617 dan #02030C menjadi kanvas paling belakang; komponen tidak membuat salinan heksadesimal lokal untuk peran yang sama.

Permukaan Lunak

bgSoft #121934 dan #0B1127 memberi lapisan kartu, tabel, FAQ, serta bilah fakta dengan hubungan kedalaman yang tetap.

Teks Isi

text #FFF9F2 dan #FFFBF5 digunakan untuk bacaan pokok; teks sekunder memperoleh pengurangan penekanan tanpa jatuh di bawah ambang.

Primer Karang

primary #EF8480 dan #F7948E menandai tindakan utama, sementara #260504 menjadi label kontras pada kedua mode.

Aksen Mint

accent #00FFA1 dan #2BFFAF membingkai fokus serta petunjuk, dipasangkan dengan #00180F ketika menampung tulisan.

Batas Violet

border #7055A4 dan #584184 memisahkan bidang, tetapi tidak menggantikan outline fokus maupun penamaan status.

Ringkasan

Delapan peran tema diperlakukan sebagai kontrak komponen, bukan kotak cat bebas pakai. Perubahan warna harus dilakukan pada token sumber, diuji pada kedua mode, dan ditelusuri ke semua konsumen sebelum diterbitkan; pengecualian lokal memerlukan alasan serta pemeriksaan kontras tersendiri. Ditinjau pada 2026-08-28.

Tanya jawab

Mengapa primer dan aksen harus mempunyai tugas berbeda?

Pemisahan fungsi membuat tindakan utama dan petunjuk perhatian dapat dikenali secara konsisten tanpa persaingan warna yang tidak terkendali.

Bolehkah sebuah kartu memakai warna dari banner secara langsung?

Tidak sebagai kebiasaan; warna perlu dipetakan menjadi token, diuji kontrasnya, dan diberi peran sebelum digunakan oleh komponen.

Apakah border cukup untuk menunjukkan elemen terpilih?

Border saja tidak cukup karena perbedaan warna dan garis tipis dapat luput; tambahkan label, ikon, bentuk, atau keadaan kontrol yang terbaca.

Apa yang harus tetap sama saat mode warna berganti?

Fungsi token, hierarki tindakan, susunan semantik, label, dan urutan fokus tetap konsisten meskipun nilai warna menyesuaikan.

Bagaimana menangani pengecualian palet?

Catat alasan, ruang lingkup, nilai, pasangan kontras, pemilik koreksi, dan hasil uji sebelum pengecualian diizinkan.

Keterangan situs

Identitas dan keterangan situs
PropertiNilai
BrandPETATOTO
Penerbit hukumBelum terverifikasi dari masukan proyek
Domainpiekneobrazy.com
Sudut pandangPusat Audit Visual
Jumlah halaman31
Usia minimum18 tahun