Prise en main

Introduction

مقدمة

DSM (Système de Design du Maroc) est un système de design complet pour les services publics numériques marocains : des fondations (couleurs, typographie, espacements), une bibliothèque de composants React accessibles et trilingues, et des modèles de pages prêts à assembler.

Pourquoi un système de design ?

Comme le DSFR en France ou le GOV.UK Design System au Royaume-Uni, un système de design d'État donne aux équipes un socle commun : les citoyens reconnaissent immédiatement un service officiel, les équipes gagnent des semaines de conception, et l'accessibilité n'est plus une option mais une propriété du système.

DSM répond à une contrainte que peu de systèmes traitent nativement : trois langues et deux directions d'écriture. L'arabe (RTL), l'amazighe en tifinaghe et le français sont pris en charge par chaque composant, sans code spécifique côté produit.

Ce que contient DSM

  • Fondations

    Jetons de couleur, échelle typographique multi-scripts, espacements, motifs et mouvement — exposés en variables CSS et utilitaires Tailwind.

  • Composants

    Plus de cinquante composants React construits sur Base UI : en-tête, formulaires, navigation, contenu, retours, superpositions.

  • Modèles

    Un portail national de démonstration en trois langues : accueil, démarche pas à pas, page institutionnelle, recherche, erreurs.

  • Internationalisation

    Un fournisseur de locale, des dictionnaires ar / zgh / fr / en, une marque nationale trilingue et des icônes directionnelles.

Installation rapide

DSM n'est pas une bibliothèque à importer mais des sources copiées dans votre projet Next.js (App Router) et Tailwind v4 : vous possédez le code, et vous décidez quand reprendre une mise à jour. La CLI fait la copie.

terminal
npx dsm-maroc@latest init   # copie src/dsm, dsm.css, fonts.ts et public/patterns, installe les 5 dépendances
src/app/layout.tsx
import Script from "next/script";
import { fontVariables } from "./fonts";
import { ThemeProvider, themeInitScript } from "@/dsm/components/theme";
import { LocaleProvider } from "@/dsm/i18n/provider";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr" dir="ltr" className={fontVariables} suppressHydrationWarning>
      <head>
        <Script id="dsm-theme-init" strategy="beforeInteractive">{themeInitScript}</Script>
      </head>
      <body>
        <ThemeProvider>
          <LocaleProvider locale="fr">{children}</LocaleProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

Polices

Les polices (IBM Plex Sans, IBM Plex Sans Arabic, Noto Sans Tifinagh, IBM Plex Mono) sont chargées via next/font/google dans src/app/fonts.ts. Copiez ce fichier ou auto-hébergez les fichiers woff2.
Guide d'installation détaillé

Premier composant

import { Button } from "@/dsm/components/button";
import { Alert } from "@/dsm/components/alert";
import { ArrowForward } from "@/dsm/icons";

export function Demarche() {
  return (
    <>
      <Alert tone="info" title="Pièces à préparer">CNIE et justificatif de domicile.</Alert>
      <Button size="lg" iconEnd={<ArrowForward />}>Commencer la démarche</Button>
    </>
  );
}

Versions

v0.1 — septembre 2026

Première version publique : fondations, 53 composants documentés, modèles de portail et de démarche trilingues, documentation.

Licence

Le code de DSM est publié sous licence MIT. Les symboles nationaux (drapeau, étoile, dénominations officielles) restent la propriété du Royaume du Maroc et doivent être utilisés conformément à la réglementation en vigueur. DSM est un projet indépendant, non affilié à une administration.