button-primary
Action principale d'une vue
- Quand l'utiliser
- L'action que la personne est venue faire sur la vue : valider, envoyer, créer.
- À éviter
- Pas plus d'un par bande ; pour une deuxième action, prendre le bouton secondaire.
Inventaire des composants
Bibliothèque HSK
Tous les composants décrits dans la charte du groupe (DESIGN.md de @humanskills/ui) et dans les spécifications produit design-intranet.md, design-event.md et design-ats.md. Chaque fiche donne le nom du composant, sa fonction, deux lignes de description et un rendu de ses variantes, reconstruit à partir des valeurs de la spec. Le site Monsieur Guiz est hors périmètre.
Tokens de la charte
Fondations
Les valeurs que tous les composants combinent. Un seul violet d'encre remplit, le violet électrique ne sert qu'aux signaux, aucune bordure ni ombre grise.
Couleurs
brand-ink#25035E, titres, bouton plein, focus
brand-accent#8A52F9, sur-titres, traits, filets. Jamais en aplat
brand-blush#F59194, halos et décor. Jamais du texte
ink-night#090E28, visuels, départ du dégradé
accent-on-dark#E1D0FB, accent posé sur l'encre
text-primary#222222, texte courant
text-secondary#4A4654, descriptions, en-têtes
text-muted#666666, chapôs, métadonnées
surface-tint(-strong)violet 4 % / 8 %, voiles et survols
hairline-*violet 22 / 16 / 32 / 14 %, tous les filets
brand-gradientle dégradé de la marque : bandeau CTA, band-hero, couverture de profil (ancien nom gradient-cta, gardé en alias)
brand-gradient-veille voile sombre posé par-dessus, pour le contraste du texte clair
negative#DC2626, seule couleur de sens
Jetons de la palette Corail, importés le 02/11/2026
Ajoutés au preset en avance, avec les mêmes noms et les mêmes valeurs que sur la branche feat/palette-corail, pour que la bascule ne renomme rien. Trois échelles de dix nuances, le rouge de sens négatif et ses deux variantes, un voile crème et les trois premiers gris neutres. Le reste de la palette Corail et l'échelle de gris complète ne sont pas encore là.
hs-status-negative#DC2626, rouge de sens négatif, texte et trait
hs-status-negative-bg#FEE2E2, fond d'un tag ou d'un bandeau d'erreur
hs-status-negative-text#991B1B, texte d'un tag d'erreur
hs-surface-tint#FFF7F1, voile de zone secondaire, crème. hs-voile reste violet jusqu'à la bascule
hs-neutral-200#E5E7EB, gris clair, premier cran de l'échelle
hs-neutral-300#D1D5DB, gris moyen clair
hs-neutral-400#9CA3AF, gris moyen
hs-blush-50 à -900
50#FFF5F8
100#FFECED
200#FFE3E3
300#FCC8C9
400#F9ADAF
500#F59194
600#DA757E
700#C05867
800#A53C51
900#8A1F3A
hs-orange-50 à -900
50#FFF7F1
100#FDEEE2
200#FFDDCB
300#FFC4AA
400#FFAB85
500#FF9061
600#E46A38
700#C9440E
800#A2370A
900#7A2A06
hs-green-50 à -900
50#F3FAF7
100#E2F2EC
200#B5DED0
300#88CAB3
400#5BB797
500#2EA37A
600#1A8D61
700#067647
800#04613A
900#034A2D
Typographie (Funnel Display seule)
title-pageSe former à l'IAtitle-page title-page--on-darkSe former à l'IAtitle-sectionÉvènements à venirtitle-cardAtelier prompttitle-card-compactDojo agents IAtitle-card-phraseUn titre qui est une phrase reste en casse normalechiffre-cle87 %eyebrowNos expertisesbody14px / 300 / 22,4px, interlettrage 0,5px partout.label-formAdresse emailbutton-labelValiderOmbres et rayons
shadow-card
shadow-hover
shadow-soft
shadow-hero
shadow-dual / 16px
radius-pill 999px
Charte groupe, @humanskills/ui, version du 07/10/2026
Commun
Composants communs à tous les produits HSK. Ils vivent dans le package sous forme de classe CSS (@humanskills/ui/styles.css) ou de composant React. Une spec produit peut les surcharger, jamais l'inverse.
Actions
secondary-button
Action secondaire
- Quand l'utiliser
- Une action utile mais moins importante, posée à côté du bouton principal : exporter, annuler, aperçu.
- À éviter
- Pas pour filtrer une liste : c'est le rôle de la pastille de filtre.
button-invert
Action sur fond sombre
- Quand l'utiliser
- Une action posée sur un fond sombre : bandeau d'accueil, bandeau d'appel, carte encre.
- À éviter
- Jamais sur un fond clair, où il disparaît.
button-danger
Confirmer une action destructrice
- Quand l'utiliser
- Confirmer une action qu'on ne peut pas défaire (supprimer, désactiver), dans la fenêtre de confirmation.
- À éviter
- Jamais comme bouton d'une page : l'action destructrice s'ouvre d'abord par un bouton secondaire ou une icône.
button-primary-icon / secondary-button-icon / ghost-icon
Action répétée où l'icône est l'information
- Quand l'utiliser
- Une action répétée sur chaque ligne ou chaque carte, quand l'icône suffit à la comprendre : modifier, supprimer, ouvrir.
- À éviter
- Pas pour une action unique ou ambiguë : mettre un bouton avec un mot. Le ghost (sans fond) est pour une croix de fenêtre ou des flèches de barre, jamais avec un label. Le rouge (
tone="danger") n'est ni décoratif ni en aplat : une icône ou un bouton à contour qui détruit, rien d'autre.
button-social
Lien vers un réseau social
- Quand l'utiliser
- Le lien vers LinkedIn ou un autre réseau, en pied de page.
- À éviter
- Pas pour une autre action : c'est le seul bouton à label qui porte une icône.
link-tertiary
Action fantôme de troisième niveau
- Quand l'utiliser
- Une action légère dans une carte ou à côté d'un titre : « Voir tout », « Lire », « En savoir plus ».
- À éviter
- Pas pour l'action principale d'une vue, ni sans flèche. Exception : un retour en arrière porte la flèche à gauche, au début (
back). Sur fond sombre :onDark(blanc) ; jamais sur fond clair.
fold-toggle
Déplier et replier une zone sur place
- Quand l'utiliser
- Ouvrir ou fermer une zone juste dessous quand le libellé suffit : « Voir les 9 étapes » / « Masquer les étapes ». Le chevron dit l'état : vers le bas quand c'est replié, vers le haut quand c'est déplié.
- À éviter
- Pas pour changer de page (lien tertiaire, avec sa flèche droite), ni pour une liste consultée entrée par entrée (accordéon).
entity-link
Lien nom : un nom que l'on clique
- Quand l'utiliser
- Un nom que l'on clique pour aller à une fiche ou ouvrir un panneau : le titre d'un billet, le nom d'un candidat ou d'une mission. Il se lit comme un titre : encre, gras, souligné au survol. Sa taille suit le texte d'à côté. Repris de l'ATS (ENTITY_LINK).
- À éviter
- Pas pour un verbe (« Lire l'article », « Revenir ») : c'est le lien tertiaire, violet, avec sa flèche. Le critère : le texte est-il un nom ou un verbe ?
Surfaces
sheet-page
Conteneur de toute la page
- Quand l'utiliser
- Le fond de chaque page d'un outil : tout le contenu se pose dedans.
- À éviter
- Pas à empiler : une page n'a qu'une feuille, les blocs à l'intérieur sont des panneaux.
panel
Bloc fonctionnel d'un outil
- Quand l'utiliser
- Regrouper un bloc fonctionnel d'un outil : un formulaire, une liste, un widget, un tableau. C'est le contenant simple : tout ce qui n'est ni une carte tuile ni une carte aperçu. Il prend une ombre seulement s'il est cliquable en entier (
as="a",as={Link}). La marge a quatre valeurs (padding) :none,sm16 px,md24 px (par défaut),lg24 px puis 32 px dèssm:. - À éviter
- Pas pour mettre un contenu en avant, ni à imbriquer dans un autre panneau sans raison.
Mes accès
Contenant simple : aucun relief.
Ton profil
tone="tint" : voile violet à 8 %, pour le bloc mis en avant (un par page).
Annuaireshadow-hover au survol.
card-expertise
Carte vitrine mise en avant
- Quand l'utiliser
- Présenter une offre ou un contenu vitrine qu'on veut mettre en valeur.
- À éviter
- Pas pour afficher des données d'outil : prendre un panneau.
Transformation IA
Cadrer les usages, former les équipes, mesurer les effets.
card-dark
Chiffre clé ou message fort isolé
- Quand l'utiliser
- Isoler un chiffre clé ou un message fort au milieu d'une grille claire.
- À éviter
- Pas pour un bloc cliquable, ni plusieurs fois dans la même rangée.
Collaborateurs420consultants dans le groupe
card-image
Illustration en alternance avec du texte
- Quand l'utiliser
- Une illustration qui accompagne un texte, en alternance texte / image.
- À éviter
- Pas pour une image cliquable de listing : prendre une carte article.
card-preview
Carte à grande image ou aperçu de vidéo, contenu en dessous
- Quand l'utiliser
- Un contenu qu'on ouvre depuis une grille de grandes cartes : une formation, un tutoriel vidéo, un article, un prompt. Une grande image, ou l'aperçu d'une vidéo (rond de lecture et durée), en haut ; puis les étiquettes, le titre, la description et un pied. Chaque zone est facultative et l'ordre ne change jamais ; une jauge d'avancement peut se glisser sous l'image.
- À éviter
- Pas pour une grille dense lue souvent, avec un carré à droite du titre : prendre la carte tuile (
TileCard). Une carte qui porte des boutons d'action n'est pas un lien. Les boutons de la zoneactionsprennent la taillesmimposée par la carte : le produit ne la choisit pas.
ArticleIA
Agents IA : ce qui change en 2026Retour sur les usages observés chez nos clients et ce qu'ils disent de la suite.Vitrine sans cadrePosée sur le canvas.
2:41
Créer ta première formationCamille Durand · 28 oct.
Prompting avancéDeux modules, 1 h 45.
card-tile
Carte à titre et carré à droite, contenu en dessous
- Quand l'utiliser
- Un contenu qu'on ouvre depuis une grille : un évènement, une formation, une marque, un article du blog, un parcours. Un en-tête de 138 px (date, durée, rubrique, titre) avec un carré visuel à droite, puis un corps voilé : le texte, les informations pratiques, les étiquettes et les actions. Chaque zone est facultative ; sans carré, une pastille d'icône peut accompagner le titre.
- À éviter
- Pas pour un contenu long à lire : prendre la carte article. Le contenu ne change pas la forme : une formation ou une marque prend la même carte qu'un évènement.
JEU. 13 NOV. 2026DojoConstruire un agent avec Claude
Deux heures pour poser un premier agent sur un cas réel.
En ligneElevate
02 OCT. 2026Monsieur Guiz rejoint le groupe
Extrait de l'article publié par la marque.
Humanskills
band-cta-gradient
Bloc de conversion en fin de page
- Quand l'utiliser
- Le dernier appel à l'action d'une page : prendre contact, s'inscrire.
- À éviter
- Une seule fois par page, et jamais en haut.
Parlons de votre projet
Un besoin en transformation IA ?
band-hero
Bandeau d'ouverture et mire de connexion
- Quand l'utiliser
- L'ouverture d'une page d'accueil, et l'écran de connexion commun.
- À éviter
- Pas en milieu de page ; il peut cohabiter avec un bandeau d'appel en bas.
Intranet
Bonjour Camille
Trois nouveautés depuis ta dernière visite.
Humanskills
Connexion
Avec ton compte Google du groupe.
Étiquettes et filtres
badge-eyebrow
Étiquette au-dessus d'un titre de section
- Quand l'utiliser
- Situer une section au-dessus de son titre (« Nos expertises »).
- À éviter
- Pas pour nommer un champ ou se répéter dans une liste : prendre le libellé de champ.
tag-chip
Métadonnée non cliquable
- Quand l'utiliser
- Afficher une information qu'on ne clique pas : statut, rôle, marque, niveau.
- À éviter
- Pas pour un filtre ou une action : sans bordure, il ne se lit pas comme cliquable.
pill-filter / pill-filter-active
Filtre à un critère, onglet, sélecteur
- Quand l'utiliser
- Filtrer une liste sur un critère, choisir un onglet ou une vue.
- À éviter
- Pas pour une métadonnée affichée : prendre l'étiquette.
TousArticlesWebinarsPodcasts
Rôle 2
filter-panel
Filtrage à facettes multiples
- Quand l'utiliser
- Filtrer une liste sur plusieurs critères à la fois.
- À éviter
- Pas pour un seul critère : une rangée de pastilles suffit.
FiltresRéinitialiser
Format
Marque
Période
Notice
Message d'état dans une page
- Quand l'utiliser
- Donner un retour ou un état dans la page : envoi réussi, attente, erreur.
- À éviter
- Pas pour expliquer le fonctionnement de l'outil : l'écran ne s'explique pas.
Invitation envoyée à 3 personnes.
Validation en attente du référent.
Le fichier n'a pas pu être lu.
Champs
Field
Champ complet : libellé, champ, aide, erreur
- Quand l'utiliser
- Tout champ de formulaire.
Fieldrelie lui-même le libellé au champ (for/id) et l'aide ou l'erreur au champ (aria-describedby,aria-invalid) : on ne pose plus d'idà la main.asideporte ce qui va à droite du libellé (un compteur),hideLabelcache le libellé à l'œil mais pas aux lecteurs d'écran. - À éviter
- Pas pour une case à cocher (
Checkboxporte son libellé) ni pour une recherche dont l'icône dit le sens (aria-labelsur le champ).
Une phrase, à l'indicatif.
48 / 200
Cette adresse n'est pas valide.
Nous sommes personnes
SelectMenu
Liste à choix unique
- Quand l'utiliser
- Choisir une valeur parmi plusieurs, à la place du menu natif du navigateur qui ne se style pas : rubrique, marque, durée, filtre simple. Le déclencheur est un champ (
input-field, flèche d'encre), la liste a la surface des menus : blanc, filet léger, ombre douce, survol crème, coche d'encre sur la ligne choisie. Elle se ferme au choix et garde la valeur affichée. Clavier complet (flèches, Entrée, Échap, une lettre). Soussm, le sélecteur natif prend le relais. - À éviter
- Pas pour plusieurs valeurs (
MultiSelectFilter, des cases) ni pour des actions (ActionMenu, le clic fait quelque chose et rien n'est retenu).
Choisir une rubrique
45 min
30 min
45 min✓
1 h
MenuList / MenuItem / MenuLabel
Liste de menu
- Quand l'utiliser
- La liste seule, sans son déclencheur : c'est la surface et la ligne que « Liste à choix unique », « Menus », « Bouton à menu » et les sélecteurs à cases utilisent chacun derrière leur propre déclencheur. À prendre telle quelle quand une liste s'ouvre sous autre chose qu'un de ces déclencheurs : sous un champ de saisie (suggestions de personnes, résultats de recherche), sous un bouton maison. Le produit garde l'ouverture, le filtre à la frappe et le clavier (rôles
listboxetoptionà poser).MenuItem asrend unli, unbutton, unlabel(avec une case) ou unLink;tone="danger"met le rouge de sens négatif ;MenuLabelsert d'en-tête ou de ligne « Aucun résultat ». - À éviter
- Pas pour choisir une valeur dans une liste fermée : prendre « Liste à choix unique », qui porte déjà le champ, la liste et le clavier. Pas pour un panneau à plusieurs colonnes ou à champs (« Panneau de filtres »).
Formations récentes
Les fondamentaux de l'IA
Communication et influence
Supprimer la sélection
Alice Martinalice.martin@example.com
Alix Durandalix.durand@example.com
Aucun résultat
input-field
Champ de formulaire
- Quand l'utiliser
- Toute saisie dans un formulaire, listes déroulantes comprises.
- À éviter
- Pas pour une recherche dans une rangée de pastilles : prendre le champ de recherche.
input-search
Recherche dans une rangée d'actions
- Quand l'utiliser
- Chercher dans une liste, à côté de pastilles ou de boutons ronds.
- À éviter
- Pas dans un formulaire : prendre le champ classique.
RôleStatut
Checkbox / Radio / Toggle / Switch / SegmentedSwitch
Choix binaire ou l'un des deux
- Quand l'utiliser
- Case pour cocher un choix, case ronde pour un choix parmi plusieurs tous visibles, interrupteur pour activer un réglage, rail à deux valeurs pour basculer entre deux vues (Actifs / Archivés).
- À éviter
- Pas de rail pour plus de deux faces : passer aux pastilles.
ÉchangesJournal
answer-choice
Réponse à choisir dans une question
- Quand l'utiliser
- Une réponse à choisir dans une question à choix unique : quiz, évaluation, sondage. Une zone entière cliquable, avec un repère (lettre ou numéro) à gauche et un texte qui peut tenir sur plusieurs lignes. Le parent qui les réunit porte
role="radiogroup". - À éviter
- Pas pour un choix multiple (cases à cocher) ni pour une action : un bouton. Pas pour une liste de plus de six réponses : une liste déroulante.
variant="radio"pour une carte de réglage (mode d'import) à la place d'une réponse,tone="danger"pour le choix qui détruit.
CompléterAjoute les lignes absentes, sans toucher aux autres.
Remplacer par nomMet à jour les lignes qui ont le même nom.
Tout remplacerSupprime l'existant avant l'import.
AUn caractère individuel du texte saisi
BUne unité minimale de découpage de texte, souvent de 3 à 4 caractères en moyenne
CUne variable secrète d'authentification API
DUn mot complet d'une langue naturelle
Données et structure
Tableau
Liste de données d'un outil
- Quand l'utiliser
- Afficher une liste de données à comparer ligne à ligne : comptes, historique, participants.
Tablepose le cadre, les en-têtes et les marges (lignes aérées, 12 px en haut et en bas) : on compose avecTh,TretTd. - À éviter
- Pas pour des contenus éditoriaux : prendre une grille de cartes.
| Nom | Rôle | Statut | Dernière connexion | Actions |
|---|---|---|---|---|
| Camille Durand | Admin | Actif | 21/10/2026 | |
| Lou Martin | Membre | Invité | Jamais | |
| Sacha Petit | Membre | Désactivé | 02/09/2026 |
3 utilisateurs
| Nom | Rôle | Statut |
|---|---|---|
Aucune assignationAucune assignation ne permet de générer un aperçu. | ||
Barre d'outils de tableau
Recherche et filtres au-dessus d'un tableau
- Quand l'utiliser
- Mettre la recherche et les filtres au-dessus d'un tableau d'outil.
- À éviter
- Pas de compteur dedans : il se pose sous le tableau.
RéinitialiserFiltrer parRôle 1Date
ActionMenu / ProfileMenu / ColumnsMenu
Menus et popovers
- Quand l'utiliser
- Ranger des actions secondaires, les liens du compte ou le choix des colonnes derrière un bouton. Chaque menu garde son déclencheur : trois points, avatar, pastille « Colonnes ». Pour un bouton à libellé qui ouvre une liste, voir « Bouton à menu ».
MenuList,MenuItemetMenuLabelsont la surface et la ligne communes de tous les menus à entrées (ces menus-ci, « Bouton à menu », « Liste à choix unique », les filtres à cases, les salles libres de l'intranet) : pas de trait entre les lignes, le survol suffit. - À éviter
- Pas pour l'action principale, qui doit rester visible.
Colonnes 1
menu-button
Bouton qui ouvre un menu
- Quand l'utiliser
- Un bouton qui ne déclenche rien tout seul mais ouvre une liste d'entrées (liens ou actions) : « Gérer les annonces », « Ajouter à mon agenda ». Le chevron vers le bas le distingue d'un bouton ordinaire. En taille icône, il garde la hauteur de 40px du bouton icône mais s'élargit à 65px : une pastille, plus un rond, avec l'icône de son choix suivie du même chevron.
- À éviter
- Pas pour une action unique : un bouton ordinaire. Pas pour une action de ligne de tableau (trois points : ActionMenu). Le chevron est la seule icône admise à côté d'un libellé de bouton.
ConfirmDialog / SlideOver
Modale et panneau latéral
- Quand l'utiliser
- Modale pour confirmer une décision ; volet latéral pour consulter ou modifier une fiche sans quitter la liste.
- À éviter
- Pas pour un long parcours : en faire une page.
modal-overlay
Fond de fenêtre : le voile derrière toute modale
- Quand l'utiliser
- Derrière toute fenêtre posée sur la page : lecture d'un billet, détail d'un évènement, confirmation, aide. Le voile (
.modal-scrim) est le violet d'encre à 40 %, flouté de 4 px : la page se devine sans se lire. Le même dans tous les outils. Il porte le comportement : Échap ferme, la page ne défile plus, Tab reste dans la fenêtre, un clic à côté ferme (sauf pour une question ou une saisie,dismissOnBackdrop={false}). Trois placements : centre, bas d'écran sur téléphone (sheet), plein écran sur téléphone puis en haut (top). - À éviter
- Jamais de fond noir ou gris, jamais sans flou. Pas pour le panneau latéral, qui se pose sur le bord sans voile. La fenêtre elle-même (carte, titre, boutons) reste à l'appelant.
chiffre-cle
Valeur numérique mise en avant
- Quand l'utiliser
- Mettre en avant un nombre qu'on lit de loin : score, statistique, année.
- À éviter
- Pas pour un nombre dans une phrase ou un tableau.
87 %taux de satisfaction
2019Création du groupe
accordeon-details
Liste consultée entrée par entrée
- Quand l'utiliser
- Une liste qu'on consulte entrée par entrée, aux longueurs inégales : FAQ, labels, détails.
Accordionpose le<details>natif, le filet du haut, un en-tête à 16 px de marge qui prend le fond violet clair au survol, et le chevron qui pivote. Le filet du bas se pose sur la dernière entrée. - À éviter
- Pas pour un contenu qu'on lit d'un bout à l'autre.
Label Engagé RSE
Obtenu en 2024, renouvelé en 2026
Huit engagements suivis chaque année par un comité externe.
Qualiopi
Certification des actions de formation
Audit de surveillance en mars.
vertical-tabs
Onglets verticaux : une colonne d'entrées
- Quand l'utiliser
- Une colonne d'entrées dont une seule est choisie et commande le panneau posé à côté : les piliers d'engagement, les questions d'une charte. L'entrée choisie est seule marquée : trait d'encre à gauche, fond léger, libellé gras. Au clavier : flèches haut et bas.
- À éviter
- Pas seule : le panneau de contenu va avec, c'est le bloc à onglets verticaux. Pas pour naviguer entre des pages : la navigation latérale.
vertical-tabs-block
Bloc à onglets verticaux : onglets et contenu d'un seul tenant
- Quand l'utiliser
- Un sujet en quatre ou cinq volets, chacun avec son contenu : les cinq piliers de la politique RSE, les questions de la charte de mission. Sur grand écran, la colonne d'onglets et le panneau forment un seul cadre ; sur téléphone, le bloc devient un accordéon. Chaque entrée porte un identifiant, un libellé, une icône et son contenu.
- À éviter
- Pas pour plus de six entrées, ni pour un contenu qu'on veut lire en entier d'un coup. Des onglets horizontaux au-dessus du contenu : le bloc à onglets horizontaux.
Desktop et tablette en paysage (à partir de 1024 px)
Social
Un environnement de travail qui permet à chacun de se former, de s'exprimer et de s'épanouir.
Un programme de formation dédié à l'intelligence artificielle et une plateforme de formation en ligne.
Mobile et tablette en portrait (sous 1024 px)
Social
Un environnement de travail qui permet à chacun de se former.
Environnemental
Éthique
horizontal-tabs
Onglets horizontaux : une rangée au-dessus du contenu
- Quand l'utiliser
- Une rangée d'onglets au-dessus d'un contenu qui change sur place : les documents d'un résultat (CV, argumentaire, questions...). Sobre : un filet sous la rangée, l'onglet choisi en encre avec un trait violet dessous, un compteur violet quand l'onglet contient des éléments. La rangée passe à la ligne plutôt que de défiler. Au clavier : flèches gauche et droite. Repris de l'ATS.
- À éviter
- Pas pour aller d'une page à l'autre : ce sont des liens, pas des onglets. Pas seule : le panneau va avec, c'est le bloc à onglets horizontaux.
CVArgumentaire1Questions6Fiabilité3Comparatif2
horizontal-tabs-block
Bloc à onglets horizontaux : onglets et contenu d'un seul tenant
- Quand l'utiliser
- Un contenu en plusieurs volets qu'on parcourt à tour de rôle, avec les onglets au-dessus. Le bloc tient lui-même l'onglet choisi. Il ne devient pas un accordéon sur téléphone : la rangée passe à la ligne.
keepMountedgarde tous les contenus dans la page (un aperçu qu'un bouton imprime d'où que l'on soit). - À éviter
- Pas pour une navigation entre des pages. Pour des entrées en colonne à gauche du contenu : le bloc à onglets verticaux.
CVArgumentaire1Questions6Fiabilité3Comparatif2
Le contenu de l'onglet choisi s'affiche ici, juste dessous : le CV composé par l'agent, au gabarit de la marque.
stepper
Étapier : la chronologie entière d'un parcours
- Quand l'utiliser
- Un parcours en étapes numérotées dont on voit d'un coup où l'on est, ce qu'on a fait et ce qui reste : « Ton parcours d'arrivée », un formulaire en plusieurs étapes, la plateforme People. Deux formes pour un même contenu : la frise à grands numéros (carte blanche, filet d'encre au-dessus de chaque étape, l'étape en cours en encre pleine) et les cartes (rond numéroté et titre). Aucune ne défile : la frise passe de neuf colonnes à trois sous 1 440 px.
- À éviter
- Pas pour raconter une démarche dans le temps : le rail chronologique. Pas pour plus de neuf étapes. Sur téléphone, pas neuf grands numéros : les cartes, ou l'étape en cours avec de quoi déplier les autres.
Découvrir le groupeLue
2Signer la charte IAContinuer →
3Suivre un premier dojo5 min
stepper-step
Une étape de l'étapier, et son rond numéroté
- Quand l'utiliser
- Chaque étape d'un
Stepper: un lien (href) ou un bouton de sélection (onClick). Trois états lisibles sans la couleur : une coche pour l'étape faite, « Tu es ici » ou l'action (« Continuer ») pour l'étape en cours, la durée sinon.StepMarkerest le rond numéroté seul : cerclé sans état, plein d'encre avec une coche une fois faite, plein violet pour l'étape en cours ; il numérote aussi les éléments d'une procédure qui s'enchaînent sans état. - À éviter
- Pas hors d'un
Stepper: l'étape est un élément de liste. Pas pour une carte de contenu :PreviewCard.
234 bis
thumbnail-row
Ligne à vignette : une liste de contenus, vignette à gauche
- Quand l'utiliser
- Une liste de publications, de contenus ou de renvois dont chaque ligne est cliquable : « L'actualité du groupe » de l'accueil, « À lire aussi » à la fin d'un billet. Deux tailles :
default(vignette de 128 px, date et type en capitales violettes, logo de la marque, titre en phrase, description) etsmall(vignette de 80 px, titre et type). Chaque ligne garde un visuel : l'image, sinon l'icône de sa catégorie, sinon un fond neutre, pour que la colonne reste alignée. - À éviter
- Pas pour une grille de cartes :
PreviewCard. Pas pour des lignes à pictogramme et action (agenda). La ligne ne porte pas ses filets : c'est la liste qui les trace.
28 oct. - ArticleelevateRecruter en 2026Ce que les candidats nous disent en entretien et qu'on n'entendait pas il y a deux ans.
28 oct. - Annonce RHRappel entretiens annuelsEntretiens annuels : la campagne est ouverte.
25 dollars la cible : une campagne d'attaques menée par des agentsGambit Security
Récap de la semaine du 14 au 23 septembrePodcast
EmptyState
Liste vide
- Quand l'utiliser
- Remplacer une liste vide par une phrase et, si possible, l'action qui la remplit. C'est un panneau (
Panel tone="veil") : ses marges sont celles de l'échelle des panneaux (24 px, puis 32 px dès 640 px), le fond est le voile violet à 4 %, sans cadre. - À éviter
- Pas pour une erreur de chargement : prendre un message d'état.
Aucun évènementRien n'est programmé pour ce mois-ci.
ProgressBar
Avancement de 0 à 100 %
- Quand l'utiliser
- Dire l'avancement d'une formation, d'un import, d'un parcours : un pourcentage de 0 à 100. Rail violet pâle, remplissage d'encre, extrémités arrondies, sans ombre ; le pourcentage s'écrit à droite.
size="sm"(6 px) dans une ligne de tableau,md(8 px) ailleurs. - À éviter
- Pas pour les étapes nommées d'un parcours (
Stepper) ni pour une attente de durée inconnue (Spinner) : la barre dit combien, pas quoi.
68%
0%
35%
VideoAccueil
Vidéo qui présente un outil à son arrivée
- Quand l'utiliser
- Présenter un outil à la personne qui le découvre, sur sa page d'accueil.
- À éviter
- Pas pour une vidéo de contenu : intégrer la vidéo dans la page.
Bienvenue sur l'intranet
2 min 40Fin de la vidéo
Tu la retrouves dans le menu de ton compte.
BulleAide
Bouton d'aide flottant de tous les outils
- Quand l'utiliser
- Offrir, dans tous les outils, un point d'entrée pour demander de l'aide ou signaler un souci : un bouton flottant en bas à droite, qui ouvre la fenêtre d'aide.
- À éviter
- Pas d'icône à côté du libellé (famille bouton). Pas pour de l'aide longue à lire : renvoyer vers les tutoriels.
Navigation et coques
header-nav
Barre haute de tous les outils
- Quand l'utiliser
- La barre haute de chaque outil, avec ses rubriques, le lanceur et le compte.
- À éviter
- Ne plus la réécrire à la main : passer par AppHeader.
HumanskillsIntranetCD
HumanskillsCD
AppSidebar
Navigation latérale
- Quand l'utiliser
- Naviguer entre les pages d'un espace à plusieurs rubriques, comme l'admin.
- À éviter
- Pas pour des filtres ou des ancres de page.
AdminShell
Coque des pages d'administration
- Quand l'utiliser
- La coque des pages d'administration de chaque outil.
- À éviter
- Pas pour les pages publiques de l'outil, qui gardent la feuille simple.
HUMANSKILLS
HSK
footer
Pied de page du site vitrine
- Quand l'utiliser
- Le pied de page du site vitrine.
- À éviter
- Pas dans les outils, qui n'en ont pas.
Contenu éditorial
EditeurContenu / AffichageContenu
Écrire et afficher un contenu riche
- Quand l'utiliser
- Écrire et afficher un contenu riche : annonce, page d'évènement, article.
- À éviter
- Pas pour une saisie courte : un champ suffit.
Le dojo dure deux heures. Le support est sur la page de l'atelier.
Ce qu'il faut préparer
- Un cas d'usage de ton client
- Un compte Claude actif
On repart avec un agent qui tourne, pas avec des slides.Programme-dojo.pdfPDF, 240 KoOuvrir
/
Ajouter un bloc312 / 5000
design-intranet.md, mis à jour jusqu'au 06/10/2026
Intranet
Composants propres à l'intranet, qui suivent les tokens du groupe sans en introduire. Les composants promus dans la charte le 25/09 (panel, link-tertiary, card-event...) sont rangés plus haut. Plusieurs fiches touchent l'Academy, qui n'a pas de spec propre.
repere-cadrage
Numéro d'ordre en gouttière
- Quand l'utiliser
- Numéroter de grandes sections sans cadre pour qu'on repère leur début en défilant.
- À éviter
- Pas comme seule information (il est décoratif), ni sur un rail d'étapes.
Module 2
Chez le client
Chez le client
rail-chronologique
Ce qui se lit dans l'ordre
- Quand l'utiliser
- Un contenu qui se lit dans l'ordre : frise d'années, démarche en étapes.
- À éviter
- Pas pour une simple liste sans ordre : des filets suffisent.
- 2022
Premier bilan carbone
- 2024
Label Engagé RSE
- 2027
Objectif neutralité
- 1Choisir la formation
- 2Valider avec son manager
- 3S'inscrire
BlocContacts
À qui s'adresser
- Quand l'utiliser
- Dire à qui s'adresser pour un sujet, avec les motifs et les personnes.
- À éviter
- Pas pour un annuaire complet.
Formation et coaching
Pour tout ce qui touche à ton parcours.
- Tu leur écris pour
- Demander une formation
- Un coaching individuel
formation@humanskills.fr
ALAlix Leroy
Responsable Academy
Responsable Academy
colonne-collante
Colonne qui suit un fil
- Quand l'utiliser
- Garder des raccourcis visibles à côté d'un fil qu'on fait défiler.
- À éviter
- Pas pour la navigation de la section, qui va à gauche ou en tête.
Carnets
3 nouveaux
Outils
Academy
IntranetCard
Carte-lien d'un listing
- Quand l'utiliser
- Une entrée de listing ou une porte vers une autre page (dojos, thèmes).
- À éviter
- Pas quand l'image compte : prendre la carte article.
ligne-rendez-vous
Ligne d'agenda ou d'actualité
- Quand l'utiliser
- Lister ce qui se lit par sa date ou sa catégorie : agenda, actualités du groupe.
- À éviter
- Pas pour des étapes à suivre : prendre la carte d'étape.
Évènements à venirTout voir
23Oct.Aujourd'huiPetit-déjeuner Elevate
Paris 9e, 8 h 30 13Nov.Dojo
Construire un agent avec Claude
En ligne, animé par Alix Leroy
L'actualité du groupe
NewsletterLe point d'octobre
Trois arrivées, un nouveau client et le programme du séminaire.Lire
bloc-me-former
Reprendre ses formations Academy
- Quand l'utiliser
- Proposer de reprendre une formation Academy en cours, et montrer les nouveautés.
- À éviter
- N'apparaît pas si rien n'est en cours.
Reprendre là où...Prompt engineering avancé
64 %
Excel et IA
RGPDÀ commencer
DébutantAjoutée le 20/10Découvrir les agents
Me former
CarteCarnet / LigneCarnet
Carnet de recherche
- Quand l'utiliser
- Présenter un carnet de recherche : en carte sur sa page, en ligne dans une colonne étroite.
- À éviter
- Pas pour un autre type de contenu.
encart-academy
Renvoi vers l'Academy
- Quand l'utiliser
- Renvoyer vers l'Academy depuis une page de l'intranet.
- À éviter
- Pas pour lister des formations : prendre la recherche de formation.
RechercheCatalogue
Trouver une formation
- Quand l'utiliser
- Envoyer vers le catalogue Academy déjà filtré par mot-clé ou thème.
- À éviter
- Il n'affiche aucune formation lui-même.
ProchainsDojos
Les trois prochains dojos datés
- Quand l'utiliser
- Annoncer les trois prochains dojos et mener à l'inscription dans event.hsk.
- À éviter
- Pas pour d'autres évènements : prendre l'agenda.
Prochains dojos
13Nov.DojoAgents IA
Animé par Alix Leroy
card-image--etire / CalageHsk
Scène illustrée calée sur sa colonne voisine
- Quand l'utiliser
- Aligner une illustration sur la hauteur du texte d'à côté.
- À éviter
- Jamais à la main : seulement via SceneIllustree, qui recalcule le cadre.
Illustration générée par IA
Carte de la skillothèque
Un skill Claude, dit par ce qu'il permet
- Quand l'utiliser
- Présenter un skill Claude par ce qu'il permet de faire, dans la skillothèque.
- À éviter
- Pas pour une formation ou un outil.
ElevateFaire le compte rendu d'une réunionelevate-crÀ partir d'une transcription, un CR rédigé au format du groupe.Avec Fireflies, Google Drive
BoutonMenu
Bouton qui ouvre un menu de liens
- Quand l'utiliser
- Regrouper des liens d'administration derrière un seul bouton.
- À éviter
- Pas pour une action unique : un bouton secondaire suffit.
Bandeau d'état d'une annonce
Dire où en est une annonce
- Quand l'utiliser
- Dire en haut d'une annonce si elle est en brouillon ou retirée, avec les actions possibles.
- À éviter
- Pas pour un message de succès.
Brouillon. Visible par les administrateurs seulement.
Retirée le 12/10/2026.
Formulaire d'annonce et barre d'actions
Saisir une annonce du back-office
- Quand l'utiliser
- Créer ou modifier une annonce dans le back-office.
- À éviter
- Pas pour d'autres contenus sans l'adapter.
84 / 80
Déposer une imageJPG ou PNG, 1200px de large
design-event.md, 13/10/2026
Event
event.hsk précise la charte là où sa classe publiée ne porte pas ce qu'elle annonce. Règle transverse : un volet ou une fenêtre ne se pose jamais dans un conteneur space-y, sinon il se décale.
input-field / label-form (surcharge event)
Champ complet de la console
- Quand l'utiliser
- Tous les champs de la console event.hsk, avec le padding que la classe publiée n'a pas encore.
- À éviter
- Ne pas ajouter de taille ou de padding à la main.
ChoixDate / ChoixHeure
Sélecteurs de date et d'heure
- Quand l'utiliser
- Choisir une date ou une heure dans un formulaire de la console.
- À éviter
- Pas de champ texte libre pour une date.
Date
Début
Grille
Tableau des participants
- Quand l'utiliser
- Gérer les participants d'un évènement en tableau éditable.
- À éviter
- Ne pas afficher toutes les colonnes par défaut : les autres passent par « Colonnes ».
| Prénom | Nom | Entreprise | Statut | Depuis | Décision |
|---|---|---|---|---|---|
| Inès | Moreau | Elevate | Inscrite | 3 j | |
| Hugo | Bernard | Client | Liste d'attente | 1 j |
CadreApercu
Aperçu de la page publique
- Quand l'utiliser
- Montrer la page publique telle que le public la verra, sur ordinateur ou téléphone.
- À éviter
- Pas pour interagir : rien n'y est cliquable.
OrdinateurTéléphone
OrdinateurTéléphone
Bloc déroulé horaire
Programme d'un évènement dans l'éditeur
- Quand l'utiliser
- Donner le programme horaire d'un évènement dans sa page.
- À éviter
- Pas pour une simple liste sans heures.
8 h 30Accueil et café
9 h à 10 h 30Atelier : cadrer un agent
10 h 45Démonstrations et questions
design-ats.md, registre de l'ATS
ATS
Ce que l'ATS ajoute à la charte : couleurs de sens, tableaux de données, fiches candidat. Les contrôles portent 44px ; une étiquette n'est pas un contrôle, sa croix a une cible de 24px.
Couleurs de sens
Dire un manque, une issue, une obligation
- Quand l'utiliser
- Signaler un manque, une issue, une qualification ou une étape obligatoire sur une fiche.
- À éviter
- Pas comme couleur de décor, et jamais sans le mot à côté.
Pastille de disponibilité
Libre ou pris
- Quand l'utiliser
- Dire si une personne est libre ou prise.
- À éviter
- Ne rien afficher quand on ne sait pas.
tableau-liste
Vivier et listes de données
- Quand l'utiliser
- Parcourir un vivier ou une liste de missions ligne par ligne.
- À éviter
- Pas de cartes ni de grille complète : une ligne reste une ligne.
| Nom | Métier | Disponibilité | Étape |
|---|---|---|---|
| Camille Durand | Product owner | Libre | Entretien |
| Yanis Roux | Data engineer | En mission | Présenté |
| Léa Fontaine | Scrum master | Sourcé |
En-tête triable et ColumnMenu
Trier et filtrer depuis la colonne
- Quand l'utiliser
- Trier et filtrer directement depuis l'en-tête d'une colonne.
- À éviter
- Pas de chevron sur une colonne qui ne trie pas.
NOM ÉTAPE NOTES
columnWidths
Redimensionner deux colonnes à la fois
- Quand l'utiliser
- Laisser l'utilisateur ajuster la largeur des colonnes d'un tableau.
- À éviter
- Pas de bouton « rétablir » : le réglage se fait une fois.
Nom
Métier
Étape
Section
Bloc de fiche repliable au doigt
- Quand l'utiliser
- Replier les blocs d'une fiche sur téléphone, en disant ce qu'ils cachent.
- À éviter
- Ne pas replier ce qui signale un manque, ni le fil.
Aucun CV déposé
SectionWithMenu
Menu d'un bloc à partir de trois actions
- Quand l'utiliser
- Ranger les actions d'un bloc dès qu'il y en a trois ou plus.
- À éviter
- En dessous de trois, laisser les actions visibles.
Sourcing
Étiquette retirable et tag-ajout
Allonger ou réduire une rangée d'étiquettes
- Quand l'utiliser
- Allonger ou réduire une rangée d'étiquettes (métiers, compétences), et confirmer une compétence proposée.
- À éviter
- Pas de bouton pleine largeur pour « Ajouter ».
Product ownerScrum master
Empreinte d'un client (EntityAvatar)
Reconnaître une organisation ou une personne
- Quand l'utiliser
- Reconnaître un client ou une personne d'un coup d'oeil dans une liste.
- À éviter
- Contre le nom qu'il désigne, jamais en tête de ligne.
SNAFRTBP
CDYR
Damier (KanbanBoard)
Donner une position, déposer
- Quand l'utiliser
- Voir et changer l'étape de chaque candidature en la déposant dans une colonne.
- À éviter
- Pas de colonne vide affichée si on ne peut pas y déposer.
Entretien 1
Camille DurandProduct owner
Présenté 1
Yanis RouxData engineer
Sélecteur d'étape (StageSelector)
Afficher et changer l'étape
- Quand l'utiliser
- Afficher et changer l'étape d'une candidature au même endroit.
- À éviter
- Pas de badge d'étape à côté : le sélecteur l'affiche déjà.
FileDropZone
Déposer un brief ou un CV
- Quand l'utiliser
- Déposer un brief ou un CV pour que l'outil le lise.
- À éviter
- Plus de champ fichier natif à côté.
Glisser un fichier ou cliquer pour choisirPDF, Word, .txt, .eml
brief-societe-generale.pdf312 Ko - lecture PDF non branchée
Lecture du brief
PropertyList
Carte d'identité d'une fiche
- Quand l'utiliser
- Afficher les faits d'une fiche : métier, contact, contrat, référent.
- À éviter
- Pas pour un texte long : le résumé a son bloc.
MétiersProduct owner
ContratFreelance
Emailc.durand@mail.fr
RéférentSeda
TéléphoneNon renseigné
LieuLyon
CvReadingNotice
Ce que la lecture automatique a posé
- Quand l'utiliser
- Dire, à l'ouverture d'une fiche créée automatiquement, ce que la lecture a posé et ce qui reste à vérifier.
- À éviter
- Pas de bandeau générique répété à chaque import.
Mission ouverte à partir du brief : 7 valeurs posées par la lecture, aucune n'est vérifiée.Modifier la ficheRelire le brief
ENTITY_LINK / TEXT_ACTION
Un lien est un nom ou un verbe
- Quand l'utiliser
- Lien nom pour ouvrir une fiche (candidat, mission) ; lien verbe pour une action ou un retour.
- À éviter
- Pas d'autre style de lien.
Disclosure / DisclosureTrigger
Déplier une saisie secondaire
- Quand l'utiliser
- Proposer une saisie secondaire sous une action principale (« Saisir à la main »).
- À éviter
- Pas pour cacher une information importante.
Fil Échanges
La conversation avec un candidat
- Quand l'utiliser
- Suivre la conversation avec un candidat et le journal de sa fiche.
- À éviter
- Un envoi simulé n'entre pas dans le fil.
ÉchangesJournal
Mardi 21 octobreBonjour, je suis disponible à partir de janvier.Email, 10:42
Parfait, je vous propose un échange jeudi.Email, 11:05
Périmètre de l'inventaire
Sources et trous
Les fichiers lus pour cet inventaire, et ce qu'ils ne couvrent pas encore.
Charte groupe
humanskills-ui/DESIGN.md v1.0 (04/10) et sa version livrée dans event (07/10, avec l'éditeur de contenu).
Intranet
humanskills-intranet/design-intranet.md, sections 1 et 2.
Event
event/design-event.md du 13/10/2026.
ATS
ATS-dev/design-ats.md, sections 1 à 3.
Academy
Pas de design-academy.md : l'Academy consomme @humanskills/ui tel quel. Ses composants visibles vivent côté intranet (encart-academy, bloc-me-former, RechercheCatalogue).
Dans le package sans fiche de design
Relevés par le registre de l'ATS : ils existent dans @humanskills/ui mais aucune spec ne les décrit en détail.
TimelineMultiSelectPageHeaderSpinnerKanbanBoard (vu côté ATS)StageSelector (vu côté ATS)EntityAvatar (vu côté ATS)
Candidats à une montée au package
FileDropZonePropertyListColumnMenuSectionWithMenucolumnWidthslabel-form (event)padding outil d'input-field (event)
Aucun composant ne correspond à cette recherche.