Système de design.
La source de vérité pour les chartes de marque VGS, la bibliothèque de composants et les patterns de design utilisés sur toutes les pages publiques.
Palette de couleurs
Couleurs de marque et d'interface définies dans la configuration Tailwind. Utilisez ces classes de manière cohérente sur toutes les pages.
Marque
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Échelle de gris
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Couleurs d'état
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Typographie
Deux familles de polices forment le système typographique. Audiowide pour les titres et l'affichage, Inter (sans-serif) pour le corps et l'interface.
Titres font-audiowide uppercase tracking-tight
Titre niveau 1
text-4xl md:text-6xl font-audiowide uppercase
Titre niveau 2
text-3xl md:text-4xl font-audiowide uppercase
Titre niveau 3
text-xl font-audiowide uppercase
Corps de texte Sans-serif par défaut (Inter), text-gray-400 pour le secondaire
Le corps de texte utilise Inter à différentes tailles. La couleur par défaut est blanche pour le contenu principal et gray-400 pour les descriptions secondaires et le texte d'accompagnement.
text-lg text-gray-400 leading-relaxed
Étiquettes et légendes text-xs uppercase tracking-wider text-gray-500
Étiquette de section
Boutons
Les boutons combinent trois choses : une variante (couleur), une taille et un effet optionnel. Les trois couches se superposent sur la base .btn.
Variantes
Tailles
Effets
.btn-glow est le halo CTA standard. .btn-glow-intense le double pour le CTA le plus important d'une page. .btn-shimmer ajoute un balayage lumineux unique au survol. .btn-press ajoute un micro scale-down au clic pour un retour tactile.
Utilisation
<!-- 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, cartes, badges et onglets. Le glass champagne est la surface signature de VGS — utilisez-le pour le contenu mis en évidence sur fond sombre.
Glass
.glass
Surface glass standard. Flou d'arrière-plan teinté champagne, rayon de 16px. Idéal pour les sections pleine largeur et les superpositions de hero.
.glass-card
Variante explicite légèrement plus marquée avec un flou de 12px. Remplacement direct quand .glass paraît trop léger.
Cartes
.card
Carte translucide de base. Padding 6, rayon sm.
.card-elevated
Ajoute une ombre subtile. À utiliser avec parcimonie pour l'élévation.
.card-interactive
Curseur pointeur + état au survol. À utiliser quand la carte entière est cliquable.
.card-compact
Padding plus serré (p-4) — pour les lignes et grilles denses.
.card-minimal
Réinitialise le fond, le padding et la bordure. Utilisé comme conteneur qui ne doit pas être visible.
Badges
Animations
Les animations déclenchées au défilement s'activent via data-animate. Les sections hero superposent des effets supplémentaires pour le spectacle. Toutes respectent prefers-reduced-motion.
Animations au défilement
Fondu vers le haut
data-animate (défaut)
Fondu de gauche
data-animate="fade-left"
Fondu de droite
data-animate="fade-right"
Scale
data-animate="scale"
Délais échelonnés
Ajoutez data-stagger="100" sur un conteneur parent. Les éléments enfants avec data-animate recevront automatiquement des délais incrémentaux (en 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>Icônes
Les pages publiques utilisent le pack d'icônes Font Awesome Etch — un sous-ensemble organisé d'environ 280 icônes avec une esthétique gravée cohérente. Le kit ID 66eef93df2 est chargé dans le layout public. FA Brands est également disponible pour les marques de plateformes sociales.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Utilisation
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Renommages classic FA → Etch
Plusieurs noms FA classiques courants n'existent pas dans Etch et ont des remplacements différents. Consultez la liste d'icônes du CLAUDE.md avant d'ajouter une nouvelle icône.
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin