Design system

Les pièces, et les règles qui les tiennent. Généré par le même build et la même feuille de style que le site : ce que vous voyez ici est littéralement ce qui tourne en production. Les ratios de contraste sont calculés à la construction — si une couleur passe sous son seuil, le badge vire au rouge ici, pas dans un audit six mois plus tard.

Fondations

Logo

Deux variantes. Le lockup (monogramme + mot) partout où la place le permet ; la marque seule en dessous de 24 px de hauteur, où le mot deviendrait illisible. Le SVG est inliné et peint en currentColor : il s’inverse sur fond sombre sans second fichier à maintenir.

Sur fond clair — --text

Sur fond sombre — --text-inv

Sur l’accent — blanc plein

Marque seule — petites tailles, favicon, avatar

Règles d’usage 5 lignes

Règle	Valeur	Pourquoi
Hauteur minimale, lockup	`16px`	En dessous, les contre-formes du monogramme se bouchent
Bascule vers la marque seule	`< 24px`	Le mot devient illisible avant le monogramme
Zone de respect	`½ hauteur`	Mesurée sur la hauteur du logo, de tous les côtés
Couleur	`currentColor`	Jamais de valeur en dur : le logo hérite de son contexte
Déformation	interdite	On règle la hauteur, la largeur suit — toujours

Typographie

Deux familles, pas trois. Neue Regrade porte les titres et les surtitres légers ; Overused Grotesk porte tout le reste, y compris les étiquettes et les métadonnées — l'effet « étiquette » vient des capitales et de l'approche ouverte, pas d'une chasse fixe. Les deux fontes sont variables et auto-hébergées, et le site ne charge plus aucune fonte externe.

Familles

Display et surtitres

Neue Regrade

Variable, graisse 300–800, plus un axe d'italique de 0 à 12°. 83 Ko pour toutes les graisses.

atipo foundry — fonte commerciale. Vérifier la licence webfont avant mise en ligne publique.

Corps de texte

Overused Grotesk

Variable, graisse 300–900. 204 Ko.

Bao Nguyen — licence OFL. Libre d'hébergement et de modification.

Échelle

Neuf pas, du héros à la mention. Les quatre premiers sont fluides (clamp) : ils suivent la largeur d'écran sans point de rupture.

Construire ce qui manque

--fs-display-xlclamp(3.1rem, 8.2vw, 7.4rem)Héros

Construire ce qui manque

--fs-display-lclamp(2.35rem, 5.2vw, 4.3rem)Titres de section

Construire ce qui manque

--fs-display-mclamp(1.75rem, 3.1vw, 2.65rem)Sous-titres de héros

Construire ce qui manque

--fs-display-sclamp(1.35rem, 2.1vw, 1.75rem)Titres de carte

Construire ce qui manque

--fs-leadclamp(1.1rem, 1.45vw, 1.4rem)Chapeau

Construire ce qui manque

--fs-body1.0625remCourant

Construire ce qui manque

--fs-small0.9375remCorps de carte

Construire ce qui manque

--fs-xs0.8125remMentions

Construire ce qui manque

--fs-label0.7remÉtiquettes mono

Graisse

Le display vit en 400. Une graisse forte sur un grand titre le rend lourd ; c'est l'approche serrée qui lui donne sa densité, pas le gras.

Aa Construire

300Light — grands titres uniquement

Aa Construire

400Regular — display et courant

Aa Construire

500Medium — boutons, étiquettes fortes

Aa Construire

600Semibold — accents dans le texte

Aa Construire

700Bold — réservé, jamais sur un display

Hauteur de ligne

Le périmètre et le prix sont fixés avant la première ligne de code.

.92Display XL et L

Le périmètre et le prix sont fixés avant la première ligne de code.

1.2Titres de carte

Le périmètre et le prix sont fixés avant la première ligne de code.

1.5Chapeaux

Le périmètre et le prix sont fixés avant la première ligne de code.

1.62Courant — valeur par défaut

Variables 4 lignes

Variable	Valeur	Rôle
`--f-display`	`Neue Regrade`	Titres, surtitres
`--f-sans`	`Overused Grotesk`	Tout le corps de texte
`--f-mono`	`Overused Grotesk`	Étiquettes, métadonnées, code — même fonte, en capitales et approche ouverte
`--measure`	`66ch`	Largeur de lecture maximale

Couleurs

Deux rampes de onze pas, puis une couche sémantique.Aucun composant n'appelle une rampe directement : on passe toujours par un jeton de rôle, pour qu'un changement de thème soit un seul endroit à toucher.

Les deux badges de chaque ligne disent si du texte de cette couleur reste lisible posé sur fond clair, puis sur fond sombre.AAA 7:1 et plus AA 4,5:1, seuil du texte courant AA·L 3:1, grand texte et éléments non textuels seulement — à ne pas utiliser pour du texte sur ce fond. Un pas clair qui affiche « — » sur fond clair n'est pas un défaut : c'est une couleur de fond, pas de texte. Survolez un badge pour lire le ratio exact.

Primaire

La couleur de marque. Les pas 500 à 800 portent le texte blanc ; les pas 50 à 200 servent de lavis derrière du texte bleu foncé.

50100200300400500600700800900950

Valeurs, HSL et contrastes 11 pas

Variable	HEX	HSL	Texte lisible sur fond clair / fond sombre
`--p-50`	`#E8EFFF`	`222, 100%, 95%`	— AAA
`--p-100`	`#D5E2FF`	`221, 100%, 92%`	— AAA
`--p-200`	`#B3C8FF`	`223, 100%, 85%`	— AAA
`--p-300`	`#85A3FF`	`225, 100%, 76%`	— AAA
`--p-400`	`#5672FF`	`230, 100%, 67%`	AA·L AA·L
`--p-500`	`#2F43FF`	`234, 100%, 59%`	AA —
`--p-600`	`#0C11FF`	`239, 100%, 52%`	AAA —
`--p-700`	`#0000EE`	`240, 100%, 47%`	AAA —
`--p-800`	`#0609CD`	`239, 94%, 41%`	AAA —
`--p-900`	`#10169F`	`237, 82%, 34%`	AAA —
`--p-950`	`#0A0B5C`	`239, 80%, 20%`	AAA —

Neutre

Fonds, filets et texte. Le site vit à 95 % dans cette rampe : le bleu est un accent, pas une ambiance.

50100200300400500600700800900950

Valeurs, HSL et contrastes 11 pas

Variable	HEX	HSL	Texte lisible sur fond clair / fond sombre
`--n-50`	`#FEFEFF`	`240, 100%, 100%`	— AAA
`--n-100`	`#F3F5F9`	`220, 33%, 96%`	— AAA
`--n-200`	`#E3E6EC`	`220, 19%, 91%`	— AAA
`--n-300`	`#D2D6DE`	`220, 15%, 85%`	— AAA
`--n-400`	`#A1A5AE`	`222, 7%, 66%`	— AAA
`--n-500`	`#717680`	`220, 6%, 47%`	AA AA·L
`--n-600`	`#525762`	`221, 9%, 35%`	AAA —
`--n-700`	`#3E434E`	`221, 11%, 27%`	AAA —
`--n-800`	`#1F242E`	`220, 19%, 15%`	AAA —
`--n-900`	`#151A24`	`220, 26%, 11%`	AAA —
`--n-950`	`#050810`	`224, 52%, 4%`	AAA —

Background et surfaces 5 jetons

Ce sur quoi tout se pose.

Jeton	HEX	HSL	Usage
`--surface`	`#FEFEFF`	`240, 100%, 100%`	Fond de page
`--surface-2`	`#F3F5F9`	`220, 33%, 96%`	Sections alternées
`--surface-3`	`#E3E6EC`	`220, 19%, 91%`	Éléments enfoncés, boutons tertiaires
`--surface-inv`	`#151A24`	`220, 26%, 11%`	Blocs sombres détourés
`--surface-inv-2`	`#1F242E`	`220, 19%, 15%`	Cartes dans un bloc sombre

Texte 6 jetons

Trois niveaux sur clair, trois sur sombre. Au-delà, la hiérarchie ne se lit plus.

Jeton	HEX	HSL	Usage
`--text`	`#151A24`	`220, 26%, 11%`	Courant
`--text-mute`	`#525762`	`221, 9%, 35%`	Secondaire, légendes
`--text-faint`	`#717680`	`220, 6%, 47%`	Mentions — plancher AA, ne pas descendre
`--text-inv`	`#FEFEFF`	`240, 100%, 100%`	Courant sur blocs sombres
`--text-inv-mute`	`#A1A5AE`	`222, 7%, 66%`	Secondaire sur blocs sombres
`--text-inv-faint`	`#717680`	`220, 6%, 47%`	Décoratif sur sombre — non textuel

Bordures 4 jetons

Le système sépare par le filet, pas par l'ombre. D'où trois valeurs plutôt qu'une.

Jeton	HEX	HSL	Usage
`--border`	`#E3E6EC`	`220, 19%, 91%`	Filets décoratifs, cartes
`--border-strong`	`#D2D6DE`	`220, 15%, 85%`	Séparateurs appuyés
`--border-field`	`#717680`	`220, 6%, 47%`	Champs de saisie — doit rester visible
`--border-inv`	`#1F242E`	`220, 19%, 15%`	Filets sur fond sombre

Accent et états 8 jetons

Un seul accent. Les couleurs d'état restent réduites à l'essentiel tant que le site n'a qu'un formulaire.

Jeton	HEX	HSL	Usage
`--accent`	`#0C11FF`	`239, 100%, 52%`	Liens et accents sur fond clair
`--accent-strong`	`#0000EE`	`240, 100%, 47%`	Survol, états appuyés
`--accent-lit`	`#85A3FF`	`225, 100%, 76%`	Accent sur fond sombre
`--accent-wash`	`#E8EFFF`	`222, 100%, 95%`	Lavis de fond
`--accent-wash-2`	`#D5E2FF`	`221, 100%, 92%`	Fond des pills claires
`--ok`	`#2F6B4F`	`152, 39%, 30%`	Étiquette « client réel »
`--warn`	`#8A6510`	`42, 79%, 30%`	Étiquette « scénario type »
`--danger`	`#B3261E`	`3, 71%, 41%`	Erreurs de formulaire

Échelles alpha

Relevées dans les exports Figma. Elles servent aux voiles, aux fonds de survol et aux superpositions — partout où une couleur pleine masquerait ce qu’il y a dessous. Le fond du lien de nav actif en est un cas typique : --p-600 à 6 %.

Primaire — alpha 21 jetons

Trois pas seulement (400, 500, 600) : au-delà, un bleu transparent vire au gris et ne se lit plus comme un accent.

Jeton	Valeur	Opacité
`--p-400-10`	`rgba(86, 114, 255, 0.10)`	10 %
`--p-400-15`	`rgba(86, 114, 255, 0.15)`	15 %
`--p-400-20`	`rgba(86, 114, 255, 0.20)`	20 %
`--p-400-25`	`rgba(86, 114, 255, 0.25)`	25 %
`--p-400-50`	`rgba(86, 114, 255, 0.50)`	50 %
`--p-400-75`	`rgba(86, 114, 255, 0.75)`	75 %
`--p-400-90`	`rgba(86, 114, 255, 0.90)`	90 %
`--p-500-10`	`rgba(47, 67, 255, 0.10)`	10 %
`--p-500-15`	`rgba(47, 67, 255, 0.15)`	15 %
`--p-500-20`	`rgba(47, 67, 255, 0.20)`	20 %
`--p-500-25`	`rgba(47, 67, 255, 0.25)`	25 %
`--p-500-50`	`rgba(47, 67, 255, 0.50)`	50 %
`--p-500-75`	`rgba(47, 67, 255, 0.75)`	75 %
`--p-500-90`	`rgba(47, 67, 255, 0.90)`	90 %
`--p-600-10`	`rgba(12, 17, 255, 0.10)`	10 %
`--p-600-15`	`rgba(12, 17, 255, 0.15)`	15 %
`--p-600-20`	`rgba(12, 17, 255, 0.20)`	20 %
`--p-600-25`	`rgba(12, 17, 255, 0.25)`	25 %
`--p-600-50`	`rgba(12, 17, 255, 0.50)`	50 %
`--p-600-75`	`rgba(12, 17, 255, 0.75)`	75 %
`--p-600-90`	`rgba(12, 17, 255, 0.90)`	90 %

Neutre — alpha 19 jetons

Le pas 900 porte six opacités : c’est lui qui fait les voiles de modale et les ombres portées.

Jeton	Valeur	Opacité
`--n-100-50`	`rgba(243, 245, 249, 0.50)`	50 %
`--n-100-75`	`rgba(243, 245, 249, 0.75)`	75 %
`--n-200-50`	`rgba(227, 230, 236, 0.50)`	50 %
`--n-200-75`	`rgba(227, 230, 236, 0.75)`	75 %
`--n-400-10`	`rgba(161, 165, 174, 0.10)`	10 %
`--n-400-25`	`rgba(161, 165, 174, 0.25)`	25 %
`--n-500-10`	`rgba(113, 118, 128, 0.10)`	10 %
`--n-500-25`	`rgba(113, 118, 128, 0.25)`	25 %
`--n-700-50`	`rgba(62, 67, 78, 0.50)`	50 %
`--n-700-75`	`rgba(62, 67, 78, 0.75)`	75 %
`--n-800-50`	`rgba(31, 36, 46, 0.50)`	50 %
`--n-800-75`	`rgba(31, 36, 46, 0.75)`	75 %
`--n-900-10`	`rgba(21, 26, 36, 0.10)`	10 %
`--n-900-20`	`rgba(21, 26, 36, 0.20)`	20 %
`--n-900-35`	`rgba(21, 26, 36, 0.35)`	35 %
`--n-900-60`	`rgba(21, 26, 36, 0.60)`	60 %
`--n-900-75`	`rgba(21, 26, 36, 0.75)`	75 %
`--n-900-80`	`rgba(21, 26, 36, 0.80)`	80 %
`--n-900-90`	`rgba(21, 26, 36, 0.90)`	90 %

Espacement

Base 4 px. Les sauts se resserrent en bas, là où se jouent les micro-ajustements, et s'écartent en haut, où l'œil ne distingue plus 8 px d'écart.

Les dix pas 10 jetons

Jeton	Valeur	Pixels
`--sp-1`	`0.25rem`	4 px
`--sp-2`	`0.5rem`	8 px
`--sp-3`	`0.75rem`	12 px
`--sp-4`	`1rem`	16 px
`--sp-5`	`1.5rem`	24 px
`--sp-6`	`2rem`	32 px
`--sp-7`	`3rem`	48 px
`--sp-8`	`4rem`	64 px
`--sp-9`	`6rem`	96 px
`--sp-10`	`8rem`	128 px

Arrondis

Quatre valeurs. Un rayon qui n'est pas dans cette liste est un oubli, pas une décision.

Les quatre rayons 4 jetons

Jeton	Valeur	Usage
`--r-sm`	`8px`	Petites pastilles, code, champs
`--r-md`	`18px`	Cartes, panneaux, diagrammes
`--r-lg`	`24px`	Blocs sombres détourés, héros
`--r-pill`	`999px`	Boutons, pills, étiquettes de statut

Ombres

Le système sépare par le filet et la couleur de fond, pas par l'ombre. Il n'y en a donc que trois, toutes teintées à l'encre plutôt qu'au noir pur.

Les trois ombres 3 jetons

Jeton	Valeur	Usage
`--sh-sm`	`0 1px 2px rgba(5,8,16,.06)`	Séparation minimale
`--sh-md`	`0 4px 16px -4px rgba(5,8,16,.10)`	Élément flottant, menu
`--sh-lg`	`0 18px 48px -12px rgba(5,8,16,.18)`	Modale, surcouche

Composants

Boutons

Six variantes, trois tailles. Un seul primaire par écran : si deux boutons se disputent l'attention, aucun ne l'a. L'icône est toujours facultative, et jamais seule sans libellé.

Aperçu

Variante	Libellé seul	Icône + libellé	Libellé + flèche	Petit
Primaire`.btn--lit`	Demander mon audit	Demander mon audit	Demander mon audit	Demander
Secondaire`.btn--secondary`	Demander mon audit	Demander mon audit	Demander mon audit	Demander
Tertiaire`.btn--tertiary`	Demander mon audit	Demander mon audit	Demander mon audit	Demander
Encre`.btn`	Demander mon audit	Demander mon audit	Demander mon audit	Demander
Fantôme`.btn--ghost`	Demander mon audit	Demander mon audit	Demander mon audit	Demander
Lien`.btn--link`	Demander mon audit	Demander mon audit	Demander mon audit	Demander

États 5 états

État	Aperçu	Jetons	Note
Défaut	Demander mon audit	`--grad-primary`	Repos.
Survol	Demander mon audit	`filter: brightness(1.15)`	On éclaircit, on ne change pas de teinte.
Pressé	Demander mon audit	`translateY(1px) + brightness(.96)`	Un pixel de descente, assez pour être senti.
Focus clavier	Demander mon audit	`outline: 3px var(--accent)`	Jamais supprimé, jamais remplacé par une ombre.
Désactivé	Demander mon audit	`opacity: .45`	Le pointeur est neutralisé, pas seulement l'apparence.

Variables 5 lignes

Variable	Valeur	Rôle
`--btn-bg`	variable	Fond, piloté par la variante
`--btn-fg`	variable	Texte
`--btn-bd`	`transparent`	Contour — fantôme et secondaire
`--grad-primary`	`linear-gradient(145deg, p-500, p-700)`	Dégradé du primaire. Ne pas remonter au-dessus de p-500.
`--r-pill`	`999px`	Rayon, identique sur toutes les variantes

Dimensions 3 lignes

Taille	Padding	Fonte	Usage
`.btn--sm`	`.7em 1.25em`	`--fs-xs`	Dans une carte, dans une table
`.btn`	`1em 1.85em`	`--fs-small`	Par défaut
`.btn--lg`	`1.15em 2.15em`	`--fs-body`	Héros, bloc de conversion

Pills et étiquettes

Elles qualifient : un argument, un statut, une limite.Une pill ne clique jamais. Si l'élément doit être actionnable, c'est un bouton.

Aperçu

Périmètre écrit avant de commencerPrix ferme après cadrageHors taxesClient réelScénario type

Variables 5 lignes

Élément	Fond	Texte	Usage
`.pill`	`--accent-wash-2`	`--p-900`	Argument mis en avant
`.pill--neutral`	`--surface-3`	`--text-mute`	Précision secondaire
`.pill--dark`	`--p-950`	`--accent-lit`	Sur fond sombre — automatique dans `.sect--ink`
`.badge--real`	transparent	`--ok`	Cas client réel
`.badge--type`	transparent	`--warn`	Scénario de mission

Champs texte

Soulignés, pas encadrés. Le libellé reste au-dessus en permanence : un libellé flottant qui remonte dans le champ laisse l'utilisateur sans rappel de ce qu'il est en train de remplir.

Aperçu

Adresse professionnelle

Le libellé reste visible. Un placeholder seul disparaît à la première frappe.

États 4 états

État	Aperçu	Jetons	Note
Défaut		`--border-field`	Filet bas, 1 px.
Focus		`--accent, 1.5px`	Le filet s'épaissit et passe à l'accent.
Erreur	Format d’adresse invalide.	`--danger`	Rouge, jamais l'accent : une erreur ne doit pas ressembler à un lien.
Désactivé		`opacity: .5`	Reste lisible, mais clairement inerte.

Dimensions 4 lignes

Propriété	Valeur	Note
Padding	`.7rem 0`	Pas de retrait horizontal : le champ est souligné, pas encadré
Filet	`1px` → `1.5px` au focus	Le seul mouvement du composant
Libellé	`--fs-label`, mono, capitales	Toujours au-dessus, jamais flottant
Fonte	`--fs-body`	Plus petit, la saisie devient pénible

Sélecteurs

Même base que les champs texte, avec un chevron. On garde le<select> natif : sur mobile il ouvre le sélecteur du système, qu'aucun composant sur mesure n'égale en confort.

Aperçu

Votre besoin

Checkbox

Une seule vraie utilisation sur le site : le consentement du formulaire. Elle n'est jamais pré-cochée, et le texte d'aide dit ce qu'on fait de l'adresse.

Aperçu

J’accepte d’être recontacté au sujet de ma demande.Aucune autre utilisation, aucun transfert à un tiers.

Recevoir les cas publiés, environ une fois par trimestre.

Option indisponible pour l’instant.