Prise en main

Principes

المبادئ

Six principes gouvernent chaque décision de conception dans DSM, des jetons de couleur au dernier composant. Ils servent de test simple face à un choix incertain : est-ce que ça sert la clarté, les trois langues, l'accessibilité, la chaleur institutionnelle, la sobriété du mouvement et l'ouverture du système ?

Les six principes

01

Clarté administrative

Un service public numérique se comprend en un coup d'œil : ce qu'il faut faire, ce qu'il faut fournir, combien de temps ça prend.

Concrètement

  • Le titre de page nomme l'action attendue, pas le nom interne du service ou de l'application.
  • Délais, pièces requises et coûts sont annoncés avant de commencer la démarche, pas découverts en cours de route.
  • Un seul appel à l'action principal par écran ; le reste est secondaire ou tertiaire.
« Demander un acte de naissance »
« Module ETAT-CIVIL-002 »
02

Trois langues, une expérience

L'arabe, l'amazighe et le français ne sont pas des traductions ajoutées après coup : ce sont trois manières égales de vivre le même service.

Concrètement

  • Aucun texte n'est écrit en dur dans un composant : tout passe par le dictionnaire i18n ou par les props de contenu.
  • La mise en page s'exprime en propriétés logiques (ps, pe, text-start…), jamais en gauche/droite physique.
  • Chaque script porte sa propre police et son propre réglage d'interligne, appliqués automatiquement par lang.
Tester chaque écran dans les trois langues avant de le livrer
Livrer « en français d'abord, on traduira plus tard »
03

Accessible d'abord

L'accessibilité se décide à la conception, pas en correction après un audit.

Concrètement

  • Les interactions complexes (dialogue, menu, onglets, accordéon) s'appuient sur Base UI plutôt que d'être réinventées.
  • Le contraste et le focus sont garantis par les jetons de couleur et le style de focus global, pas vérifiés à l'œil au cas par cas.
  • Chaque parcours critique est testé au clavier avant la revue de code.
Poser le label d'un champ avant de le styliser
Masquer le contour de focus sans le remplacer par un style visible
04

Institutionnel et chaleureux

Un site officiel inspire confiance sans être froid : la rigueur administrative peut rester accueillante.

Concrètement

  • Une palette de neutres chauds (sable, tadelakt) plutôt qu'un gris froid de tableau de bord.
  • Les signatures visuelles marocaines (filet, khatam, arche) s'utilisent avec retenue, jamais en fond systématique.
  • Une voix directe et respectueuse, ni familière ni bureaucratique.
Garder une seule signature visuelle par composition
Transformer une page de démarche en vitrine décorative
05

Sobriété du mouvement

Le mouvement confirme un changement d'état, il ne le célèbre pas.

Concrètement

  • Deux courbes d'accélération et trois durées, appliquées de la même façon dans tout le système.
  • Aucune transition ni animation d'entrée ne dépasse 360 ms.
  • prefers-reduced-motion est respecté globalement, sans réglage à ajouter dans les composants.
Utiliser animate-dsm-up pour une alerte ou une carte qui apparaît
Ajouter un rebond ou un effet de ressort « pour le style »
06

Ouvert et composable

DSM se copie, se lit et se modifie : aucune boîte noire, aucune dépendance à un service propriétaire.

Concrètement

  • Un composant par fichier, des exports nommés, des props typées et un fichier de métadonnées documenté.
  • Les styles sont des utilitaires Tailwind posés sur les jetons du système, jamais du CSS isolé ou des couleurs arbitraires.
  • Toute nouveauté commence comme un composant réutilisable, avant d'être traitée comme un cas particulier.
Composer un nouvel écran à partir des composants existants
Dupliquer un composant pour n'en changer qu'une couleur

Conventions de nommage

Le nom d'un composant change selon qu'on en parle ou qu'on l'importe.

Dans la documentation

Le nom français, celui que lira une équipe métier : « Bouton », « Alerte », « Marque bloc ». Il apparaît dans le titre de page, la navigation et la prose.

Dans le code

Le nom anglais, celui qu'on importe : Button, Alert, BlockMark. Aucun renommage à la traduction : les identifiants restent stables d'une langue à l'autre.

// Fichier de métadonnées d'un composant (src/content/examples/button/meta.ts)
const meta: ComponentMeta = {
  title: "Bouton",     // affiché dans la documentation
  titleAr: "زر",
  titleEn: "Button",
  file: "src/dsm/components/button.tsx", // export nommé : Button
};

Règles de contribution

  • Un composant par fichier, en kebab-case, avec des exports nommés uniquement — jamais d'export par défaut.
  • Chaque prop exportée est typée (export type XProps) et documentée dans le fichier de métadonnées associé.
  • Aucune couleur, ombre ou rayon en dehors des jetons DESIGN.md : pas de hex, pas de classe Tailwind par défaut désactivée.
  • Toute chaîne visible par l'utilisateur passe par une prop de contenu ou par UiStrings, traduite dans les quatre langues.
  • Chaque composant interactif est vérifié au clavier et en dir="rtl" avant relecture.
  • Pas de TODO ni de contenu de remplissage : les exemples utilisent des données réalistes de service public marocain.