Introduction

Le DSML est le cadre de conception et de développement officiel proposé pour les administrations publiques maliennes.

Pourquoi le DSML ?

Le Design System Mali (DSML) a été conçu pour structurer, standardiser et accélérer le développement des produits numériques de l'État malien. Il répond à une triple exigence :

🏛️

Cohérence d'identité

Une signature d'État sobre, rassurante et professionnelle pour l'ensemble des sites administratifs maliens.

⚡

Performance technique

Extrêmement léger (HTML/CSS pur), sans frameworks lourds. Optimisé pour les connexions 3G/4G au Mali.

♿

Accessibilité

Bonnes pratiques ARIA, contraste WCAG AA, navigation clavier — pour tous les usagers.

Principes fondateurs

Zéro dépendance

Le cœur du DSML est du HTML + CSS + JS vanilla. Aucun framework ou bundler requis pour intégrer et utiliser le système. N'importe quelle équipe, même sans Node.js, peut l'adopter immédiatement.

HTML-first

Le DSML suit la philosophie du web sémantique. Chaque composant fonctionne avec du HTML natif enrichi de classes CSS. Les frameworks (Vue, React) arrivent en couche optionnelle, pas en prérequis.

Performance avant tout

Le fichier dsml.css fait ~80 Ko (non-minifié). Pas de JavaScript requis pour les composants statiques. Conçu pour les connexions mobiles limitées et les appareils d'entrée de gamme.

Identité d'État, neutralité culturelle

La palette est sobre et neutre — jamais de motifs culturels excessifs. L'identité vient du drapeau, des armoiries et des trois couleurs nationales. Le système doit fonctionner pour tout ministère ou agence.

Convention technique

Anglais pour le code, français pour les contenus : Par respect des standards ouverts du web, toutes les classes CSS et variables CSS sont rédigées en anglais technique (ex : ml-btn, --ml-color-green-500). Les guides, la documentation et les sites d'application sont en français.

Architecture du dépôt

    
TEXT

dsml/
├── core/               ← Cœur CSS/HTML (zéro dépendance)
│   ├── css/
│   │   ├── dsml.css          # Feuille de style principale
│   │   └── dsml-icons.css    # Bibliothèque d'icônes
│   ├── js/
│   │   └── search.js         # Recherche docs (optionnel)
│   └── assets/
│       ├── logo-mali.svg     # Armoiries officielles
│       ├── logo-aes.svg      # Logo AES (optionnel)
│       ├── icons/            # Icônes SVG individuelles
│       └── pictograms/       # Pictogrammes DSML
├── extensions/         ← Futures extensions (dsml-vue, dsml-react)
├── docs/               ← Ce site de documentation (Astro)
├── README.md
└── LICENSE             # MIT

Prêt à démarrer ?

Intégrez le DSML en 3 minutes, sans Node.js.

Guide d'installation →