Sistema de Design.

A fonte de verdade para as diretrizes de marca da VGS, biblioteca de componentes e padrões de design usados em todas as páginas públicas.

Paleta de Cores

Cores de marca e de UI definidas na configuração do Tailwind. Use estas classes de forma consistente em todas as páginas.

Marca

brand-500

#F0E6C8

brand-400

#F4ECCE

brand-300

#FAF6E7

brand-600

#B5A87F

brand-700

#B45309

brand-800

#92400E

Escala de Cinzentos

gray-900

#18181b

gray-800

#27272a

gray-700

#3f3f46

gray-600

#52525b

gray-500

#71717a

gray-400

#a1a1aa

Cores de Estado

emerald-400

Success

rose-500

Danger

sky-400

Info

amber-500

Warning

Tipografia

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

Títulos font-audiowide uppercase tracking-tight

Título de Nível 1

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

Título de Nível 2

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

Título de Nível 3

text-xl font-audiowide uppercase

Corpo de Texto Sem serifa por defeito (Inter), text-gray-400 para secundário

O corpo de texto usa Inter em vários tamanhos. A cor por defeito é branca para o conteúdo principal e gray-400 para descrições secundárias e texto de apoio.

text-lg text-gray-400 leading-relaxed

Etiquetas e Legendas text-xs uppercase tracking-wider text-gray-500

Etiqueta de Secção

Botões

Os botões combinam três coisas: uma variante (cor), um tamanho e um efeito opcional. As três camadas empilham-se sobre a base .btn.

Variantes

Tamanhos

Efeitos

.btn-glow é o halo de CTA padrão. .btn-glow-intense duplica-o para o CTA mais importante de uma página. .btn-shimmer acrescenta uma única passagem de luz no hover. .btn-press acrescenta uma micro redução de escala no clique para feedback tátil.

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, distintivos e separadores. O vidro com tom champanhe é a superfície característica da VGS — use-o para conteúdo elevado sobre fundos escuros.

Vidro

.glass

Superfície de vidro padrão. Desfoque de fundo com tom champanhe, raio de 16px. Ideal para secções de largura total e sobreposições de hero.

.glass-card

Variante explícita ligeiramente mais forte com um desfoque de 12px. Substituição direta quando .glass parece demasiado suave.

Cartões

.card

Cartão translúcido base. Padding 6, raio sm.

.card-elevated

Acrescenta uma sombra subtil. Use com moderação para elevação.

.card-interactive

Cursor de ponteiro + estado de hover. Use quando todo o cartão é clicável.

.card-compact

Padding mais apertado (p-4) — para linhas e grelhas densas.

.card-minimal

Repõe o fundo, o padding e a borda. Usado como um invólucro que não deve existir visualmente.

Distintivos

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

.badge-sm(default).badge-lg

Animações

As animações ativadas pelo scroll são opcionais através de data-animate. As secções hero acrescentam efeitos adicionais para teatralidade. Ambas respeitam prefers-reduced-motion.

Animações de Scroll

Fade Up

data-animate (por defeito)

Fade Left

data-animate="fade-left"

Fade Right

data-animate="fade-right"

Scale

data-animate="scale"

Atrasos Escalonados

Acrescente data-stagger="100" num contentor pai. Os elementos filho com data-animate recebem automaticamente atrasos incrementais (em 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>

Ícones

As páginas públicas usam o pacote de ícones Font Awesome Etch — um subconjunto curado de cerca de 280 ícones com uma estética gravada consistente. O Kit ID 66eef93df2 é carregado no layout público. O FA Brands também está disponível para marcas de plataformas sociais.

house

gamepad

trophy

arrow-down-to-line

angle-right

arrows-rotate

Utilização

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

Renomeações Clássico FA → Etch

Vários nomes comuns do FA clássico não existem no Etch e têm substitutos diferentes. Consulte a lista de ícones no CLAUDE.md antes de adicionar um novo ícone.

chevron-down → angle-down

download → arrow-down-to-line

circle-check → check

shield-halved → shield

hard-drive → compact-disc

spinner → arrows-rotate fa-spin