Design System.

Die zentrale Referenz für VGS-Markenrichtlinien, Komponentenbibliothek und Designmuster, die auf allen öffentlichen Seiten verwendet werden.

Farbpalette

Marken- und UI-Farben, definiert in der Tailwind-Konfiguration. Verwende diese Klassen konsistent auf allen Seiten.

Marke

brand-500

#F0E6C8

brand-400

#F4ECCE

brand-300

#FAF6E7

brand-600

#B5A87F

brand-700

#B45309

brand-800

#92400E

Graustufen

gray-900

#18181b

gray-800

#27272a

gray-700

#3f3f46

gray-600

#52525b

gray-500

#71717a

gray-400

#a1a1aa

Statusfarben

emerald-400

Success

rose-500

Danger

sky-400

Info

amber-500

Warning

Typografie

Zwei Schriftfamilien bilden das Typsystem. Audiowide für Überschriften und Display-Text, Inter (serifenlos) für Fließtext und UI.

Überschriften font-audiowide uppercase tracking-tight

Überschrift Ebene 1

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

Überschrift Ebene 2

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

Überschrift Ebene 3

text-xl font-audiowide uppercase

Fließtext Default sans-serif (Inter), text-gray-400 for secondary

Fließtext verwendet Inter in verschiedenen Größen. Die Standardfarbe ist Weiß für primäre Inhalte und Gray-400 für sekundäre Beschreibungen und unterstützenden Text.

text-lg text-gray-400 leading-relaxed

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

Abschnitts-Label

Buttons

Buttons kombinieren drei Dinge: eine Variante (Farbe), eine Größe und einen optionalen Effekt.

Varianten

Größen

Effekte

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

Verwendung

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

Oberflächen

Glas, Karten, Badges und Tabs. Das champagnerfarbene Glas ist die charakteristische VGS-Oberfläche.

Glas

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

Karten

.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

Animationen

Scroll-ausgelöste Animationen sind optional aktivierbar. Sie respektieren stets die Einstellung für reduzierte Bewegung.

Scroll-Animationen

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

Öffentliche Seiten verwenden das Font-Awesome-Etch-Icon-Pack — eine kuratierte Teilmenge von rund 280 Icons mit einheitlicher Ästhetik.

house

gamepad

trophy

arrow-down-to-line

angle-right

arrows-rotate

Verwendung

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

Klassische FA → Etch Umbenennungen

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