Système de Design du Maroc · v0.1

Un langage commun pour les services publics numériques.

لغة مشتركة للخدمات العمومية الرقميةⵜⵓⵜⵍⴰⵢⵜ ⵉⵛⵛⴰⵔⵏ ⵉ ⵜⵏⴰⴼⵓⵜⵉⵏ ⵜⵉⴳⴷⵓⴷⴰⵏⵉⵏ

DSM réunit fondations, composants et modèles pour concevoir des services publics cohérents, accessibles et trilingues — de l'arabe à l'amazighe, en RTL comme en LTR.

Prise en mainVoir les composants

Démarche · Gratuit

Demander un extrait d'acte de naissance

Livré en PDF signé sous 48 h.

En ligne
المملكة المغربيةⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱRoyaume du Maroc
ValidéeEn coursNouveau

Demande transmise

Référence N° 2026-04512 · suivi par SMS.

56

composants documentés

3

langues — ar · zgh · fr — RTL natif

2

thèmes, clair et sombre, par jetons

AA

contraste WCAG 2.2 sur tous les jetons

Principes

Conçu pour l'État, pensé pour les citoyens.

Composants

Des briques prêtes à l'emploi, du bouton au portail.

Tous les composants

Fondations

Les décisions de design, écrites une fois.

Modèles

Un portail national complet, en trois langues.

Page d'accueil, démarche en ligne pas à pas, page institutionnelle, recherche et pages d'erreur : des modèles réels, assemblés avec les composants du système.

Ouvrir la démoالنسخة العربيةⵜⴰⵎⴰⵣⵉⵖⵜ

Prise en main

Trois étapes, aucun verrou.

  1. 1

    Lancez npx dsm-maroc@latest init

    La CLI copie les sources dans votre projet et installe Base UI, CVA, clsx, tailwind-merge et Lucide.

  2. 2

    Le code vous appartient

    Composants, jetons, icônes et dictionnaires vivent dans src/dsm, à faire évoluer comme le reste.

  3. 3

    Branchez les fournisseurs

    Polices, ThemeProvider et LocaleProvider dans app/layout.tsx — le snippet est affiché en fin d'installation.

terminal
npx dsm-maroc@latest init
app/layout.tsx
import "./globals.css";
import { ThemeProvider } from "@/dsm/components/theme";
import { LocaleProvider } from "@/dsm/i18n/provider";

export default function RootLayout({ children }) {
  return (
    <html lang="fr" dir="ltr">
      <body>
        <ThemeProvider>
          <LocaleProvider locale="fr">{children}</LocaleProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}