---
name: style-growth
description: Growth / analytics dashboard design - KPI cards, sparklines, sortable tables, filters, drill-downs, actionable insights. Use when the user asks for "dashboard", "analytics", "KPI", "metrics", "reporting", "growth tool" style.
---

# Style Growth

L'utilisateur ouvre le dashboard pour décider. Chaque pixel doit aider à la décision.

## Palette

- BG: gris très clair `#f8fafc` (light) ou anthracite `#0f1729` (dark).
- Cards: blanc pur ou gris légèrement plus clair que le BG.
- Data colors: distinctes et à contraste élevé - bleu `#3b82f6`, vert `#10b981`, orange `#f97316`, violet `#8b5cf6`, rouge `#ef4444`.
- Trends: vert `#10b981` (up), rouge `#ef4444` (down), gris `#94a3b8` (flat).

## Typographie

- Numbers: mono OU tabular numbers (Söhne, Inter with `font-variant-numeric: tabular-nums`).
- Labels: sans neutre, uppercase small letter-spacing 0.05em.
- Body: 14-15 px (densité info élevée).

## Layout

- Header : filtres globaux (période, segment, comparaison) sticky en haut.
- Grid de KPI cards (4-6 par ligne desktop) : label, chiffre gros, delta vs période, sparkline.
- Sous les KPIs : charts (line, bar, area) et tables tri/filter.
- Sidebar navigation étroite (60-80px) avec icônes only.

## Data viz

- Line charts pour tendances temporelles.
- Bar charts pour comparaisons discrètes.
- Heatmaps pour patterns 2D.
- **Toujours** afficher les axes, la légende, le tooltip au hover.
- Empty states clairs : "Aucune donnée pour cette période - essaie X."

## Composants signature

- KPI card: `{ label, value, delta, sparkline, drill-down link }`.
- Table filtrable, triable, exportable CSV.
- Segments modifiables (`+` pour créer un segment custom).
- Alertes conditionnelles ("si conversion < X, notifier").

## Rules

- Densité > décoration. Pas de padding gratuit.
- Toujours indiquer la période comparée pour un delta.
- Chart hover = tooltip précis, pas seulement une couleur qui change.