Référentiel interne
Charte graphique ISOmase
La source de vérité visuelle de ISOmase : marque, couleurs, typographies et composants. La version technique détaillée vit dans docs/05-design-system.md.
L'esprit
Six règles non négociables. Tout écart se corrige, il ne se discute pas.
01
Aération d'abord
Fond non-blanc, cartes blanches, marges généreuses. Quand un écran semble chargé, retirer — jamais tasser.
02
La couleur seule ne dit rien
Tout statut ou domaine = couleur + icône ou texte. 8 % des hommes sont daltoniens rouge-vert.
03
Un seul bleu d'action
Le bleu primaire signale ce qui est cliquable. Le vert valide, il ne déclenche jamais. Un seul bouton primaire par écran.
04
Deux typos, graisses plafonnées
Outfit (titres) + Inter (corps). Jamais au-delà de 600 : l'impact vient de la taille, pas de la graisse.
05
Tokens ou rien
Aucune couleur, rayon ou ombre hors de globals.css. Un besoin non couvert ? On enrichit la charte, on n'improvise pas.
06
Le mouvement sert la lecture
150–300 ms, easing doux, jamais bloquant. Une animation qui se remarque est déjà trop longue.
Logo
Badge blanc, barres bleu/vert égales (isos = égal, les 3 domaines SSE) en escalier ascendant : l'amélioration continue, cœur du MASE. La version fond blanc est toujours privilégiée, sur tous les supports.
Couleur — défaut
Fonds clairs. Fichiers : brand/logo-color.svg, icon-color.svg
Monochrome
Contextes N&B, tampons, fax d'audit. Fichiers : logo-dark.svg, icon-dark.svg
Sur fond coloré
Sidebar app, bande CTA, photos. Fichiers : logo-light.svg, icon-light.svg
- · Zone de protection : au moins la moitié de la hauteur de l'icône.
- · Ne jamais recolorer, déformer, incliner ni ombrer.
- · Le nom s'écrit toujours via APP_NAME (src/lib/config.ts).
- · En React, utiliser Wordmark / LogoMark (vraie webfont, net partout).
Couleurs
Deux couleurs de marque, pas une de plus : le bleu agit (tout ce qui se clique), le vert valide et célèbre (jamais cliquable). Le reste est neutre et chaud. Mode clair uniquement.
Marque
primary-50
#EEF4FF
Fonds actifs, tint info
primary-100
#DCE7FD
Survols clairs, bordures douces
primary-300
#93B3F5
Décor, dataviz secondaire
primary-500
#2F5FE0
LE bleu — boutons, liens, focus, bande CTA
primary-600
#2348C7
Survol bouton · surface de la sidebar app
primary-700
#1E3A8A
Pressé, texte accentué sur fond clair
Neutres & surfaces
app
#FAFAF9
Fond général des pages (stone chaud)
surface
#FFFFFF
Cartes, champs, modales
surface-hover
#F5F5F4
Survol de surface ou de ligne
line
#E7E5E4
Bordures, séparateurs
content
#1C1917
Titres et corps de texte
content-muted
#57534E
Sous-titres, légendes
brand-green
#10B981
L'autre couleur de marque — logo, accents, KPI, dataviz. Jamais une action
Sémantiques
Chaque famille en trois rôles : solide (pastilles, icônes), soft (fonds de bandeaux), ink (texte sur fond clair).
Succès
Alerte
Danger
Info
Domaines SSE
Constantes dans toute l'app — un animateur doit reconnaître un domaine avant même de lire.
Sécurité
Santé
Environnement
Dataviz
Typographie
Outfit pour les titres, Inter pour tout le reste. Graisse maximale : 600 — l'impact vient de la taille.
Display XL
Outfit 600 · 60 px (mobile 36) · tracking -2 %
Hero du site vitrine uniquement
Aa
Titre de section
Outfit 600 · 30 px
Sections marketing, moments forts
Trois domaines, un système
H1 d'écran (app)
Outfit 600 · 24 px
Titre de chaque écran de l'app (PageHeader)
Plan d'action
Sous-section
Outfit 500 · 18 px
En-têtes de carte, sous-sections
Actions en retard
Corps
Inter 400 · 14 px (app) / 16 px (vitrine)
Texte courant
Le plan d'action enregistre toutes les actions : origine, pilote, échéance, avancement.
Label
Inter 500 · 13 px
Labels de champs, boutons, badges
Échéance de réalisation
Chiffres d'indicateurs (TF1, TF2, TG…) : Inter avec tabular-nums pour un alignement stable dans les tableaux.
Boutons
Un seul bouton primaire par écran. Le danger plein est réservé aux confirmations destructives.
Bandeaux sémantiques
Fond soft + texte ink + icône. Jamais de couleur seule.
Statuts
Pastille + libellé, toujours. Le composant StatusBadge est la seule implémentation autorisée.
Champs de formulaire
Labels toujours visibles, erreurs sous le champ, focus bleu bien marqué.
Aide contextuelle en 12 px, sous le champ.
Cartes KPI
Un seul indicateur mis en avant par écran, en vert profond : celui qui compte. Les autres restent neutres. Chiffres en tabular-nums.
Causeries réalisées
12/12
Objectif annuel atteint
TF1
8,4
12 derniers mois
Actions en cours
23
dont 2 en retard
Remontées ce mois
17
+5 vs mois dernier
Rayons
Quatre valeurs, pas une de plus.
sm 6 px
Mini-badges, éléments denses
md 8 px
Champs, petits boutons
lg 12 px
Boutons, bandeaux
xl 16 px
Cartes, modales
pill 9999 px
Pastilles de statut
Mouvement
Rapide, doux, discret. Le mouvement guide l'œil, il ne se donne pas en spectacle.
Micro (150 ms)
Survols, pressés, changements de teinte. La sensation de réactivité.
Standard (200 ms)
Menus, tooltips, apparitions de panneaux. L'essentiel des transitions.
Entrée (300–700 ms)
Arrivée d'une page ou d'une section (fade + léger slide). Une fois, jamais en boucle.
Ambiance (36–56 s)
Dérive du fond aurora de la vitrine — la seule boucle autorisée. Vous la voyez vivre derrière cette page.