Fondations

Couleurs

الألوان

Une palette courte et signifiante : deux couleurs nationales, un bleu de lien, un safran d'alerte et une gamme de neutres chauds inspirés du sable et du tadelakt. Chaque couleur existe en clair et en sombre, et n'est jamais le seul vecteur d'information.

Principes

  • Le vert agit

    Le vert est la couleur de l'action : boutons principaux, éléments sélectionnés, succès. Il ne sert jamais de décor.

  • Le rouge signe

    Le rouge porte l'identité (marque, filet) et l'erreur. Son usage décoratif est limité au filet et à la marque nationale.

  • Les neutres portent

    Fonds, textes et filets forment 90 % de chaque écran. Ils sont chauds, jamais gris froid, pour une lecture apaisée.

Couleurs de marque

Les quatre teintes portent une signification fixe dans tout le système.

  • Aa

    Vert Maroc

    --dsm-vert

    #0B6B3F · #3FA870

    Action principale, succès, marque.

  • Aa

    Rouge Maroc

    --dsm-rouge

    #B5202C · #E4606A

    Accent identitaire, erreur, danger.

  • Aa

    Bleu Majorelle

    --dsm-bleu

    #2B3FA8 · #8C9BF2

    Liens, focus, information.

  • Aa

    Safran

    --dsm-safran

    #C4720A · #E9A23B

    Avertissement, mise en garde.

Teintes douces

Fonds légers associés à une couleur de texte dédiée (-soft-fg), pour les badges, alertes et états sélectionnés.

  • Aa

    Vert doux

    --dsm-vert-soft

    #E4F3EA · #12291D

  • Aa

    Rouge doux

    --dsm-rouge-soft

    #FBEBEC · #3A1A1D

  • Aa

    Bleu doux

    --dsm-bleu-soft

    #E9ECFA · #1B1F3A

  • Aa

    Safran doux

    --dsm-safran-soft

    #FCF0DB · #33240F

Neutres

Une gamme sable : quatre surfaces, trois encres, deux filets.

  • Aa

    Toile

    --dsm-canvas

    #FAF7F1 · #121110

    Fond de page.

  • Aa

    Surface

    --dsm-surface

    #FFFFFF · #1A1917

    Cartes, en-tête, panneaux.

  • Aa

    Surface atténuée

    --dsm-surface-muted

    #F4EFE7 · #23211E

    Bandes, survols.

  • Aa

    Surface enfoncée

    --dsm-surface-sunken

    #ECE6DB · #0D0C0B

    Pistes, arrière-plans profonds.

  • Aa

    Surface inverse

    --dsm-surface-inverse

    #1C1A17 · #F3EEE6

    Bandeaux à fort contraste.

  • Aa

    Encre

    --dsm-ink

    #1C1A17 · #F3EEE6

    Texte principal.

  • Aa

    Encre atténuée

    --dsm-ink-muted

    #5A554D · #B5AEA3

    Texte secondaire.

  • Aa

    Encre discrète

    --dsm-ink-subtle

    #8B857B · #7F7970

    Métadonnées, icônes inactives.

  • Aa

    Filet

    --dsm-line

    #E4DDD2 · #2E2B27

    Bordures par défaut.

  • Aa

    Filet fort

    --dsm-line-strong

    #C6BDAF · #47433D

    Contours de champs.

Jetons sémantiques

Les composants n'utilisent que des alias sémantiques ; changer une couleur de marque met à jour tout le système.

AliasPointe versUsage
primary / primary-hover / primary-fgvertBoutons principaux, sélection, progression
accentrougeMarque, filet, accents identitaires
link / link-hoverbleuLiens dans le texte
focusbleuAnneau de focus clavier
info / info-soft / info-soft-fgbleuMessages d'information
success / success-soft / success-soft-fgvertConfirmations, statuts validés
warning / warning-soft / warning-soft-fgsafranMises en garde
error / error-soft / error-soft-fgrougeErreurs de saisie, statuts refusés

Contraste & accessibilité

Tous les jetons de texte atteignent AA (4,5:1)

Vert sur blanc 6,6:1 · Rouge sur blanc 6,5:1 · Bleu sur blanc 8,8:1 · Encre atténuée sur toile 6,9:1. Le safran est réservé aux fonds et icônes ; le texte d'avertissement utilise warning-soft-fg.

En mode sombre, les couleurs de marque sont éclaircies et le texte des boutons principaux passe à l'encre foncée (primary-fg) pour préserver le contraste. N'utilisez jamais text-white sur bg-primary.

Utilisation

<div className="bg-surface text-ink border border-line">
  <button className="bg-primary text-primary-fg hover:bg-primary-hover">Valider</button>
  <span className="bg-success-soft text-success-soft-fg">Validée</span>
  <a className="text-link hover:text-link-hover">En savoir plus</a>
</div>

Les variables CSS sont définies dans src/app/globals.css sous le préfixe --dsm- et exposées à Tailwind via @theme inline.