Design System
Guide des composants et de la charte graphique
Palette de Couleurs
Brand Colors
Primary
#027FBC
Soft
#CDE9F8
Text Colors
Ink (Titles)
#07212D
Text
#2B5A6F
Surface Colors
Background
#F4FBFF
Surface
#FFFFFF
Status Colors
Success
#1E8E5A
Warning
#C28A00
Danger
#C64545
Typographie
Titre H1 - Design System Professionnel
font-size: 2.5rem; font-weight: 700;
Titre H2 - Sections Principales
font-size: 2rem; font-weight: 600;
Titre H3 - Sous-sections
font-size: 1.5rem; font-weight: 600;
Paragraphe normal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
font-size: 1rem; line-height: 1.6;
Texte petit pour les notes et légendes
font-size: 0.875rem;
Buttons
Variants
Sizes
As Links
Badges
Success
Warning
Danger
Info
Cards
Card avec Titre
Voici le contenu d'une card typique. Les cards sont idéales pour organiser l'information en blocs visuels distincts.
Card avec Footer
Cette card contient un footer en plus du header et du body.
Card sans Titre
Une card peut aussi être utilisée sans titre, pour une mise en page plus flexible.
Alerts
Ceci est un message de succès.
Attention : ceci est un avertissement important.
Erreur : quelque chose s'est mal passé.
Information : voici une information utile.
Alert dismissible avec bouton de fermeture.
Layout Utilities
Container
Le container est déjà appliqué sur cette page. Largeur max: 1200px, padding responsive.
Stack (Vertical Spacing)
Item 1
Item 2
Item 3
Stack Horizontal
Item 1
Item 2
Item 3
Grid-2 (2 Columns)
Column 1
Column 2
Column 3
Column 4
Design Tokens
Spacing Scale
--spacing-1 (0.25rem)
--spacing-2 (0.5rem)
--spacing-3 (0.75rem)
--spacing-4 (1rem)
--spacing-6 (1.5rem)
--spacing-8 (2rem)
Border Radius
--radius-sm
--radius-md
--radius-lg
Shadows
--shadow-sm
--shadow-md
--shadow-lg