v0.1
Design System

Semua yang membuat
Kunang terasa Kunang

Satu bahasa visual untuk enam halaman. Klik swatch untuk menyalin kodenya.

1

Palet

Warna inti

Palet ceria

⚠️ Aturan kontras yang wajib dipatuhi

Teks selalu Navy. Nyala, Mint, Sky, dan Lime tidak lolos kontras 4.5:1 sebagai warna teks di atas Cream, jadi ketujuh warna ceria hanya dipakai sebagai fill, outline, atau aksen. Teks yang berada di atas fill berwarna juga tetap Ink, bukan putih.

Satu pengecualian yang ditemukan saat audit: Navy di atas Purple #A55EEA hanya 3.63:1. Cukup untuk judul besar, kurang untuk teks kecil. Hex brand-nya tidak diubah; ditambahkan Purple soft #B77BF0 (4.78:1) khusus untuk fill yang memuat teks kecil. Purple asli tetap dipakai untuk bar, ikon, dan badge.

Label sekunder di atas fill berwarna tidak boleh memakai Dim, karena Dim dikalibrasi untuk krem dan putih. Di atas warna, pakai Navy yang diredupkan (color-mix 76%) supaya ikut latarnya.

✅ Navy di atas Nyala ❌ Putih di atas Nyala ❌ Nyala sebagai teks

Warna per game

⚔️ Dota 2
Coral · Tim 5v5
🎯 CS2
Nyala · Tim 5v5
🛡️ RO Origin Classic
Mint · Guild
🚀 RF NEXT
Sky · Guild
🌍 RO The New World
Purple · Guild
👊 Tekken 8
Orange · Solo 1v1
🔥 Street Fighter 6
Lime · Solo 1v1
✨ Game baru
Ambil warna belum terpakai
2

Tipografi

Display
Baloo 2

Judul, angka besar, nama tier, label tombol. Tebal dan membulat, inilah yang bikin Kunang terasa ramah.

600 · 700 · 800
Body
Nunito

Paragraf, label, tabel, metadata. Bersih dan mudah dibaca dalam ukuran kecil.

400 · 600 · 700 · 800
Skala
Judul H1Baloo 2 800 · clamp(2.6rem, 7vw, 4.8rem)
Judul H2Baloo 2 800 · clamp(1.9rem, 4vw, 2.9rem)
Judul H3Baloo 2 800 · clamp(1.2rem, 2.2vw, 1.5rem)
Lede, kalimat pengantarNunito 600 · 1.05–1.28rem · dim
Body, teks isi maksimal 62 karakter per barisNunito 600 · 16px / 1.6
Meta, keterangan kecilNunito 700 · 0.8rem · dim
EyebrowNunito 800 · 0.74rem · 0.16em · uppercase
7.400 / 10.000tabular-nums untuk semua angka
3

Bentuk & bayangan

Satu aturan yang dipakai di semua komponen: outline tebal, sudut membulat, bayangan keras tanpa blur.

Outline

3px solid var(--navy)

Bayangan keras

5px 5px 0 var(--navy)

Radius

10 · 18 · 28 · 999px
Interaksi

Arahkan kursor ke tombol ini, lalu tekan. Komponen bergerak seperti stiker yang benar-benar ditekan.

hover  → translate(-2px,-2px) · shadow 8px active → translate(3px,3px)   · shadow 3px easing → cubic-bezier(.34, 1.56, .64, 1)
4

Komponen

Tombol

Pill & chip

Netral Nyala Mint Dengan titik 🏆 Dengan emoji

Badge stiker

🏆 🔥 ⭐ 🎖️ 🚀 🔒 hover → naik & miring 6°

Avatar chibi

Prestige II
--skin · --hair · --hs (warna headset) gold · default · sm · xs

Progress & tier

Menuju KUNANG ELITE2.840 / 3.500
🥉 Bronze 🥈 Silver 🥇 Gold 💎 Diamond 👑 KUNANG ELITE

Pita hasil

🏆 Juara 🥈 Runner-up 🥉 Peringkat 3 Semifinal Top 8

Stat & empty state

6
Game aktif
4
Gelar juara
23
Turnamen
18
Badge
🎮

Belum mulai petualangan di sini

Setiap empty state harus mengajak, bukan sekadar memberi tahu bahwa data kosong.

5

Logo & ikon

Tiga aset, satu bahasa. Titik pada counter huruf G adalah nyala kunang-kunangnya, dan jejak terbang putus-putus mendarat tepat di titik itu.

Wordmark kompak

Tanpa jejak terbang. Untuk navbar, footer, dan watermark, di mana jejaknya terlalu ramai.

Simbol app

Nyala dengan ekor meliuk satu lengkungan. Lengkungan itu bahasa yang sama dengan jejak terbang di logo utama, dan yang membedakannya dari komet.

Ikon SVG

Semua ikon flat cartoon dengan outline tebal, dibuat sebagai SVG sprite, bukan file gambar. Untuk ikon game dipakai emoji.

6

Nada copywriting

Semangat, ramah, mengajak. Bukan bahasa proposal.

✅ Pakai ini
"Klaim Passport-mu!"
Ajakan langsung, pakai -mu
"Belum mulai petualangan di sini"
Empty state yang mengundang
"Kamu naik ke Gold! 🎉"
Merayakan, bukan melaporkan
"Sejarahmu ikut kamu"
Manfaat, bukan fitur
❌ Hindari ini
"Silakan melakukan registrasi"
Kaku, terasa formulir kantor
"No data available"
Dingin, dan bukan bahasa kita
"Tier berhasil diperbarui"
Bahasa sistem, bukan bahasa pemain
"Fitur multi-game profile aggregation"
Jargon yang tidak dimengerti siapa pun
7

Token

Semua nilai di atas hidup sebagai CSS custom property di assets/css/kunang.css?v=ef0fe408. Saat pindah ke Next.js, blok ini jadi isi @theme Tailwind v4, dan nama token tidak berubah.

--cream: #FFF8ED;   --navy:   #1E2A4A;   --dim:    #6B6F82;
--nyala: #FFD23F;   --coral:  #FF6B6B;   --mint:   #4ECDC4;
--sky:   #45AAF2;   --purple: #A55EEA;   --orange: #FF9F43;
--lime:  #26DE81;   --haze:   #F0E4D0;   --purple-soft: #B77BF0;

--line: 2.5px;      --pill: 999px;
--r-sm: 10px;  --r-md: 18px;  --r-lg: 28px;  --r-xl: 40px;

--sh-sm: 0 2px 0 var(--navy);   /* lurus ke bawah, bukan diagonal */
--sh:    0 3px 0 var(--navy);
--sh-lg: 0 5px 0 var(--navy);

--bounce: cubic-bezier(.34, 1.56, .64, 1);