Warna

Warna merupakan elemen yang paling ekspresif dalam bahasa desain kami.

Melalui penggunaan warna, kita dapat mengomunikasikan hierarki, emosi, serta identitas visual di seluruh kementerian.

Sistem warna kami dirancang untuk menggabungkan struktur dan fleksibilitas sehingga dengan mudah dapat diterapkan di berbagai skala produk sambil menjaga harmoni visual dan memenuhi prinsip aksesibilitas.

Warna Dalam Antarmuka

Warna berperan penting dalam menciptakan pengalaman produk yang mudah digunakan dan konsisten di seluruh ekosistem INA Digital Design System.

Setiap warna memiliki fungsi dan makna tersendiri, membantu pengguna memahami hierarki informasi, status sistem, serta identitas lembaga pemerintah yang terlibat.

Palet Warna Produk

Palet warna digunakan untuk menjaga konsistensi dan fleksibilitas antarmuka. Setiap palet memiliki fungsinya masing-masing dalam membangun struktur harmonis.

Brand Primary

Green

Blue

Orange

Red

Neutral

Strategi Warna Pada Produk

Sistem warna kami disusun berdasarkan fungsinya agar mudah diterapkan di berbagai produk pemerintah. Setiap kategori warna memiliki tujuan yang jelas untuk menjaga konsistensi visual dan memperkuat komunikasi desain.

Warna Merek (Brand Color)

Digunakan untuk menampilkan identitas lembaga, misalnya pada elemen seperti header, tombol utama, atau komponen inti produk.

Warna Sentiment (Sentiment Color)

Digunakan untuk menandai status sistem seperti success, error, atau warning, membantu pengguna memahami respons dan kondisi sistem dengan cepat.

Warna Netral (Neutral Color)

Digunakan sebagai warna dasar untuk latar belakang, teks, ikon, maupun elemen pembagi (divider), memastikan keterbacaan dan keseimbangan visual di seluruh antarmuka.

Warna Konten

Negatif

Gunakan warna merah untuk aksi destruktif atau kondisi error.

Positif

Gunakan warna hijau untuk menandai keberhasilan, progres baik, atau konfirmasi.

Netral

Gunakan warna abu-abu untuk teks, latar, dan batas antarelemen.

Panduan

Gunakan warna biru untuk status informatif dan elemen yang bersifat penunjuk.

Token Warna

Gunakan token warna sebagai sistem dasar dalam implementasi warna di produk digital.

Token warna membantu menjaga konsistensi lintas platform (Figma, web, dan mobile) dan mempermudah proses pembaruan warna di masa depan.

Product Mode

Warna harus beradaptasi dengan dua mode utama tampilan: Light Mode dan Dark Mode. Gunakan mode yang sesuai dengan kebutuhan pengguna dan konteks penggunaan aplikasi.

Light Mode

Ideal untuk tampilan umum dan situasi terang. Gunakan warna netral cerah dengan kontras yang cukup terhadap teks.

Dark Mode

Cocok untuk kondisi rendah cahaya. Gunakan warna netral gelap dengan warna utama yang tetap kontras dan nyaman dibaca.

Pastikan kedua mode tetap mempertahankan hierarki visual dan kesan brand yang konsisten.

Brand Mode

Setiap lembaga memiliki varian warna utama yang disesuaikan dengan identitas masing-masing.

Varian ini membantu menjaga konsistensi visual antar produk sekaligus memberikan ruang untuk diferensiasi identitas lembaga.

INAgov Blue (INAgov/500)
PANRB Red (PANRB/600)
LAN Navy (LAN/500)
BKN Magenta (BKN/400)

Pada dark mode, setiap warna brand dioptimalkan agar tetap seimbang secara visual tanpa mengubah karakter lembaga. Hal ini memastikan pengalaman visual yang seimbang di seluruh mode tampilan.