Style Growth

Style Growth

Ton utilisateur ouvre le dashboard pour décider. Chaque pixel doit aider à la décision, le reste est du bruit.

Quand l'utiliser

• Dashboards produit, marketing, ventes, finance, back-offices SaaS, reporting client.
• Évite-le pour une page marketing ou un site vitrine : trop dense pour convaincre un inconnu.

Palette

• Fond light : #f8fafc, cards #ffffff, bordures #e2e8f0. Fond dark : #0f1729, cards #16213a, bordures #24324f.
• Texte light : #0f172a, secondaire #64748b (4.8:1). Texte dark : #e2e8f0 (14.5:1), secondaire #94a3b8 (7:1).
• Séries (ordre fixe) : bleu #3b82f6, vert #10b981, orange #f97316, violet #8b5cf6, rouge #ef4444. Au-delà de 5 séries, regroupe en "Autres" gris.
• Tendances : hausse #10b981, baisse #ef4444, stable #94a3b8. En texte sur blanc, passe à #047857 et #dc2626 (le vert d'origine fait 2.5:1). Sur dark, les couleurs d'origine passent AA.
• Ne code jamais un sens par la couleur seule : ajoute flèche ou signe.

Typographie

• Inter (Google Fonts) avec font-variant-numeric: tabular-nums partout. JetBrains Mono ou IBM Plex Mono pour IDs et requêtes.
• Échelle : titre de page 20px/1.3 (600), titre de card 14px/1.4 (600), valeur KPI 28 à 32px/1.1 (600), body 14px/1.5, label 11 à 12px (500, uppercase, letter-spacing 0.05em), axes de chart 11px.
• Chiffres alignés à droite dans les tables, unités en --muted plus petites.
• Formate les grands nombres : 12,4 k, 3,2 M €, précision complète en tooltip.

Layout & grille

• Sidebar icônes 64 à 72px, extensible à 240px avec libellés.
• Barre de filtres globale sticky 56px : période, segment, comparaison ("vs période précédente").
• Grille 12 colonnes fluide, gouttière 16px, padding de page 24px.
• Rangée de KPI : 4 à 6 cards desktop, 2 tablette, 1 mobile (ou scroll horizontal).
• Rythme 4px : 4, 8, 12, 16, 24. Card padding 16px. Densité avant décoration.
• Breakpoints : 768, 1024, 1440, 1920px.

Composants signature

• KPI card : label, valeur, delta (+12,4 % avec flèche et période comparée), sparkline 32px de haut, lien de drill-down.
• Charts : line pour les tendances, bar pour les comparaisons, heatmap jour x heure. Axes, légende, tooltip toujours.
• Tooltip : date, valeur exacte, valeur comparée, delta. Fond #0f172a, texte blanc 12px.
• Table : header sticky, tri, filtres inline, export CSV, lignes de 40px.
• Segments : chips cliquables, bouton + pour créer un segment custom.
• Alertes : règle lisible ("Si conversion < 2 % sur 24 h, notifier #growth").
• Empty state : "Aucune donnée pour cette période. Essaie 30 jours." avec bouton.
• Loading : skeletons à la forme des cards, pas de spinner plein écran.

Motion

• 150 à 200ms, cubic-bezier(0.4, 0, 0.2, 1).
• Autorisé : transition de données au changement de filtre (300ms max), tooltip (100ms), shimmer de skeleton.
• Interdit : compteurs qui défilent, charts redessinés en boucle, layout qui saute au changement de filtre.

Tokens CSS

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --s1: #3b82f6;
  --s2: #10b981;
  --s3: #f97316;
  --s4: #8b5cf6;
  --s5: #ef4444;
  --up: #047857;
  --down: #dc2626;
  --flat: #94a3b8;
  --radius: 8px;
  --font: Inter, system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #0f1729; --card: #16213a; --border: #24324f;
  --text: #e2e8f0; --muted: #94a3b8; --up: #10b981; --down: #ef4444;
}

Checklist avant livraison

• Chaque delta indique la période comparée.
• Tous les chiffres en tabular-nums, alignés à droite.
• Chaque chart a axes, légende, tooltip et état vide.
• Les deux thèmes sont testés, contrastes AA sur texte et 3:1 sur traits de graphique.
• Hausse et baisse sont lisibles sans la couleur (flèche ou signe).
• Les filtres sont reflétés dans l'URL pour partager une vue.

À éviter

• Donuts et jauges partout, charts 3D.
• Padding généreux qui pousse les KPIs sous le pli.
• Plus de 5 couleurs de série dans un même chart.
• Un delta sans référence, un chiffre sans unité.
• Axe Y qui ne commence pas à zéro sur un bar chart.

Prompts de démarrage

• "Crée un dashboard growth SaaS en style-growth : MRR, churn, activation, NPS, chart d'acquisition par canal et table des comptes."
• "Conçois un dashboard e-commerce avec filtres période et pays, KPIs, heatmap des ventes par jour et heure."
• "Fais une page de reporting mensuel client, exportable, en thème clair et sombre."
• "Ajoute un système d'alertes conditionnelles à ce dashboard avec un éditeur de règles simple."