Système de Design Aperonight

Un système de design moderne et cohérent pour créer des expériences exceptionnelles dans le domaine des événements après-travail.

Palette de Couleurs

Les couleurs de base du système Aperonight, conçues pour transmettre professionnalisme et modernité.

Couleurs de Marque

Primary Blue
#667eea
Secondary Purple
#764ba2
Accent Yellow
#facc15

Couleurs Neutres

White
#ffffff
Gray 100
#f3f4f6
Gray 600
#4b5563
Gray 900
#111827

Typographie

Une hiérarchie typographique claire et lisible pour tous les contenus.

Hero Title - 60px Bold

Section Title - 36px Bold

Card Title - 24px Semibold

Large Text - 20px Regular

Body Text - 16px Regular

Small Text - 14px Regular

Système de Boutons

Différents styles de boutons pour diverses actions et hiérarchies.

Styles Principaux

Tailles

Système de Cartes

Cartes événements et composants modulaires.

Événement exemple
★ En vedette
À partir de €25

AFTERWORK ROOFTOP

Vendredi 15 Décembre • 18:30
Rooftop Bar Paris

Rejoignez-nous pour un afterwork exclusif avec vue panoramique sur Paris.

Carte Simple

Une carte basique pour du contenu général avec hover effects.

2.5k+
Membres Actifs

Composants UI

Éléments d'interface réutilisables pour construire des expériences cohérentes.

Section Hero

Titre Héro

Description du héro avec gradient de fond

Grille de Métriques

50+
Événements
2.5k
Membres
12
Ce mois-ci
98%
Satisfaction

Guide d'Utilisation

Principes et bonnes pratiques pour utiliser ce système de design.

✨ Principes de Design

  • Cohérence - Utilisez les composants de manière uniforme
  • Accessibilité - Respectez les contrastes et la lisibilité
  • Responsive - Adaptez à tous les écrans
  • Performance - Optimisez les animations et interactions

🎨 Utilisation des Couleurs

  • Primary - Actions principales et navigation
  • Accent - Éléments mis en évidence (badges, etc.)
  • Gray - Textes, bordures et arrière-plans
  • Purple - Métriques et éléments spéciaux