Couleurs

Toutes les valeurs ci-dessous sont relevées automatiquement dans les feuilles de style en ligne de la landing et de l’application : elles sont exactes. Chaque pastille montre la valeur claire (☀) et, quand elle existe, la valeur sombre (☾), avec le contraste mesuré sur le fond du thème (AA = lisible en texte courant, AA grand = titres et gros textes seulement).

Les neutres

La marque repose sur un trio crème, encre, bleu acier. Le crème remplace le blanc pur comme fond : plus chaud, moins fatigant.

Crème (fond)--color-cream☀ #f8f6f1 · 1.0:1 —

Surface--color-surface☀ #fff · 1.1:1 —

Bordure--color-border☀ #e8e4dc · 1.2:1 —

Bordure forte--border-strong☀ #d6d0c4 · 1.4:1 —☾ #464a5c · 1.9:1 —

Encre (texte)--color-ink☀ #1a1a18 · 16.1:1 AAA☾ #f0ede8 · 14.0:1 AAA

Texte doux--text-soft☀ #4a4842 · 8.5:1 AAA☾ #c9c6c0 · 9.6:1 AAA

Texte discret--color-muted☀ #9a9589 · 2.8:1 —

Les bleus

Le bleu acier est la couleur d’action : boutons principaux, liens, éléments actifs, focus. L’échelle va du plus clair (100) au plus sombre (900).

Bleu 100--color-blue-100☀ #aacadf · 1.6:1 —

Bleu 300--color-blue-300☀ #6baac8 · 2.4:1 —

Bleu 500 (accent)--color-blue-500☀ #3d7fae · 4.0:1 AA grand

Bleu 700--color-blue-700☀ #2a5a7e · 6.8:1 AA

Bleu 900--color-blue-900☀ #1a3a54 · 10.9:1 AAA

Bleu 500 : boutons principaux (texte blanc), barres de progression.
Bleu 700 : liens et texte d’accent sur fond clair (contraste AA).
Bleu 300 / 100 : accents sur fond sombre, anneau de focus.

Les couleurs sémantiques

Succès--color-success☀ #3d9e8c · 3.0:1 AA grand

Attention--color-warning☀ #f0c94a · 1.5:1 —

Danger--color-danger☀ #e8533a · 3.4:1 AA grand

Information--color-info☀ #6baac8 · 2.4:1 —

Elles s’emploient surtout en fond teinté (12–22 % d’opacité) avec un texte plus foncé de la même famille — c’est ainsi que sont construits les badges. Voir Composants.

Les étapes du pipeline

Chaque étape a sa couleur, du gris-bleu (collecté) au vert (envoyé) : la progression se lit d’un coup d’œil.

Collecté--stage-scraped☀ #8a97ab · 2.7:1 —

Analysé--stage-analysed☀ #2f6db5 · 4.9:1 AA

Scoré--stage-scored☀ #2a8bb0 · 3.6:1 AA grand

Maquette prête--stage-designed☀ #1c9a96 · 3.2:1 AA grand

Email envoyé--stage-mailed☀ #12a06a · 3.1:1 AA grand

Le thème sombre

L’application et la landing ont chacune un thème sombre, avec des fonds légèrement différents.

Fond (application)--color-dark-bg☀ #1d1f2c · 1.0:1 —

Surface--color-dark-surface☀ #252836 · 1.1:1 —

Bordure--color-dark-border☀ #353848 · 1.4:1 —

Texte discret--color-dark-muted☀ #969db1 · 6.0:1 AA

Texte--color-dark-text☀ #f0ede8 · 14.0:1 AAA

Fond (landing)--background☀ #f8f6f1 · 1.0:1 —☾ #343642 · 1.0:1 —

Surface (landing)--cream-dark☀ #f0ede6 · 1.1:1 —☾ #494b55 · 1.4:1 —

Encre (landing)--ink☀ #1a1a18 · 16.1:1 AAA☾ #f5f2ec · 10.7:1 AAA

Encre atténuée--ink-muted☀ #243a4b · 10.9:1 AAA☾ #c8cdd8 · 7.5:1 AAA

Accent (landing)--accent☀ #3d7fae · 4.0:1 AA grand☾ #aacadf · 7.0:1 AAA

En sombre, l’accent s’éclaircit (#aacadf sur la landing, bleu 300 dans l’application) pour garder son contraste.

Les accents au choix

Dans l’application, l’utilisateur peut remplacer le bleu par un autre accent : violet, vert, orange ou rose. Toute l’échelle 100 → 900 change ; la palette neutre et les couleurs sémantiques restent identiques. Voir les accents en action.

Les couleurs des forfaits

Forfait	Couleur
Gratuit	#6B7280
Starter	#1C9A96
Pro	#2F6DB5

Toutes les variables, landing et application, sont listées dans Ressources.