Corporate Design System
Caisse des Compensations du Bâtiment - Genève
00 Maquettes d'Appareils
Composants standardisés et réutilisables pour présenter les interfaces
📱 Philosophie des Mockups
Les maquettes d'appareils sont des composants essentiels pour présenter vos interfaces dans un contexte réaliste. Elles ajoutent un niveau de professionnalisme et permettent aux utilisateurs de visualiser comment l'interface s'affichera sur différents appareils.
✨ Pourquoi utiliser des mockups ?
- Contextualisation visuelle des interfaces
- Présentation professionnelle pour clients et stakeholders
- Démonstration du responsive design
- Amélioration de la compréhension du projet
🔧 Comment les utiliser
<div class="device-mockup device-iphone">
<div class="device-frame">
<div class="device-notch"></div>
<div class="device-screen">
<!-- Votre contenu mobile ici -->
</div>
</div>
</div>
<!-- MacBook Mockup -->
<div class="device-mockup device-macbook">
<div class="macbook-screen">
<div class="macbook-notch"></div>
<div class="macbook-content">
<!-- Votre contenu desktop ici -->
</div>
</div>
<div class="macbook-base"></div>
<div class="macbook-footer"></div>
</div>
💡 Astuce : Utilisez les mockups dans vos pages de présentation, landing pages, ou sections "À propos" pour montrer vos produits dans un contexte réel.
iPhone Mockup
Maquette réaliste d'iPhone avec notch, bordures arrondies et zone de contenu personnalisable
CCB Genève
Votre contenu ici
Exemple de contenu dans la maquette
MacBook Mockup
Maquette réaliste de MacBook avec barre supérieure, bordures et zone de contenu large
Exemple de contenu Desktop
Interface responsive adaptée aux grands écrans avec plus d'espace disponible
Entreprises
Employés
Statistiques
Guide d'utilisation
Ces maquettes sont des composants réutilisables. Insérez simplement votre contenu dans la zone prévue :
<div class="device-mockup device-iphone">
<div class="device-frame">
<div class="device-notch"></div>
<div class="device-screen">
<!-- Votre contenu mobile ici -->
</div>
</div>
</div><div class="device-mockup device-macbook">
<div class="macbook-screen">
<div class="macbook-notch"></div>
<div class="macbook-content">
<!-- Votre contenu desktop ici -->
</div>
</div>
<div class="macbook-base"></div>
<div class="macbook-footer"></div>
</div>01 Palette de Couleurs
🎨 Philosophie des Couleurs CCB
Notre palette est construite autour de l'orange #FF6900, couleur emblématique du secteur du bâtiment, évoquant l'énergie, la sécurité et le dynamisme des chantiers. Le contraste avec le blanc et les tons neutres assure lisibilité et professionnalisme.
✨ Hiérarchie des couleurs
- Orange Principal (#FF6900) : CTA, liens, éléments interactifs
- Blanc (#FFFFFF) : Fond principal, texte sur orange
- Gris Foncé (#2C3E50) : Texte principal, contenu
- Gris Clair (#ECF0F1) : Fonds secondaires, séparateurs
🔧 Utilisation en CSS
/* Utilisation des variables CSS */
.mon-element {
color: var(--primary-orange);
background: var(--white);
border: 1px solid var(--light-gray);
}
/* Couleurs sémantiques pour états */
.success { color: var(--success); }
.warning { color: var(--warning); }
.danger { color: var(--danger); }
⚠️ Règle d'or : L'orange doit rester minoritaire (maximum 20% de la surface) pour maintenir son impact visuel et diriger l'attention là où c'est important.
Orange Principal
#FF6900
Boutons, liens, accents
Blanc
#FFFFFF
Fond, texte sur orange
Gris Foncé
#2C3E50
Texte principal
Gris Clair
#ECF0F1
Fond secondaire
02 📚 Guide d'Utilisation du Corporate Design
🎨 Philosophie du Design
🏗️ Identité Bâtiment
Nous utilisons des effets blueprint (grille de plans) et des hexagones pour rappeler le secteur de la construction. L'orange #FF6900 évoque l'énergie des chantiers.
✨ Modernité
Glassmorphisme (effet verre), animations subtiles et design épuré pour un aspect premium et actuel tout en restant professionnel.
📱 Responsive
Tous les composants s'adaptent automatiquement du mobile (360px) au grand écran (1536px+) avec 6 breakpoints précis.
🔧 Architecture Technique
CSS Vanilla
✅ Pas de SASS/LESS
✅ Variables CSS natives
✅ Simple et performant
Font Awesome
✅ 20,000+ icônes pro
✅ Standard .NET MVC
✅ CDN stable inclus
Images
✅ Format WebP + fallback
✅ Lazy loading natif
✅ Optimisation < 200KB
Performance
✅ Animations GPU (60fps)
✅ Intersection Observer
✅ Transform + Opacity
💡 Comment Utiliser
1. Dans vos pages Razor :
@section Styles {
<link rel="stylesheet" href="~/css/corporate-design.css" />
}
<div class="design-section">
<div class="container">
<h2 class="section-title">Mon Titre</h2>
<div class="glass-card">Contenu</div>
</div>
</div>
@section Scripts {
<script src="~/js/corporate-design.js"></script>
}2. Variables CSS disponibles :
--primary-orange: #FF6900;
--white: #FFFFFF;
--dark: #2C3E50;
--light-gray: #ECF0F1;
--success: #27AE60;
--warning: #F39C12;
--danger: #E74C3C;3. Composants disponibles :
- ✅ Boutons (primary, secondary, outline, glass)
- ✅ Cards (modern, glass, hexagon, data)
- ✅ Formulaires (input, select, checkbox)
- ✅ Navigation (navbar, sidebar, dropdown)
- ✅ Calendrier interactif
- ✅ Badges & Alertes
- ✅ Spinners & Loading
- ✅ Images responsives
- ✅ Galeries
- ✅ Grids 2/3/4 colonnes
03 Navigation par Onglets
04 Formulaires
📝 Philosophie des Formulaires
Les formulaires sont le point de contact principal avec vos utilisateurs. Nous privilégions la clarté, le feedback visuel immédiat et l'accessibilité. Chaque input a des états visuels distincts (normal, hover, focus, valid, invalid).
✨ Composants disponibles
- Text Input : Saisie de texte standard avec bordure orange au focus
- Textarea : Saisie de texte long avec redimensionnement vertical
- Select : Dropdown avec flèche personnalisée et options stylisées
- Checkbox : Cases à cocher avec checkmark animé
- Radio : Boutons radio avec dot central
- Range Slider : Curseurs avec/sans steps et affichage valeur
🔧 Utilisation
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" class="form-input" placeholder="votre@email.com">
</div>
<!-- Avec validation -->
<input type="text" class="form-input valid" value="✓ Valide">
<input type="text" class="form-input invalid" value="✗ Invalide">
<!-- Range Slider -->
<div class="range-group">
<input type="range" class="form-range" min="0" max="100" value="50">
<div class="range-labels">
<span>Min</span>
<span class="range-value">50</span>
<span>Max</span>
</div>
</div>
💡 Bonnes pratiques : Labels toujours visibles, placeholders informatifs, validation en temps réel, messages d'erreur clairs, et états désactivés visuellement distincts.
Formulaire d'Inscription
Connexion
Accédez à votre espace
05 Cards & Conteneurs
🃏 Philosophie des Cards
Les cards sont des conteneurs modulaires qui organisent l'information en blocs digestibles. Inspirées du Material Design, nos cards utilisent des ombres subtiles, du glassmorphisme et des hexagones pour rappeler l'identité CCB.
✨ Types de cards disponibles
- Modern Card : Card standard avec ombre, parfaite pour contenu général
- Glass Card : Effet verre avec backdrop-filter pour fonds dynamiques
- Hexagon Card : Card avec fond orange et hexagone décoratif
- Data Card : Card avec badges, stats et progress bars
- Blueprint Card : Effet plan de construction avec grille
🔧 Utilisation
<!-- Card moderne -->
<div class="card modern-card">
<div class="card-icon">
<i class="fas fa-bolt"></i>
</div>
<h4>Titre</h4>
<p>Description</p>
<a href="#" class="card-link">En savoir plus</a>
</div>
<!-- Glass card -->
<div class="glass-card">
<!-- Contenu -->
</div>
💡 Astuce : Utilisez glass-card sur fonds colorés/images, modern-card sur fonds blancs. Les hover effects sont automatiques !
Carte Glassmorphism
Effet de verre moderne avec fond blueprint rappelant le bâtiment
Design Hexagonal
Rappel du logo CCB avec forme hexagonale
Statistiques Mensuelles
Décembre 202506 Calendrier
📅 Philosophie du Calendrier
Le calendrier est un composant crucial pour la gestion de projets et rendez-vous dans le secteur du bâtiment. Notre calendrier utilise une grille CSS flexible, des états visuels clairs et une interaction tactile optimisée.
✨ États des jours
- Jour normal : Fond blanc, bordure grise, hover → fond gris
- Aujourd'hui : Fond orange, texte blanc, ombre portée
- Weekend : Texte orange pour distinction visuelle
- Avec événement : Petit point orange en bas
- Désactivé : Texte gris clair, pas de hover
- Sélectionné : Bordure orange, fond léger
🔧 Utilisation
<div class="calendar-container glass-card">
<div class="calendar-header">
<button class="btn btn-icon-only">←</button>
<h3>Décembre 2025</h3>
<button class="btn btn-icon-only">→</button>
</div>
<div class="calendar-grid">
<div class="calendar-day-header">Lun</div>
<!-- ... autres jours -->
<div class="calendar-day current">12</div>
<div class="calendar-day event">18</div>
<div class="calendar-day weekend">21</div>
</div>
</div>
💡 JavaScript inclus : Les clics sur les jours sont automatiquement gérés avec sélection visuelle. Parfait pour planification de chantiers et rendez-vous.
Décembre 2025
07 Animations & Effets
✨ Philosophie des Animations
Les animations doivent être subtiles, fluides et avoir un but fonctionnel. Elles guident l'œil, confirment les actions et rendent l'interface vivante. Toutes nos animations utilisent transform et opacity pour des performances 60fps garanties.
✨ Effets disponibles
- Hover Float : Élévation légère (-2px) avec ombre au hover
- Glow Effect : Bordure lumineuse orange apparaissant au survol
- Scale Transform : Agrandissement à 110% au hover
- Blueprint Style : Fond bleu foncé avec grille de plan
- Shimmer : Effet de brillance qui traverse l'élément
- Pulse : Anneau qui pulse depuis le centre
🔧 Utilisation
<!-- Ajoutez simplement les classes -->
<div class="card glass-card hover-float">
Carte qui flotte au hover
</div>
<div class="card hover-glow">
Carte avec effet lumineux
</div>
<div class="blueprint-card">
<div class="blueprint-lines"></div>
Contenu avec effet plan
</div>
💡 Performance : Toutes les animations utilisent GPU (transform, opacity) pour 60fps. Durée max 300ms pour rester réactif.
Hover Float
Carte qui flotte au survol
Glow Effect
Effet lumineux orange au survol
Scale Transform
Agrandissement au survol
Blueprint Style
Effet plan de construction
Shimmer
Effet de brillance animé
Pulse Animation
Animation de pulsation
08 Librairie d'Icônes - Font Awesome
🎨 Philosophie des Icônes
Les icônes sont un langage visuel universel qui transcende les barrières linguistiques. Font Awesome offre 20,000+ icônes vectorielles gratuites, parfaitement compatibles avec C# .NET MVC. Chaque icône doit avoir un but fonctionnel et être accompagnée de texte quand nécessaire.
✨ Catégories principales
- Construction (fa-hard-hat, fa-tools) : Secteur du bâtiment
- Navigation (fa-home, fa-bars) : Menus et liens
- Actions (fa-plus, fa-edit, fa-trash) : Boutons d'action
- Social (fa-share, fa-comment) : Interactions sociales
- Status (fa-check, fa-times) : États et feedback
🔧 Utilisation
<!-- Icône simple -->
<i class="fas fa-home"></i>
<!-- Icône avec taille -->
<i class="fas fa-building fa-2x"></i> <!-- 2x, 3x, 4x, 5x -->
<!-- Icône animée -->
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-heart fa-beat"></i>
<!-- Dans un bouton -->
<button class="btn btn-primary">
<i class="fas fa-plus"></i>
Ajouter
</button>
💡 Accessibilité : Toujours ajouter aria-label ou aria-hidden="true" selon le contexte. Les icônes décoratives doivent être masquées aux lecteurs d'écran.
Font Awesome pour .NET MVC
Font Awesome est la librairie d'icônes standard pour les projets C# .NET MVC. Plus de 20,000 icônes vectorielles disponibles gratuitement.
Installation
Via CDN (Recommandé)
Ajoutez dans votre _Layout.cshtml :
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">Via NuGet
Install-Package FontAwesomeExemples d'Utilisation dans votre Code .NET MVC
Icône Simple (Recommandé)
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-cog"></i>Dans un Bouton
<button class="btn btn-primary">
<i class="fas fa-plus"></i>
Ajouter
</button>Avec Tailles et Couleurs
<i class="fas fa-home fa-lg"></i>
<i class="fas fa-user fa-2x" style="color: #FF6900;"></i>
<i class="fas fa-cog fa-3x"></i>Catégories d'Icônes Disponibles
09 Badges & États
🏷️ Philosophie des Badges
Les badges sont des indicateurs visuels compacts qui communiquent des états, des catégories ou des compteurs. Ils doivent être immédiatement reconnaissables grâce à des couleurs sémantiques et un design minimaliste.
✨ Types de badges
- Primary (Orange) : Nouveau, important, en vedette
- Success (Vert) : Validé, complété, actif
- Warning (Jaune) : En attente, attention requise
- Danger (Rouge) : Urgent, erreur, rejeté
- Info (Bleu) : Information neutre, aide
🔧 Utilisation
<!-- Badge simple -->
<span class="badge badge-primary">Nouveau</span>
<!-- Badge avec icône -->
<span class="badge badge-success">
<i class="fas fa-check"></i>
Validé
</span>
<!-- Tailles -->
<span class="badge badge-primary badge-sm">Petit</span>
<span class="badge badge-primary badge-md">Moyen</span>
<span class="badge badge-primary badge-lg">Grand</span>
<!-- Badge de notification -->
<button class="btn-icon-only">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</button>
💡 Bonnes pratiques : Utilisez les couleurs sémantiques de façon cohérente. Un badge Success = toujours vert. Limitez à 1-2 badges par card pour clarté.
Badges de Statut
Tailles de Badges
Badges avec Icônes Variées
10 États & Loading
⏳ Philosophie des États de Chargement
Les indicateurs de loading et les alertes sont essentiels pour le feedback utilisateur. Ils rassurent, informent et guident. Nos spinners utilisent l'identité hexagonale CCB, et nos alertes suivent les conventions sémantiques universelles.
✨ Composants d'état
- Spinner circulaire : Loading standard, léger et universel
- Spinner hexagonal : Loading avec identité CCB (dash animation)
- Dots loader : 3 points animés pour actions courtes
- Alertes Success/Warning/Error/Info : Messages contextuels colorés
- Progress bars : Barres de progression avec pourcentages
🔧 Utilisation
<!-- Spinner circulaire -->
<div class="spinner spinner-primary"></div>
<!-- Spinner hexagonal CCB -->
<div class="spinner spinner-hexagon">
<svg viewBox="0 0 100 120">
<polygon points="50 5, 95 32.5, 95 87.5, 50 115, 5 87.5, 5 32.5"/>
</svg>
</div>
<!-- Alerte -->
<div class="alert alert-success">
<i class="fas fa-check-circle"></i>
<span>Opération réussie !</span>
</div>
<!-- Progress bar -->
<div class="progress-bar">
<div class="progress-fill" style="width: 75%;"></div>
</div>
💡 UX : Affichez un spinner pour opérations > 500ms. Alertes auto-dismiss après 3-5 secondes. Progress bars pour uploads/téléchargements.
Spinners
Alertes
Barres de Progression
11 Design Mobile & Responsive
🎯 Breakpoints Utilisés
≥ 1536px
≥ 1280px
≤ 1024px
≤ 768px
≤ 576px
≤ 480px
✨ Adaptations Automatiques :
- ✅ Grids → 1 colonne sur mobile
- ✅ Navigation → Menu vertical
- ✅ Boutons → Pleine largeur
- ✅ Touch targets → Min 44x44px
- ✅ Typographie → Tailles réduites
- ✅ Images → Optimisées par taille
- ✅ Espacement → Réduit
- ✅ Cards → Padding adapté
📱 Exemples Mobile avec Maquettes Standardisées
💡 Bonnes Pratiques Mobile
👆 Touch Targets
Tous les boutons et liens font minimum 44x44px pour faciliter l'interaction tactile.
📏 Espacement
Les espacements sont réduits progressivement selon la taille d'écran pour optimiser l'espace.
📝 Typographie
Les tailles de police s'adaptent automatiquement : 1.5rem sur mobile vs 3rem sur desktop.
🖼️ Images
Format WebP avec fallback JPEG, lazy loading natif, et versions optimisées par breakpoint.
🎯 Performance
Animations GPU-accelerated (transform + opacity) pour des transitions à 60fps même sur mobile.
♿ Accessibilité
Contraste suffisant, labels sur icônes, navigation clavier, et support VoiceOver/TalkBack.
12 Design Layout & Intégration d'Images
🖼️ Philosophie des Layouts & Images
Un bon layout crée une hiérarchie visuelle claire et guide naturellement le regard. Les images doivent être optimisées, responsives et intégrées harmonieusement avec le texte. Nous privilégions les grids flexibles, les espacements cohérents et les formats modernes (WebP).
✨ Principes de Layout
- Grille 12 colonnes : Système flexible pour tous les breakpoints
- Espacement 8px : Multiples de 8 (8, 16, 24, 32, 48, 64px)
- Largeur maximale : 1200px pour contenu, 1920px pour images pleine largeur
- Marges latérales : 2rem desktop, 1rem mobile
- Interligne texte : 1.6 pour corps, 1.2-1.4 pour titres
🖼️ Classes d'images disponibles
<!-- Images responsives -->
<img src="image.jpg" class="img-responsive"> <!-- max-width: 100% -->
<img src="image.jpg" class="img-full"> <!-- width: 100% -->
<img src="image.jpg" class="img-cover"> <!-- object-fit: cover -->
<img src="image.jpg" class="img-rounded"> <!-- border-radius: 12px -->
<img src="image.jpg" class="img-circle"> <!-- border-radius: 50% -->
<img src="image.jpg" class="img-hexagon"> <!-- clip-path hexagonal -->
<img src="image.jpg" class="img-shadow"> <!-- box-shadow -->
<img src="image.jpg" class="img-border"> <!-- border orange 3px -->
Layouts Disponibles
📐 Grilles de Contenu
<!-- Grille 2 colonnes -->
<div class="content-grid-2">
<div>Colonne 1</div>
<div>Colonne 2</div>
</div>
<!-- Grille 3 colonnes -->
<div class="content-grid-3">...</div>
<!-- Grille auto-responsive -->
<div class="content-grid-auto">
<!-- S'adapte automatiquement (min 280px) -->
</div>
Exemple: Grille 3 colonnes
Colonne 1
Colonne 2
Colonne 3
🖼️ Layouts Image + Texte
<!-- Image à gauche, texte à droite -->
<div class="content-split">
<div><img src="image.jpg" class="img-cover"></div>
<div>
<h2>Titre</h2>
<p>Contenu texte...</p>
</div>
</div>
<!-- Image à droite, texte à gauche (inversé) -->
<div class="content-split reverse">
<div>Texte</div>
<div><img src="image.jpg"></div>
</div>
Exemple: Image + Texte
Sécurité sur les Chantiers
La CCB Genève s'engage pour la sécurité des travailleurs du bâtiment. Le contenu s'aligne naturellement à côté de l'image avec un espacement cohérent de 3rem (48px).
L'interligne de 1.6 assure une lisibilité optimale. Les marges entre paragraphes sont de 1rem.
🃏 Cards avec Images
<div class="image-card">
<div class="image-card-image">
<img src="image.jpg" alt="Description">
</div>
<div class="image-card-content">
<h4 class="image-card-title">Titre</h4>
<p class="image-card-text">Description</p>
<a href="#" class="card-link">Lire plus</a>
</div>
</div>
Exemple: Grille de cards avec images
📏 Guide des Espacements
🔸 Marges (margin)
- • Entre sections : 5rem (80px)
- • Entre cards : 2rem (32px)
- • Entre paragraphes : 1rem (16px)
🔸 Padding (espacement interne)
- • Container : 2rem (32px)
- • Cards : 2rem (32px)
- • Boutons : 0.75-1rem
🔸 Interlignes (line-height)
- • Titres : 1.2-1.4
- • Corps de texte : 1.6
- • Petits textes : 1.5
<!-- Exemple d'article bien espacé -->
<article style="padding: 2rem; max-width: 800px;">
<h1 style="margin-bottom: 1rem; line-height: 1.2;">Titre</h1>
<p style="margin-bottom: 1rem; line-height: 1.6;">Paragraphe 1</p>
<p style="margin-bottom: 1rem; line-height: 1.6;">Paragraphe 2</p>
<img src="image.jpg" class="img-responsive img-rounded"
style="margin: 2rem 0;">
<p style="line-height: 1.6;">Suite du contenu</p>
</article>
💡 Règle d'or : Les images ne doivent JAMAIS dépasser 200 KB. Utilisez WebP avec fallback JPG. Lazy loading automatique avec loading="lazy".
13 Graphiques & Visualisation (Chart.js)
📈 Philosophie des Graphiques
Les graphiques transforment des données complexes en informations visuelles compréhensibles instantanément. Nous utilisons Chart.js pour sa simplicité, sa légèreté (60 KB) et sa compatibilité parfaite avec ASP.NET Core MVC.
✨ Pourquoi Chart.js ?
- 100% Gratuit : Open-source MIT License
- 8 types de graphiques : Line, Bar, Pie, Doughnut, Radar, Polar, Bubble, Scatter
- Responsive natif : S'adapte automatiquement
- Animations fluides : Transitions élégantes
- Personnalisable : Couleurs, légendes, tooltips
🔧 Installation (déjà inclus)
<!-- Dans _Layout.cshtml ou votre vue -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
💡 Astuce : Utilisez l'orange CCB (#FF6900) pour vos graphiques principaux pour maintenir la cohérence visuelle.
Line Chart - Évolution temporelle
Idéal pour afficher des tendances dans le temps (cotisations, dossiers, statistiques)
Bar Chart - Comparaisons
Parfait pour comparer des valeurs entre différentes catégories
Pie Chart - Proportions
Montre la répartition en pourcentages d'un ensemble
Doughnut Chart - Proportions modernes
Version moderne du pie chart avec un trou central
Radar Chart - Analyse multidimensionnelle
Compare plusieurs variables sur des axes radiaux
Polar Area Chart - Proportions avec magnitude
Combine pie chart et radar pour montrer proportions et valeurs
Intégration dans votre projet ASP.NET Core MVC
1️⃣ Ajouter Chart.js
Dans Views/Shared/_Layout.cshtml :
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
2️⃣ Passer des données C# → JS
// Controller
ViewBag.ChartData = JsonSerializer.Serialize(data);
// Vue
<script>
const data = ;
</script>
3️⃣ Créer le graphique
<canvas id="myChart"></canvas>
<script>
new Chart(document.getElementById('myChart'), {
type: 'line',
data: data
});
</script>
14 💡 Guide Complet du Design System
🎯 Vue d'Ensemble
Le Design System CCB est une collection complète de composants, patterns et guidelines qui garantissent la cohérence et la qualité de toutes les interfaces utilisateur de la Caisse des Compensations du Bâtiment.
🚀 Mise en Œuvre
Inclure les fichiers CSS/JS
Ajoutez les liens vers corporate-design.css et corporate-design.js dans vos vues Razor.
Utiliser les variables CSS
Accédez aux couleurs, tailles et autres variables prédéfinies via les variables CSS natives.
Appliquer les classes
Utilisez les classes prédéfinies pour boutons, cartes, formulaires et autres composants.
Respecter les guidelines
Suivez les bonnes pratiques de responsive design et d'accessibilité.
🧩 Composants Disponibles
🎨 Design
- Palette de couleurs CCB
- Système typographique
- Glassmorphisme & effets
- Animations & transitions
🔧 UI Components
- Boutons (5 variantes)
- Cartes (4 types)
- Formulaires complets
- Navigation systems
📱 Responsive
- 6 breakpoints mobiles
- Navigation adaptative
- Grids responsives
- Images optimisées
⚙️ Utilitaires
- Badges & états
- Loaders & spinners
- Barres de progression
- Alertes & notifications
✨ Bonnes Pratiques
Cohérence
Utilisez toujours les mêmes composants et patterns à travers toutes les interfaces.
Mobile First
Concevez d'abord pour mobile, puis adaptez aux écrans plus larges.
Accessibilité
Respectez les standards WCAG avec contrastes suffisants et navigation clavier.
Performance
Optimisez les images, utilisez des animations GPU et minimisez le JavaScript.