Couleurs

Notre palette est intentionnellement sobre. Nous utilisons les neutres comme fondation, la couleur étant réservée au sens et à l'emphase.

Arrière-plan : #FAFAFA (blanc cassé chaud) pour les pages, #FFFFFF pour les cartes et surfaces élevées.
Texte : #0A0A0A pour le texte primaire, #71717A pour le secondaire, #A1A1AA pour le désactivé.
Accent : Bleu pour l'ingénierie, Violet pour le design, Orange pour le marketing, Émeraude pour le succès.
Sémantique : Vert pour positif, Jaune pour avertissement, Rouge pour erreur — utilisé avec parcimonie.
Visualisation des données : Échelle d'intensité bleue pour la valeur du visiteur, couleurs des sources de trafic pour les graphiques d'attribution.

Typographie

Deux polices couvrent tous nos besoins. Nous n'introduisons pas de nouvelles polices sans justification solide.

Inter : Notre cheval de bataille. Texte de corps, éléments UI, boutons, étiquettes. Graisses 400-700.
Instrument Serif : Pour l'impact. Titres hero, chiffres décoratifs, citations. Utilisé avec parcimonie.

L'échelle typographique suit un ratio modulaire : 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72 px. Les hauteurs de ligne sont 1,5 pour le corps, 1,2 pour les titres.

Espacement

Nous utilisons une grille de base de 8 px. Valeurs d'espacement courantes : 8, 16, 24, 32, 48, 64, 96. La cohérence dans l'espacement crée un rythme visuel.

Le rythme vertical compte plus que l'horizontal. Les sections ont un rembourrage généreux (64-96 px). Les composants ont un espacement interne plus serré (16-24 px).

Composants

Notre bibliothèque de composants est minimaliste par conception. Nous avons des boutons, des cartes, des champs de saisie et quelques composants spécialisés. Lorsque vous avez besoin de quelque chose de nouveau, demandez d'abord si un composant existant peut convenir.

Boutons : Primaire (bleu plein), Secondaire (contour), Fantôme (texte uniquement). Trois tailles : sm, md, lg.
Cartes : Fond blanc, ombre subtile, coins arrondis (8 px). Les états de survol lèvent légèrement la carte.
Champs de saisie : Bordures nettes, rembourrage généreux, états de focus clairs avec anneau bleu.
Modales : Centrées avec flou d'arrière-plan. Utilisées avec parcimonie pour les confirmations et les tâches ciblées.

Mouvement

Les animations servent la fonction, pas la décoration :

Durée : 150 ms pour les micro-interactions, 300 ms pour les transitions, 500 ms pour les changements de page.
Accélération : ease-out pour les entrées, ease-in pour les sorties, ease-in-out pour les boucles.
Mouvement réduit : Toutes les animations respectent les préférences utilisateur via prefers-reduced-motion.

Icônes

Nous utilisons exclusivement Lucide Icons. Elles sont cohérentes, bien conçues et ont une excellente couverture. La taille par défaut est 20 px, épaisseur de trait 1,5.