Une famille, des outils

Principes

• Une famille, des outils. Chaque outil garde son nom, mais partage la barre du haut (lssd-header), les boutons, les champs, les cartes et les couleurs. Rien de spécifique à un outil ne redéfinit un token.
• Sobre et fiable. Bordures fines plutôt qu’ombres, une seule couleur d’action (émeraude), pas de dégradés dans les interfaces. Le site vitrine peut ajouter le halo shadow-glow et la grille de fond ; les outils, non.
• Clair par défaut, sombre au choix. Chaque outil propose les deux thèmes ; le clair s’applique tant que l’utilisateur ou son système n’a pas choisi le sombre. Jamais de couleur en dur : uniquement les variables de la librairie.

Ton et contenu

• On vouvoie dans les interfaces (« Ajoutez une dépense »), comme sur lssd.fr. Le tutoiement est interdit.
• Phrases courtes, verbes d’action sur les boutons : « Enregistrer », « Ajouter un événement », pas « OK » ni « Valider ».
• Majuscule au premier mot seulement : « Prochaines échéances », pas « Prochaines Échéances ».
• Pas d’emoji dans l’interface. Les icônes viennent de Lucide (voir Iconographie).
• Les noms d’outils s’écrivent « LSSD Calendar », « LSSD Budget », « LSSD Learning » dans les titres de page, les métadonnées et les e-mails ; dans la barre du haut, la marque et le nom de l’outil sont séparés visuellement.
• Le texte de l’interface est en français par défaut et passe par le système de traduction de l’outil, jamais en dur dans le code.

Couleur

• Fond de page bg, cartes et panneaux surface, zones en retrait surface-2.
• Texte principal ink, secondaire muted. Les deux tiennent au moins 4.5:1 sur bg, surface, surface-2 et accent-soft dans les deux thèmes.
• Une seule couleur d’action : accent. Bouton principal en accent avec texte on-accent, survol accent-hover. Un seul bouton principal par zone.
• Liens et texte accentué en accent-ink. Sélection et onglet actif sur accent-soft.
• info (bleu ciel) signale une information ou un état en cours ; jamais en fond de bouton.
• États : success, warn, danger. Toujours accompagnés d’un mot ou d’une icône, jamais de la couleur seule.
• Bordures décoratives en line ; bordures de contrôles (champs, cases, bouton secondaire) en line-strong, qui tient 3:1.
• Les couleurs propres à un domaine (catégories de budget, couleurs d’agenda, domaines de Learning) restent des données utilisateur : elles colorent une pastille ou un liseré, jamais un fond de texte.

Toutes les valeurs, dans les deux thèmes : Fondations · Couleurs.

Typographie

• Titres en font-display (Cabinet Grotesk), texte en font-sans (General Sans), code en font-mono.
• title-1 une fois par écran, title-2 pour les sections et cartes, title-3 pour les sous-titres. display est réservé aux accroches de page d’accueil.
• Texte courant en body (15px). Libellés et boutons en label. Aides et métadonnées en small couleur muted.
• text-overline en majuscules pour la catégorie au-dessus d’un titre de carte et dans les badges.
• Les deux polices sont servies gratuitement par Fontshare. Les champs de saisie gardent 16px minimum sur mobile pour éviter le zoom d’iOS.

Espacement et forme

• Grille de 4px : space-1 à space-12 (p-1 à p-12 en Tailwind). Padding de carte space-6, écart entre champs space-4, entre sections space-8.
• Boutons et badges en radius-pill : c’est la forme qui fait reconnaître LSSD.
• Champs et onglets en radius-md, cartes et boîtes de dialogue en radius-lg.
• Hauteur de contrôle : 40px (boutons, champs) ; 32px pour la taille compacte.
• Largeur de contenu : 1200px maximum (max-w-content), marges latérales space-4 sur mobile, space-6 au-delà de 640px.
• Les cartes ordinaires n’ont qu’une bordure line ; shadow-soft est réservée à la carte vedette, aux menus et aux boîtes de dialogue.

États et accessibilité

• Focus clavier : anneau plein de 2px en focus, décalé de 2px, sur tout élément interactif. Ne jamais le supprimer.
• Désactivé : opacité 0.5 et curseur par défaut, pas de changement de couleur.
• Survol : bouton principal → accent-hover ; secondaire et fantôme → fond surface-2.
• Transitions de 150ms sur couleur et fond, rien d’autre ne bouge. Sous prefers-reduced-motion, aucune animation.
• Contraste : 4.5:1 minimum pour le texte, 3:1 pour les bordures de contrôles, les icônes et l’anneau de focus.
• Chaque champ a un libellé visible relié par for/id ; le placeholder ne remplace jamais le libellé.
• Une erreur se signale par un texte qui commence par « Erreur : », relié au champ par aria-describedby, et par aria-invalid="true" : jamais par la seule bordure rouge.
• Un bouton qui ne contient qu’une icône porte un aria-label.
• Chaque page commence par un lien d’évitement « Aller au contenu » et n’a qu’un seul <h1>.

Iconographie

• Icônes Lucide uniquement, trait 2px, 16px dans les boutons et champs, 20px dans la barre du haut.
• L’icône prend la couleur du texte qu’elle accompagne (stroke="currentColor").
• Une icône décorative porte aria-hidden="true" ; une icône seule dans un bouton est nommée par le bouton.

Logo

• Le symbole LSSD (assets/lssd-mark.svg dans la librairie) est monochrome noir et carré.
• Il est toujours posé sur sa pastille blanche (lssd-header__mark), y compris en thème sombre. Ne l’inversez pas.
• Taille minimale : 20px.
• Le nom complet « Labs Services Solutions Digital » s’écrit toujours tel quel, en anglais.