Charte graphique Soluteam
La référence pour aligner le logiciel sur l'identité du site. Signature Humain × IA : une vraie personne, augmentée par l'IA, sur une base navy.
Le S, scindé en deux
Arc haut ambre (l'humain), arc bas teal (l'IA). Le S de Soluteam et l'idée d'équipe en un seul signe.
Nom vs wordmark : le logo s'écrit mysoluteam — un seul mot, minuscules, « my » en teal — en écho au domaine mysoluteam.com. Dans les textes, le nom de l'entreprise reste « Soluteam ». Le « my » vit dans le wordmark, jamais dans le mark « S ».
- À faire
- · Espace de protection ≥ ½ hauteur du mark
- · Taille mini 24 px (20 px en favicon)
- · Mark transparent sur fond sombre, tuile navy en app icon
- À éviter
- · Recolorer ou inverser les deux arcs
- · Étirer / déformer le mark
- · Le poser sur un fond peu contrasté, ajouter une ombre
Palette
Sur fond clair, pour le texte/icône en couleur, utiliser amber-600 / teal-600. Le texte sur bouton teal est ink, pas blanc.
Marque
#0E1A33
221 57% 13%
#14223F
221 52% 16%
#1B2E52
219 38% 21%
#F4A862
29 86% 67%
#E68A36
29 78% 56%
#2DD4BF
172 66% 50%
#15B5A2
173 79% 40%
Surfaces & texte
#FBFAF7
45 33% 98%
#F2ECE2
38 38% 92%
#E7E1D6
39 26% 87%
#586176
222 15% 40%
#A8B0C0
220 16% 71%
Bricolage Grotesque × Inter
Display — Bricolage Grotesque
Reprenez vos heures.
Titres & chiffres clés
letter-spacing -0.02em · 600–800
Corps — Inter
Un assistant de direction dédié, augmenté par l'IA.
Texte courant en Inter 400–600, interligne 1.6 pour le confort de lecture.
Small / légendes · 0.875rem
Eyebrow (sur-titre)
0.72rem · 600 · tracking 0.18em · MAJUSCULES · préfixe « × » ambre. Highlight d'un mot : surligné.
Briques d'interface
Boutons
Primaire = teal + texte ink, rounded-full.
Badges / pills
Fond teinté 10–15 % + texte dans le -600.
Champ
Focus : anneau teal, toujours visible au clavier.
Card (sombre)
Surface ink-700
Bordure white/10, rayon 16px.
Rayons, icônes, mouvement
Rayons
lg 12px · card 16px · CTA full
Icônes — ligne 1.5
currentColor · bouts arrondis · jamais d'emoji
Mouvement
Reveal scroll : translateY + opacité, 720ms, cubic-bezier(.22,1,.36,1).
Hover card : -4px, 240ms.
Respecte prefers-reduced-motion.
Fichiers à intégrer
Tokens prêts pour ta stack React + Vite + Tailwind + shadcn/ui. Étapes détaillées dans le README.
