Sistem de design.
Sursa de adevăr pentru ghidul de brand VGS, biblioteca de componente și tiparele de design folosite pe toate paginile publice.
Paletă de culori
Culorile de brand și UI definite în configurația Tailwind. Folosește aceste clase consecvent pe toate paginile.
Brand
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Scală de griuri
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Culori de stare
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Tipografie
Două familii de fonturi formează sistemul tipografic. Audiowide pentru titluri și text de afișaj, Inter (sans-serif) pentru corpul de text și UI.
Titluri font-audiowide uppercase tracking-tight
Titlu de nivel 1
text-4xl md:text-6xl font-audiowide uppercase
Titlu de nivel 2
text-3xl md:text-4xl font-audiowide uppercase
Titlu de nivel 3
text-xl font-audiowide uppercase
Corp de text Sans-serif implicit (Inter), text-gray-400 pentru secundar
Corpul de text folosește Inter la diverse dimensiuni. Culoarea implicită este alb pentru conținutul principal și gray-400 pentru descrierile secundare și textul de sprijin.
text-lg text-gray-400 leading-relaxed
Etichete și legende text-xs uppercase tracking-wider text-gray-500
Etichetă de secțiune
Butoane
Butoanele compun trei lucruri: o variantă (culoare), o dimensiune și un efect opțional. Toate cele trei straturi se suprapun peste baza .btn.
Variante
Dimensiuni
Efecte
.btn-glow este aura standard pentru CTA. .btn-glow-intense o dublează pentru cel mai important CTA de pe o pagină. .btn-shimmer adaugă o singură trecere de lumină la hover. .btn-press adaugă o micro-scalare la clic pentru feedback tactil.
Utilizare
<!-- 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); }Suprafețe
Glass, carduri, insigne și file. Sticla nuanțată în șampanie este suprafața semnătură VGS — folosește-o pentru conținut ridicat peste fundaluri întunecate.
Glass
.glass
Suprafață glass standard. Estompare de fundal nuanțată în șampanie, rază de 16px. Cel mai bine pentru secțiuni pe lățime completă și suprapuneri hero.
.glass-card
Variantă explicită ușor mai puternică, cu estompare de 12px. Înlocuitor direct când .glass pare prea slabă.
Carduri
.card
Card translucid de bază. Padding 6, rază sm.
.card-elevated
Adaugă o umbră subtilă. Folosește cu măsură pentru ridicare.
.card-interactive
Cursor de tip pointer + stare de hover. Folosește când întregul card este clicabil.
.card-compact
Padding mai strâns (p-4) — pentru rânduri și grile dense.
.card-minimal
Resetează fundalul, padding-ul și bordura. Folosit ca înveliș care nu ar trebui să existe vizual.
Insigne
Animații
Animațiile declanșate la derulare sunt opționale prin data-animate. Secțiunile hero adaugă efecte suplimentare pentru spectacol. Ambele respectă prefers-reduced-motion.
Animații la derulare
Apariție de jos
data-animate (implicit)
Apariție din stânga
data-animate="fade-left"
Apariție din dreapta
data-animate="fade-right"
Scalare
data-animate="scale"
Întârzieri eșalonate
Adaugă data-stagger="100" pe un container părinte. Elementele copil cu data-animate vor primi automat întârzieri incrementale (în 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>Pictograme
Paginile publice folosesc pachetul de pictograme Font Awesome Etch — un subset curat de circa 280 de pictograme, cu o estetică gravată consecventă. Kit ID 66eef93df2 este încărcat în layout-ul public. FA Brands este de asemenea disponibil pentru însemnele platformelor sociale.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Utilizare
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Redenumiri FA clasic → Etch
Mai multe nume clasice FA comune nu există în Etch și au înlocuitori diferiți. Verifică lista de pictograme din CLAUDE.md înainte de a adăuga o pictogramă nouă.
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin