Charte Graphique Officielle

Bibliothèque de Composants DSML

Explorez l'ensemble des palettes chromatiques, typographies, boutons, badges, icônes et composants de formulaires conçus pour garantir des interfaces institutionnelles harmonieuses et accessibles.

🎨 Palettes Chromatiques 🔘 Boutons & Actions 🏷️ Badges & Statuts ✨ Iconographie DSML 📝 Formulaires Administratifs 🏛️ Motifs Traditionnels
01 / Design Tokens

Palettes Chromatiques DSML

Vert République

Sceau d'État & Identité

Vert 50 #EAF3EC
Vert 300 #55AA6F
Vert 500 #0B7A2F
Vert 700 #085020
Vert 900 #0A3D1C

Orange Mandingue

Terre cuite & Dynamisme

Mandingue 50 #FFF3E0
Mandingue 100 #FFE0B2
Orange #E65100
Mandingue 500 #F57C00
Mandingue 900 #BF360C

Bleu Fleuve Niger

Eau, Sérénité & Connexion

River 50 #F0F7F9
River 200 #B5DDE7
River 500 #1B7A94
River 700 #0F4858
River 900 #0C3642

Indigo & Djenné

Étoffes & Savoirs

Indigo 50 #EEF2FF
Indigo 300 #93C5FD
Indigo 500 #3730A3
Indigo 700 #231E66
Indigo 900 #120F36

Bogolan & Terre

Argile, Kaolin & Ocre

Kaolin #FBF8F1
Sable #EFE4D1
Ocre #D97706
Argile #C25E25
Nuit #1C1917
02 / Interactions

Boutons & Actions (.ml-btn)

Variantes de Boutons

Tailles & États

03 / Signalétique

Badges & Statuts (.ml-badge)

ml-badge (Défaut) ml-badge-info ml-badge-success ml-badge-warning ml-badge-error ml-badge-admin
04 / Graphisme

Iconographie (.ml-icon-*)

Flèche Droite ml-icon-arrow-right-line
Vérifié / Check ml-icon-checkbox-circle-fill
Document / Fichier ml-icon-file-text-line
Téléchargement ml-icon-download-line
Utilisateur / Profil ml-icon-user-line
Sécurité / Cadenas ml-icon-shield-line
Information ml-icon-information-line
Calendrier / Date ml-icon-calendar-event-line
Recherche ml-icon-search-line
Paramètres ml-icon-settings-5-line
05 / Saisie de données

Composants de Formulaires

Composant Stepper (Procédure Multi-Étapes)

  1. 1 Identité Usager
  2. 2 Téléversement Documents
  3. 3 Validation & Récépissé
Cliquer pour parcourir ou glisser le document

PDF, PNG, JPG (Max 5 Mo)

06 / Patrimoine Visuel

Motifs & Filigranes (.ml-pattern-*)

.ml-pattern-bogolan

Motif Bogolan

Inspiré des textiles sacrés teints à l'argile du Mandé. Géométrie pure et textures d'inspiration artisanale.

.ml-pattern-wax

Rosace Soleil Wax

Rosaces solaires et motifs d'étoffes festivales apportant rayonnement et prestige aux événements.

.ml-pattern-soleil

Soleil d'Or & Lumière

Rayons solaires géométriques symbolisant la clarté et la transparence de l'action publique.