Foundations/Color System (Palet Warna)

Color System (Palet Warna)

● Ready Web Nuxt 4 + Mobile React Native

Palet warna Zenko berakar pada nuansa Electric Blue yang energik dan profesional, dipadukan dengan latar belakang permukaan netral bertingkat untuk membangun hierarki antarmuka yang bersih dan fokus.

1. Warna Primer Merek (Primary Brand)

Klik pada swatch untuk menyalin kode Hex langsung ke clipboard.

#2F6FEB

Salin Hex

Primary

--color-primary

Warna brand utama, tombol primer, link aktif

#4C86F0

Salin Hex

Primary Light

--color-primary-light

Sisi atas gradien tombol, hover state

#2557C9

Salin Hex

Primary Dark

--color-primary-dark

Sisi bawah gradien tombol, banner CTA

#EAF1FF

Salin Hex

Primary Soft

--color-primary-soft

Background badge ikon, pill aktif

2. Warna Permukaan (Surfaces & Neutral)

Tiga lapis permukaan untuk menciptakan kedalaman bertingkat tanpa drop shadow berat.

#FFFFFF

Salin Hex

Surface

--color-surface

Latar dasar halaman & kartu putih

#F7F8FA

Salin Hex

Surface Alt

--color-surface-alt

Kontainer sekunder, section wrapper

#F4F5F8

Salin Hex

Surface Sunken

--color-surface-sunken

Nampan luar kartu paket, track search

#E8EAEF

Salin Hex

Skeleton

--color-skeleton

Placeholder skeleton loader

3. Tipografi & Kontur Garis (Ink & Lines)

#16161A

Salin Hex

Ink (Main Text)

--color-ink

Heading, teks utama kontras tinggi

#6B7280

Salin Hex

Muted

--color-muted

Teks body paragraf, metadata deskripsi, caption/label kategori

#9AA2B1

Salin Hex

Faint

--color-faint

Gagal AA (2.57:1) — hanya untuk elemen dekoratif/UI besar, bukan teks. Gunakan Muted untuk teks yang harus dibaca.

#98A2B3

Salin Hex

Placeholder

--color-placeholder

Gagal AA (2.58:1) — khusus atribut ::placeholder pada input, bukan teks UI yang selalu tampil.

#E5E7EB

Salin Hex

Line

--color-line

Garis pemisah tabel & input border

4. Status Semantik & Rating

#F59E0B

Salin Hex

Star / Rating

--color-star

Bintang rating ulasan try out

#22C55E

Salin Hex

Success

--color-success

Badge indikator sukses & aktif

#15803D

Salin Hex

Success Ink

--color-success-ink

Teks keterangan lolos / sukses

#E8F8EE

Salin Hex

Success Soft

--color-success-soft

Background badge sukses

#C42132

Salin Hex

Danger

--color-danger

Ikon, border, dot, background tombol solid (dipadukan teks putih)

#7F151F

Salin Hex

Danger Ink

--color-danger-ink

Teks keterangan gagal / error di atas latar terang

#FAEBEC

Salin Hex

Danger Soft

--color-danger-soft

Background badge & alert danger

#D8730E

Salin Hex

Warning

--color-warning

Ikon, border, dot — hindari sebagai teks langsung di atas putih

#A3570A

Salin Hex

Warning Ink

--color-warning-ink

Teks keterangan peringatan di atas latar terang

#FAF2EA

Salin Hex

Warning Soft

--color-warning-soft

Background badge & alert warning

5. Zenko Signature Hero Aurora Gradient

Tampilkan Dot Grid Overlay

Atmospheric Depth Gradient

assets/css/main.css

.hero-aurora {
  background:
    radial-gradient(64% 44% at 50% 118%, rgba(37, 87, 201, 0.62), transparent 64%),
    radial-gradient(54% 44% at 13% 108%, rgba(47, 111, 235, 0.5), transparent 66%),
    radial-gradient(54% 42% at 88% 102%, rgba(76, 134, 240, 0.46), transparent 66%),
    radial-gradient(42% 26% at 70% 88%, rgba(125, 168, 250, 0.32), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #f1f6ff 66%, #dce9ff 82%, #c3d8fb 93%, #b2ccf8 100%);
}