Design System.

La fonte di riferimento per le linee guida del brand VGS, la libreria di componenti e gli schemi di design usati in tutte le pagine pubbliche.

Palette Colori

Colori del brand e dell'interfaccia, definiti nella configurazione Tailwind. Usa queste classi in modo coerente in tutte le pagine.

Brand

brand-500

#F0E6C8

brand-400

#F4ECCE

brand-300

#FAF6E7

brand-600

#B5A87F

brand-700

#B45309

brand-800

#92400E

Scala di Grigi

gray-900

#18181b

gray-800

#27272a

gray-700

#3f3f46

gray-600

#52525b

gray-500

#71717a

gray-400

#a1a1aa

Colori di Stato

emerald-400

Success

rose-500

Danger

sky-400

Info

amber-500

Warning

Tipografia

Due famiglie di caratteri formano il sistema tipografico. Audiowide per titoli e testi display, Inter (senza grazie) per il corpo e l'interfaccia.

Titoli font-audiowide uppercase tracking-tight

Titolo Livello 1

text-4xl md:text-6xl font-audiowide uppercase

Titolo Livello 2

text-3xl md:text-4xl font-audiowide uppercase

Titolo Livello 3

text-xl font-audiowide uppercase

Testo del Corpo Default sans-serif (Inter), text-gray-400 for secondary

Il testo del corpo usa Inter in varie dimensioni. Il colore predefinito è bianco per i contenuti primari e gray-400 per descrizioni secondarie e testo di supporto.

text-lg text-gray-400 leading-relaxed

Etichette e Didascalie text-xs uppercase tracking-wider text-gray-500

Etichetta di Sezione

Pulsanti

I pulsanti combinano tre elementi: una variante (colore), una dimensione e un effetto opzionale.

Varianti

Dimensioni

Effetti

.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.

Utilizzo

<!-- 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); }

Superfici

Vetro, schede, badge e tab. Il vetro tinta champagne è la superficie distintiva di VGS.

Vetro

.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.

Schede

.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.

Badge

.badge-success.badge-warning.badge-danger.badge-info.badge-brand.badge-secondary

.badge-sm(default).badge-lg

Animazioni

Le animazioni attivate dallo scorrimento sono opzionali. Rispettano sempre la preferenza per il movimento ridotto.

Animazioni allo Scorrimento

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>

Icone

Le pagine pubbliche usano il pacchetto di icone Font Awesome Etch — un sottoinsieme curato di circa 280 icone dall'estetica coerente.

house

gamepad

trophy

arrow-down-to-line

angle-right

arrows-rotate

Utilizzo

<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>

Rinominazioni FA Classico → 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