v0.1 — Alpha publique

Le design system
de l'État malien

Un cadre de conception et de développement officiel, léger et accessible, pour tous les services numériques de l'administration malienne.

Démarrer maintenant Voir sur GitHub

Identité d'État

Charte graphique officielle de la République du Mali, intégrée par défaut.

Aucune dépendance

Une seule ligne de CSS. Zéro JavaScript requis, zéro Node.js.

Responsive natif

Conçu pour tous les écrans, du mobile aux bornes administratives.

Licence MIT

Projet ouvert, librement réutilisable pour tout service public malien.

Démarrage

Intégrez le DSML

Sans Node.js, sans bundler. Une ligne de CSS suffit pour commencer.

Copiez le lien CSS

Ajoutez une seule balise dans votre <head>.

Utilisez les classes

Chaque composant s'active avec une simple classe HTML sémantique.

<button class="ml-btn ml-btn-primary">
Envoyer la demande
</button>

Livrez votre service

Le design est conforme aux standards de l'État malien. Aucune configuration.

✓ Identité d'État intégrée
✓ Responsive & accessible
✓ 0 dépendance JS requise

Aperçu

Des composants prêts à l'emploi

Boutons, alertes, badges et cartes — tous construits avec du HTML sémantique pur.

Boutons

Primaire Secondaire Accent Ghost

Badges & Statuts

Approuvé En attente Rejeté En cours

Alertes

Votre dossier a été transmis avec succès.

Ce formulaire est officiel et sécurisé.

Carte (Card)

Mairie de Bamako

Services administratifs en ligne — état civil, permis, foncier.

Consulter →

Documentation

Explorer le système

Fondations, composants et gabarits — une documentation complète pour chaque besoin.

Fondations

Couleurs officielles, typographie, espacements, rayons et ombres — les tokens fondamentaux.

Composants

Boutons, alertes, cartes, formulaires, accordéons, badges et modules interactifs.

En-tête & Pied de page

En-têtes officiels, pieds de page de la République, et agencements complets prêts à l'emploi.

Installation

Guide d'intégration en quelques minutes, avec ou sans outil de build.

Code

Intégrez en 30 secondes

Copiez ce bloc dans le <head> de vos pages.

index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">


<link rel="stylesheet" href="https://cdn.dsml.ml/v0.1/dsml.css">

Contribuez au Design System Mali

Le DSML est un projet ouvert. Signalez un bug, proposez un composant ou améliorez la documentation.

Ouvrir sur GitHub Guide de contribution

Le design system de l'État malien