Panduan

Sistem desain Cari.Talenta

Satu bahasa visual untuk web dan mobile: tenang, padat informasi, mudah dipindai. Aksi utama selalu satu per area, status selalu memakai teks dan bukan warna saja.

Warna

Tinta teal#0B3D3A · sidebar
Aksi utama#0F766E · tombol
Aksi gelap#0B5A54 · teks tautan
Mint#E3F1EE · sukses, info
Amber#FEF3C7 · teks #92400E
Merah#FEE4E2 · teks #B42318
Latar#F4F7F6
Garis#DCE5E3
Konsol operator platform memakai ungu tua #2D2250 agar tidak tertukar dengan aplikasi tenant.

Tipografi · Plus Jakarta Sans

Judul halaman 28/800
Judul kartu 18/700
Isi teks 15/400, minimal 14 di web dan 15 di mobile.
Keterangan 13/500 untuk bantuan dan catatan
Rp 1.520.000 angka tabular

Komponen

Aksi utamaAksi kedua
DisetujuiMenungguDitolak
Rp 185.000
Kolom isian 48 px

Keadaan layar

  • Memuat: kerangka abu pada bentuk kartu, bukan spinner penuh.
  • Kosong: satu kalimat penjelasan dan satu aksi, misalnya "Belum ada klaim. Ajukan klaim pertama".
  • Galat: pesan di dekat sumbernya dengan cara memperbaiki, data isian tidak hilang.
  • Tanpa jaringan: absen disimpan di perangkat dan tampil "Menunggu sinkron" sampai terkirim.
  • Dikunci: tombol nonaktif disertai alasan, misalnya "Periode sudah dikunci".

Aturan pakai

  • Target sentuh minimal 44 px di mobile dan web.
  • Kontras teks minimal 4,5 banding 1, termasuk teks pada chip.
  • Status memakai teks, ikon, atau keduanya, tidak pernah warna saja.
  • Data sensitif (gaji, biometrik) tampil terselubung sampai dibuka dengan peran yang berhak.
  • Setiap perubahan kebijakan menampilkan pratinjau dampak sebelum publikasi.
  • Semua angka dan nama pada desain ini adalah contoh.