Fondations

Motifs & identité

الرموز والزخارف

La marque nationale, le filet tricolore et la tessellation en étoile à huit branches (khatam) forment le vocabulaire visuel de DSM. Ce sont des signatures à utiliser avec retenue : elles identifient un service officiel sans jamais concurrencer son contenu.

La marque nationale (BlockMark)

L'emblème et le nom du Royaume en trois lignes — arabe, tifinaghe, français — accompagnés en option du nom de l'institution.

المملكة المغربيةⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱRoyaume du Marocsize="sm"

المملكة المغربيةⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱRoyaume du Marocsize="md" (défaut)

المملكة المغربيةⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱRoyaume du Marocsize="lg"

Avec entité

المملكة المغربيةⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱRoyaume du MarocMinistère de l'Intérieur

Sur fond sombre — inverse

المملكة المغربيةⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱRoyaume du MarocPortail national des démarches

L'emblème

L'étoile chérifienne à cinq branches, entrelacée, verte sur fond rouge. En version inverse elle passe en currentColor pour s'adapter au fond.

Règles d'usage de la marque

Ne jamais recolorer
L'emblème garde ses couleurs officielles (vert sur rouge) ; seule la variante inverse (currentColor) est autorisée sur fond sombre ou de marque.
Taille minimale
N'utilisez pas la marque en dessous de la taille sm (36px). En dessous, elle devient illisible et perd sa valeur de preuve d'officialité.
Espace de respiration
Réservez tout autour de la marque un espace au moins égal à la hauteur de l'emblème, libre de tout autre élément graphique.
Une seule marque par écran
La marque nationale apparaît dans l'en-tête et, si besoin, le pied de page — jamais répétée dans le corps de page.

Le filet

Un trait identitaire de 3px : le vert amorce, le rouge poursuit. Il ouvre l'en-tête, ferme le pied de page et souligne les éléments d'introduction (« eyebrows »).

LTR — le vert amorce à gauche

RTL — le vert amorce à droite

Variante dsm-filet-ink (rouge → encre)

Le vert marque toujours le début de la lecture, quelle que soit la direction : c'est le repère qui reste stable pendant que le rouge se déplace.

<div className="dsm-filet" />
<div className="dsm-filet-ink" />

Le khatam

Une tessellation en étoile à huit branches, motif géométrique traditionnel des zelliges marocains, réduite à un usage strictement décoratif et discret.

Géométrie & technique

Le motif est fourni sous forme d'image SVG utilisée comme masque CSS (mask-image), répétée tous les 96px (--dsm-pattern-size). La couleur visible n'est pas dans le fichier : elle vient de background-color: currentColor, donc du text-* posé sur l'élément. Un même motif se teinte ainsi en vert, rouge ou encre sans ressource graphique supplémentaire.

Trois teintes, faible opacité

text-vert · opacity-15

text-rouge · opacity-15

text-ink · opacity-15

Fondus directionnels

fade-end

fade-start

fade-radial

fade-bottom

Portail national

Des démarches administratives simples, accessibles à tous les citoyens

Exemple d'usage héroïque : le khatam reste un arrière-plan discret, jamais un obstacle à la lecture du titre.

<div className="relative overflow-hidden rounded-xl bg-surface-inverse p-10">
  <div className="dsm-khatam-fade-radial absolute inset-0 text-ink-inverse opacity-[0.08]" aria-hidden />
  <div className="relative">…contenu…</div>
</div>

RTL

À faire / à éviter

À faire

Garder l'opacité d'un motif khatam à 0,15 ou moins derrière du texte.
N'employer qu'un seul motif signature par composition.
Laisser le filet amorcer en vert dans le sens de lecture.
Réserver le chanfrein aux blocs d'accent, jamais aux cartes de contenu.

À éviter

Superposer khatam, bande et arche dans une même zone.
Recolorer l'emblème ou inverser vert et rouge du filet.
Poser un motif à plus de 0,15 d'opacité derrière un paragraphe.
Utiliser la marque nationale en dessous de la taille sm.

Utilisation

import { BlockMark } from "@/dsm/components/block-mark";

<BlockMark
  size="md"
  entity={{ fr: "Ministère de l'Intérieur", ar: "وزارة الداخلية" }}
/>

Ressources

Les fichiers sources des motifs vivent dans public/patterns/ (khatam.svg, khatam-fill.svg, band.svg) et sont consommés uniquement via les utilitaires dsm-* de globals.css.