Paleta de Cores

Cores de marca e de interface, definidas na configuração Tailwind. Usa estas classes de forma consistente em todas as páginas.

Marca

Escala de Cinzas

Cores de Estado

Tipografia

Duas famílias tipográficas formam o sistema. Audiowide para títulos e texto de destaque, Inter (sem serifa) para o corpo e a interface.

Botões

Os botões combinam três coisas: uma variante (cor), um tamanho e um efeito opcional.

Variantes

Tamanhos

Efeitos

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

Utilização

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

Superfícies

Vidro, cartões, badges e separadores. O vidro com tom champanhe é a superfície distintiva da VGS.

Vidro

Cartões

Badges

Animações

As animações ativadas ao deslocar são opcionais. Respeitam sempre a preferência por movimento reduzido.

Animações de Deslocamento

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

Ícones

As páginas públicas usam o pacote de ícones Font Awesome Etch — um subconjunto curado de cerca de 280 ícones com estética consistente.

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