Éléments UI
🖌️ Palette de couleurs
Rôle Couleur Usage
Primaire #0C2B4E Boutons principaux, liens,
en-têtes
Secondaire #F4F4F4 Accents, effets hover, surbrillance
Texte #1A1A1A Paragraphes, titres
principal
Fond clair #F4F4F4 Pages, cartes (cards)
Fond sombre #0C2B4E Navbar, footer
Erreur #E63946 Messages d’erreur
Succès #2A9D8F Validations, notifications
✅ Contraste vérifié – conforme WCAG AA
🔗 Outil utilisé : Color Palette: #0C2B4E #1A3D64 #1D546C #F4F4F4 - Color Hunt
🅰️ Typographie
Type Police Usage
Principale Poppins (Google Titres et textes : moderne,
Fonts) lisible
Secondair Open Sans(Google Paragraphes longs et interfaces
e Fonts)
● H1 → 36 px / bold / line-height 120 %
● H2 → 24–28 px / semibold
● Body (texte courant) → 16–18 px / regular
● Caption (légende) → 12–14 px
🧩Google Fonts
🧱 Layout & Grille
Élément Desktop Référence
Container max-width : 1280 px / Tailwind
padding : 32 px max-w-screen-xl
Grille 12 colonnes / 8 px grid Material Design
Grid
Spacing 8 / 16 / 24 / 32 / 48 / 64 px 8pt System
scale
🔘 Composants UI
Boutons
Type Style Spécifications
Primaire Fond #3034B0, texte blanc Min. 48×32 px, radius 8 px,
padding 16 px
Secondair Bordure #3034B0, texte bleu, fond Hover : fond bleu clair
e transparent
Désactivé Gris clair #D1D5DB Opacité 0.6, curseur inactif
🔗 Référence : Material Buttons / Bootstrap .btn-primary
Cards
● Largeur : 320–400 px
● Padding : 16–24 px
● Ombre douce : niveau 2
● Coins arrondis : 8 px
● Image : ratio 16:9
● Espacement texte : 16 px
Navbar
● Hauteur : 64 px
● Padding : 24 px
● Couleur de fond : #0C2B4E
● Texte clair, logo bien visible
● Position sticky top
● Icônes : 24 px max
Footer
● Hauteur : 80–120 px
● Fond sombre à contraste fort
● Liens accessibles (underline au focus)
● Texte : 14–16 px
🔗 Référence : Apple HIG Structure
🧾 Formulaires
Élément Spécifications
Input / champ texte Hauteur 44 px, padding 12–16 px, label toujours visible
Focus Outline bleu #3034B0
Erreur Couleur #E63946, texte 12–14 px
Accessibilité Ne jamais indiquer une erreur uniquement par la couleur
🔗 Référence : WCAG & Bootstrap Form Controls
🖼️ Images & Icônes
Type Format Règles
Logo principal SVG + PNG (256×256 px) Version claire et sombre
Icônes SVG 24×24 px Matérial ou Phosphor Icons
Bannières / Hero JPG / WebP (1920×1080 px) Poids < 300 kb,
compressées
Images de Cards Ratio 16:9 (960×540 px) Lazy-loading activé
♿ Accessibilité
● Ratio de contraste ≥ 4.5:1
● Zone cliquable minimale 44×44 px
● Labels toujours visibles
● Texte alternatif descriptif sur toutes les images
● Focus visible (bordure bleue claire)
● Navigation clavier complète (tabindex fonctionnel)
