Design System.

The source of truth for VGS brand guidelines, component library, and design patterns used across all public-facing pages.

Color Palette

Brand and UI colors defined in the Tailwind config. Use these classes consistently across all pages.

Brand

brand-500

#F0E6C8

brand-400

#F4ECCE

brand-300

#FAF6E7

brand-600

#B5A87F

brand-700

#B45309

brand-800

#92400E

Gray Scale

gray-900

#18181b

gray-800

#27272a

gray-700

#3f3f46

gray-600

#52525b

gray-500

#71717a

gray-400

#a1a1aa

Status Colors

emerald-400

Success

rose-500

Danger

sky-400

Info

amber-500

Warning

Typography

Two font families form the type system. Audiowide for headings and display text, Inter (sans-serif) for body and UI.

Headings font-audiowide uppercase tracking-tight

Heading Level 1

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

Heading Level 2

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

Heading Level 3

text-xl font-audiowide uppercase

Body Text Default sans-serif (Inter), text-gray-400 for secondary

Body text uses Inter at various sizes. Default color is white for primary content and gray-400 for secondary descriptions and supporting text.

text-lg text-gray-400 leading-relaxed

Labels & Captions text-xs uppercase tracking-wider text-gray-500

Section Label

Buttons

Buttons compose three things: a variant (color), a size, and an optional effect. All three layers stack on the .btn base.

Variants

Sizes

Effects

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

Usage

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

Surfaces

Glass, cards, badges, and tabs. The champagne-tinted glass is the signature VGS surface — use it for elevated content over dark backgrounds.

Glass

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

Cards

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

Badges

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

.badge-sm(default).badge-lg

Animations

Scroll-triggered animations are opt-in via data-animate. Hero sections layer additional effects for theatre. Both respect prefers-reduced-motion.

Scroll Animations

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>

Icons

Public pages use the Font Awesome Etch icon pack — a curated ~280-icon subset with a consistent etched aesthetic. Kit ID 66eef93df2 is loaded in the public layout. FA Brands is also available for social-platform marks.

house

gamepad

trophy

arrow-down-to-line

angle-right

arrows-rotate

Usage

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

Classic FA → Etch Renames

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