Chaque composant ci-dessous est rendu par la feuille de style de production du site. Ce n'est pas une maquette : si le rendu change ici, c'est que le site a changé.
Feuille globale : sq-design-global-v76.css · mise à jour le 2 septembre 2026
Source de vérité partagée par les slides, le site et les mockups. Tout hex absent de cette liste est un défaut, pas une licence artistique.
#43AA8BAccent principal, CTA, validation, chiffres clés#2E7E65Eyebrows, chips de validation, texte sur vert clair#1B1B1BSurface sombre, structure dominante des mockups#FBF6ECLe vrai fond clair de la marque#F8FFF4Texte clair sur fond sombre. Jamais un fond.#8B6CFF → #6C4FE0Code couleur IA : badge, anneau de score, contenu généré#EDE9FBPortion non remplie du score#E36C5BCritère non validé, disqualification#024455Accent secondaire, ponctuel#8A928ALabels et texte secondaire sur clair#FBFCFAAplat interne des lignes de mockup#EFF2EDFilet interne. Carte extérieure : #E7ECE5187 classes distinctes sur 4 préfixes sans base commune. Avant de nommer une classe, vérifier ici, puis chercher le sélecteur dans la feuille Webflow publiée.
| Préfixe | Rôle | Portée | Statut |
|---|---|---|---|
sqv2- | Mockups produit, embeds d'illustration, CTA de fin de page | 179 pages | Canon. Toute nouvelle illustration va ici. |
sq-inv- | Sections des pages piliers et d'inventaire | 14 pages | Canon pour les pages piliers |
sqm- | Section Agent Match de la page d'accueil | Home 4 langues | Réservé. Ne jamais réutiliser. |
sqa- | Section Agent Attract de la page d'accueil | Home 4 langues | Réservé. Ne jamais réutiliser. |
Ces composants vivent dans la feuille globale : ils sont rendus ici par exactement le même CSS que sur le site. Les modifier ici est impossible ; les modifier dans la feuille globale les change partout.
.sqv2-hm · évaluation IA d'une candidature · composant de référence de la famille · en service sur la page Agent Match, 4 langues
.sqv2-mk · illustration produit · en service sur les 5 pages Partenaires ATS, 4 langues
Règle : une idée par carte, 3 à 4 lignes maximum, un seul chiffre fort, aucun élément décoratif sans fonction. Le violet signale ce que produit l'IA, le vert la validation, le rouge la disqualification.
.sqv2-dfw · diffusion centralisée · page Agent Attract
La répartition s’ajuste toute seule : ce qui rapporte des candidatures reçoit plus de budget.
.sqv2-dash · résultats de campagne · page Agent Attract
Le budget se réoriente en continu vers les canaux qui rapportent des candidatures.
.sqv2-ats · connexion ATS · pages Agent Attract et Agent Match
Sept autres composants sont désormais dans la feuille globale sans être encore affichés ici : sqv2-ha, sqv2-cib, sqv2-can, sqv2-fmt, sqv2-red, sqv2-std, sqv2-cfm. Les ajouter à cette page ne demande que de coller leur markup dans un embed.
Leur CSS vit dans un embed de page, pas dans la feuille globale. Ils ne peuvent donc pas être rendus ici, et rien n'empêche aujourd'hui d'en redessiner un deuxième ailleurs. Au 2 septembre 2026, 11 composants ont été remontés dans la feuille globale ; il en reste ceux-ci.
| Composant | Ce qu'il montre | Où le voir |
|---|---|---|
sqv2-sc, sqv2-enr, sqv2-git, sqv2-dup, sqv2-axe, sqv2-frm, sqv2-spo | Scoring, enrichissement, guide d'entretien, dédoublonnage, axes, formulaire, diffusion Spotify | Agent Match |
sqk | Kit de base des mockups : carte, en-tête, ligne, boîte, pastille IA, chiffre. Utilisé par 51 pages en 4 variantes qui ne divergent que sur 3 déclarations de mise en page mobile. | Sourcing, pages secteur |
sqv2-job, sqv2-slg, sqv2-scss | Blocs éditoriaux réutilisés sur les pages secteur et blog | Pages secteur |
sqm-, sqa- | Sections Agent Match et Agent Attract de la page d'accueil | Accueil |
Écrire le CSS sous un préfixe libre, l'ajouter à la feuille globale versionnée, poser le markup en embed Webflow, puis l'ajouter à cette page. Un composant qui n'est pas dans la feuille globale ne peut pas figurer dans ce styleguide, et c'est voulu : cette page ne montre que ce qui a une seule source.