Design System.
Tüm herkese açık sayfalarda kullanılan VGS marka kuralları, bileşen kütüphanesi ve tasarım kalıpları için başvuru kaynağı.
Renk Paleti
Tailwind yapılandırmasında tanımlı marka ve arayüz renkleri. Bu sınıfları tüm sayfalarda tutarlı şekilde kullan.
Marka
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Gri Tonları
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Durum Renkleri
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Tipografi
Tip sistemini iki yazı tipi ailesi oluşturur. Başlıklar ve gösterim metni için Audiowide, gövde metni ve arayüz için Inter (sans-serif).
Başlıklar font-audiowide uppercase tracking-tight
Başlık Seviye 1
text-4xl md:text-6xl font-audiowide uppercase
Başlık Seviye 2
text-3xl md:text-4xl font-audiowide uppercase
Başlık Seviye 3
text-xl font-audiowide uppercase
Gövde Metni Default sans-serif (Inter), text-gray-400 for secondary
Gövde metni çeşitli boyutlarda Inter kullanır. Varsayılan renk birincil içerik için beyaz, ikincil açıklamalar ve destek metni için gray-400'dür.
text-lg text-gray-400 leading-relaxed
Etiketler ve Başlık Yazıları text-xs uppercase tracking-wider text-gray-500
Bölüm Etiketi
Düğmeler
Düğmeler üç şeyi birleştirir: bir varyant (renk), bir boyut ve isteğe bağlı bir efekt.
Varyantlar
Boyutlar
Efektler
.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.
Kullanım
<!-- 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); }Yüzeyler
Cam, kartlar, rozetler ve sekmeler. Şampanya tonlu cam, VGS'nin imza yüzeyidir.
Cam
.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.
Kartlar
.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.
Rozetler
Animasyonlar
Kaydırmayla tetiklenen animasyonlar isteğe bağlı olarak etkinleştirilir. Her zaman azaltılmış hareket tercihine saygı gösterirler.
Kaydırma Animasyonları
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>Simgeler
Herkese açık sayfalar Font Awesome Etch simge paketini kullanır — tutarlı estetiğe sahip yaklaşık 280 simgelik özenle seçilmiş bir alt küme.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Kullanım
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Klasik FA → Etch Yeniden Adlandırmaları
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