Style Guide
Guide complet des composants UI et de la charte graphique pour ce projet. Cette page sert de référence design et de validation client.
Palette de Couleurs
Couleurs Principales
Couleurs Neutres
Couleurs d'État
Typographie
Titre Principal H1
Helios Extended • 42px/52px • Majuscules • Titres principaux
Titre Secondaire H2
Cy Grotesk Key • 32px/42px • Semi-bold • Sections
Titre Tertiaire H3
Cy Grotesk Key • 24px/34px • Regular • Sous-sections
Texte de corps principal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Helios • 16px/26px • Regular • Corps de texte
Texte de note ou information secondaire.
Helios • 14px/22px • Light • Notes et informations
Boutons
Variantes de couleur
Tailles
États
Badges
Alertes
Cartes
Carte Simple
Une carte basique avec titre et description pour présenter du contenu.
Carte avec Badge
NouveauExemple de carte avec un badge pour marquer le statut.
Carte Interactive
Cette carte peut être cliquable pour naviguer vers du contenu.
États de Chargement
Skeleton pour texte
Skeleton pour carte
Formulaire de Contact
Section Container
Exemple de Section
Le composant Section fournit un container avec padding et responsive design pour organiser le contenu de manière cohérente.
Grille et Espacement
Desktop : 12 colonnes, gutter 32px (gap-8)
Mobile : 4-6 colonnes, gutter 16px (gap-4)
Margins : min 64px (desktop) / 24px (mobile)
Notes d'Implémentation
Accessibilité
- Contraste AA minimum respecté sur tous les éléments
- Focus rings visibles avec outline-offset:2px
- Navigation clavier testée (Tab, Shift+Tab)
- Rôles ARIA appropriés pour les composants interactifs
Performance
- Animations durée 150-250ms avec cubic-bezier(0.4, 0, 0.2, 1)
- Respect de prefers-reduced-motion
- Images optimisées avec next/image
- Code splitting avec next/dynamic
Technologies
- Next.js 14 avec App Router
- TypeScript strict
- Tailwind CSS v4 avec configuration personnalisée
- Class Variance Authority (CVA) pour les variantes
- Framer Motion avec LazyMotion pour les animations