Charte
graphique Mariam
L'identité visuelle officielle de Mariam : ses couleurs, ses typographies, son iconographie et les règles d'usage du logo. Cette page documente le Design System tel qu'il vit aujourd'hui dans le produit.
Le wordmark Mariam
Le logo est la signature visuelle de la marque. Il s'utilise sur fond clair en priorité. Trois variantes officielles sont disponibles, chacune adaptée à un type d'environnement.
Favicon
Variante carrée pour onglets, app icon et fonds réduits.
Zone de protection
Marge minimale autour du logo : la hauteur du M sur chaque côté.
Tailles minimales
24 px En dessous, privilégier la favicon. La lisibilité du wordmark prime.
Usages interdits
Palette de marque
Trois familles structurent l'identité chromatique : un bleu profond comme couleur de marque, un saffran comme accent ponctuel, et une échelle neutre qui porte la majorité de l'interface.
Mariam Blue
Couleur de marque · primaireAccent · Saffran
Highlights · pills · campagnesNeutres
Texte · surfaces · borduresSix teintes pour le menu
Chaque carte de plat ou de catégorie utilise l'une de ces six teintes, avec un bord inférieur de 4px plus sombre. Cette signature crée un léger relief 3D, structure le scan visuel et permet une distinction tactile immédiate sur écran TV comme sur mobile.
États du système
Quatre couleurs sémantiques pour communiquer l'état d'une action ou d'un message. Chacune est définie en OKLCH avec une variante claire et une variante texte qui assurent un contraste accessible (AA minimum).
Trois fontes
Mariam s'écrit avec trois fontes distinctes, chacune avec un rôle précis. Inter structure l'interface, Fugaz One donne le ton sur les affiches, et Climate Crisis ponctue les campagnes éditoriales.
Inter
Variable de 100 à 900. Lisibilité optimale aux petites tailles, reste élégante en grande échelle. Notre fonte par défaut.
Fugaz One
Sans serif géométrique, en UPPERCASE pour les titres, affiches et le wordmark. Présence forte, identité immédiatement reconnaissable.
Climate Crisis
Une fonte variable expressive, à n'utiliser qu'avec parcimonie pour les accents éditoriaux ou les campagnes ponctuelles. Jamais en corps.
Une seule famille
Mariam utilise exclusivement Lucide pour son iconographie — du dashboard admin aux apps mobile et TV. Cohérence visuelle garantie, traits de 1.5px, coins arrondis subtils.
Plus de 1 600 icônes open source, libres d'utilisation sous licence ISC. Lucide est issu d'un fork de Feather Icons (par Cole Bemis) et maintenu par une communauté active. Chaque icône est dessinée sur une grille de 24×24 avec un trait de 2px.
lucide.devEspacement, rayons, ombres
Les unités structurelles de l'interface. Toutes définies en variables CSS et exposées via Tailwind.