Design System.
Sumber acuan untuk panduan merek VGS, pustaka komponen, dan pola desain yang digunakan di semua halaman publik.
Palet Warna
Warna merek dan UI, didefinisikan dalam konfigurasi Tailwind. Gunakan kelas-kelas ini secara konsisten di semua halaman.
Merek
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Skala Abu-abu
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Warna Status
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Tipografi
Dua keluarga font membentuk sistem tipe. Audiowide untuk judul dan teks display, Inter (sans-serif) untuk teks isi dan UI.
Judul font-audiowide uppercase tracking-tight
Judul Tingkat 1
text-4xl md:text-6xl font-audiowide uppercase
Judul Tingkat 2
text-3xl md:text-4xl font-audiowide uppercase
Judul Tingkat 3
text-xl font-audiowide uppercase
Teks Isi Default sans-serif (Inter), text-gray-400 for secondary
Teks isi menggunakan Inter dalam berbagai ukuran. Warna default adalah putih untuk konten utama dan gray-400 untuk deskripsi sekunder dan teks pendukung.
text-lg text-gray-400 leading-relaxed
Label & Keterangan text-xs uppercase tracking-wider text-gray-500
Label Bagian
Tombol
Tombol menggabungkan tiga hal: varian (warna), ukuran, dan efek opsional.
Varian
Ukuran
Efek
.btn-glow is the standard CTA halo. .btn-glow-intense doubles it for the single most important CTA on a page. .btn-shimmer adds a one-shot light sweep on hover. .btn-press adds a micro scale-down on click for tactile feedback.
Penggunaan
<!-- Variant + size + effect compose freely -->
<button class="btn-primary btn-lg btn-glow">Get Started</button>
<button class="btn-secondary btn-md">Learn more</button>
<button class="btn-ghost btn-sm btn-press">Cancel</button>
/* CSS — src/styles/globals.css */
.btn-glow:hover { box-shadow: 0 0 12px rgba(240,230,200,0.15), 0 0 24px rgba(240,230,200,0.05); }
.btn-press:active { transform: scale(0.96); }Permukaan
Kaca, kartu, lencana, dan tab. Kaca bernuansa sampanye adalah permukaan khas VGS.
Kaca
.glass
Standard glass surface. Champagne-tinted backdrop blur, 16px radius. Best for full-width sections and hero overlays.
.glass-card
Slightly stronger explicit variant with a 12px blur. Drop-in replacement when .glass feels too soft.
Kartu
.card
Base translucent card. Padding 6, radius sm.
.card-elevated
Adds a subtle shadow. Use sparingly for elevation.
.card-interactive
Pointer cursor + hover state. Use when the entire card is clickable.
.card-compact
Tighter padding (p-4) — for dense rows and grids.
.card-minimal
Resets background, padding, and border. Used as a wrapper that should not visually exist.
Lencana
Animasi
Animasi yang dipicu gulir bersifat opsional. Keduanya selalu menghormati preferensi gerakan yang dikurangi.
Animasi Gulir
Fade Up
data-animate (default)
Fade Left
data-animate="fade-left"
Fade Right
data-animate="fade-right"
Scale
data-animate="scale"
Staggered Delays
Add data-stagger="100" on a parent container. Child elements with data-animate will automatically receive incremental delays (in ms).
<!-- Staggered children -->
<div data-stagger="100">
<div data-animate>0ms delay</div>
<div data-animate>100ms delay</div>
<div data-animate>200ms delay</div>
</div>Ikon
Halaman publik menggunakan paket ikon Font Awesome Etch — subset terkurasi sekitar 280 ikon dengan estetika konsisten.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Penggunaan
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Penggantian Nama FA Klasik → Etch
Several common classic-FA names do not exist in Etch and have different replacements. Check the CLAUDE.md icon list before adding a new icon.
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin