Tervezési rendszer.
A VGS márkairányelvek, komponenskönyvtár és tervezési minták hiteles forrása, amelyet az összes nyilvános oldalon használunk.
Színpaletta
A Tailwind konfigurációban definiált márka- és UI-színek. Használd ezeket az osztályokat következetesen minden oldalon.
Márka
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Szürkeárnyalat
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Állapotszínek
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Tipográfia
Két betűcsalád alkotja a típusrendszert. Az Audiowide a címsorokhoz és a kiemelt szöveghez, az Inter (sans-serif) a törzsszöveghez és a felülethez.
Címsorok font-audiowide uppercase tracking-tight
1. szintű címsor
text-4xl md:text-6xl font-audiowide uppercase
2. szintű címsor
text-3xl md:text-4xl font-audiowide uppercase
3. szintű címsor
text-xl font-audiowide uppercase
Törzsszöveg Alapértelmezett sans-serif (Inter), text-gray-400 a másodlagoshoz
A törzsszöveg az Intert használja különböző méretekben. Az alapértelmezett szín fehér az elsődleges tartalomhoz, és gray-400 a másodlagos leírásokhoz és a kiegészítő szöveghez.
text-lg text-gray-400 leading-relaxed
Címkék és feliratok text-xs uppercase tracking-wider text-gray-500
Szakaszcímke
Gombok
A gombok három dolgot kombinálnak: egy változatot (szín), egy méretet és egy opcionális effektet. Mindhárom réteg a .btn alapra épül.
Változatok
Méretek
Effektek
A .btn-glow a szabványos CTA-glória. A .btn-glow-intense megduplázza azt az oldal egyetlen legfontosabb CTA-jához. A .btn-shimmer egy egyszeri fénypásztázást ad hoverre. A .btn-press egy mikro lekicsinyítést ad kattintáskor a tapintható visszajelzéshez.
Használat
<!-- 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); }Felületek
Üveg, kártyák, jelvények és fülek. A pezsgőszínárnyalatú üveg a jellegzetes VGS-felület — használd kiemelt tartalomhoz sötét háttér felett.
Üveg
.glass
Szabványos üvegfelület. Pezsgőszínárnyalatú háttér-elmosás, 16px sugár. Teljes szélességű szakaszokhoz és hero-átfedésekhez a legjobb.
.glass-card
Kissé erősebb, explicit változat 12px-es elmosással. Beilleszthető helyettesítő, ha a .glass túl lágynak tűnik.
Kártyák
.card
Alap áttetsző kártya. 6-os belső térköz, sm sugár.
.card-elevated
Finom árnyékot ad hozzá. Használd takarékosan a kiemeléshez.
.card-interactive
Mutató kurzor + hover állapot. Akkor használd, ha az egész kártya kattintható.
.card-compact
Szorosabb belső térköz (p-4) — sűrű sorokhoz és rácsokhoz.
.card-minimal
Visszaállítja a hátteret, a belső térközt és a szegélyt. Olyan keretként használatos, amelynek vizuálisan nem szabad léteznie.
Jelvények
Animációk
A görgetésre induló animációk a data-animate attribútummal kapcsolhatók be. A hero szakaszok további effekteket rétegeznek a látványért. Mindkettő tiszteletben tartja a prefers-reduced-motion beállítást.
Görgetési animációk
Felúszás
data-animate (alapértelmezett)
Beúszás balról
data-animate="fade-left"
Beúszás jobbról
data-animate="fade-right"
Nagyítás
data-animate="scale"
Lépcsőzetes késleltetés
Adj hozzá egy data-stagger="100" attribútumot egy szülőkonténerhez. A data-animate attribútummal rendelkező gyermekelemek automatikusan növekvő késleltetést kapnak (ms-ban).
<!-- 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>Ikonok
A nyilvános oldalak a Font Awesome Etch ikoncsomagot használják — egy gondosan válogatott, ~280 ikonból álló részhalmazt egységes maratott esztétikával. A 66eef93df2 Kit ID be van töltve a nyilvános elrendezésben. A FA Brands szintén elérhető a közösségimédia-jelekhez.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Használat
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Klasszikus FA → Etch átnevezések
Számos gyakori klasszikus FA-név nem létezik az Etchben, és más a megfelelőjük. Új ikon hozzáadása előtt ellenőrizd a CLAUDE.md ikonlistáját.
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin