Le design system Le Bon Recrutement
Tout ce qui fait la cohérence du site, à un seul endroit : couleurs, typographie, espacements, composants et règles d'usage du logo. Les valeurs sont définies dans assets/css/00-tokens.css.
Logo
Monogramme « LBR » tracé au trait arrondi sur un cartouche 3:2 à coins arrondis. Le mot-symbole met « Bon » en indigo (ou citron sur fond nuit). Zone de protection : la moitié de la hauteur du carré. Ne pas déformer, ne pas recolorer hors des trois variantes.
Fichiers livrés : assets/img/logo.svg, logo-dark.svg, mark.svg, mark-mono.svg, mark-citron.svg, favicon.svg.
Couleurs
#14123ffond sombre, titres#4b45e8action principale, liens#f3f06aaccent, surlignage, badges#eeedffsurfaces douces#ffffffpage#f7f7fcsections claires#ededf6surfaces secondaires#e3e3f0filets#22213atexte courant#7a7999texte secondaireUne seule couleur d'action (indigo), un seul accent (citron). Les couleurs sémantiques (succès, alerte, erreur) et les dix couleurs de secteurs sont distinctes de l'accent et ne servent qu'aux chips.
Typographie
Sora (800) pour les titres, interlettrage serré, lignes équilibrées. DM Sans pour le texte courant et l'interface. Étiquettes en capitales espacées.
.t-display · Sora 800 · clamp(2.7rem, 5.2rem)Le bon profil.t-h1 · Sora 800Titre de page.t-h2 · Sora 800Titre de section.t-h3 · Sora 700Titre de carte.t-lead · DM Sans 400Texte d'introduction, 1.2 à 1.4 rem, couleur secondaire.body · DM Sans 400 · 16px / 1.6Texte courant, environ 65 caractères par ligne..label · DM Sans 700 · capitalesÉtiquette de sectionEspacements et rayons
Échelle de 4 (--s-1 à --s-32). Rayons : 6 (chips), 10 (champs), 14 (cartes), 20 (panneaux), pilule (boutons).
Boutons et liens
Un seul bouton primaire par zone. Le citron sert aux actions sur fond nuit ou indigo.
Chips, badges, tampon
Formulaires
Signatures graphiques
Trois signes, utilisés avec parcimonie : le cadre photo incliné citron (.frame), le semis de points indigo (.dots), le coin citron sur les chiffres clés (.stat). Jamais les trois au même endroit.
Pictogrammes
Vingt-quatre pictogrammes dessinés sur une grille 48 × 48 (src/lib/pictos.js) : trait indigo 2,5 arrondi, un seul aplat citron par picto, silhouettes pleines pour les personnes. Toujours posés sur une tuile lavande ou blanche, jamais sur fond sombre. Dix pour les familles de métiers, quatorze pour le parcours et les engagements.