Design system H&H

Page de référence de la story s00. Chaque token et chaque composant y figure avec ses états. Les tokens vivent dans src/app/globals.css : changer une valeur là-bas change tout ce qui s'affiche ici.

Couleur

Un état d'interaction ne prend jamais une couleur sémantique : survol et pression sont des décalages de surface neutres.

Encres

ink-900
ink-700
ink-500
ink-300

Filets

line-300
line-200
line-100

Surfaces

surface
surface-sunken
surface-hover
surface-pressed

Action

action-050
action-line
action-500
action-600
action-700

Canal WhatsApp

whatsapp-500
whatsapp-600
whatsapp-700

Retard

late-050
late-line
late-500
late-600

Acquis

won-050
won-600

À surveiller

warn-050
warn-line
warn-500
warn-600

Paires légales sur fond teinté

Sur un fond doux, l'encre secondaire est ink-700 (9,55:1). Jamais ink-500, qui y tombe à 4,48:1 et échoue au seuil de la CI.

Typographie

Archivo, graisses 400/500/600. Jamais 700, jamais de capitales, jamais de tracking positif. Rien sous 12 px.

display-lgMartine Durand — vendeur Rezé38 px · 600
displayMartine Durand — vendeur Rezé32 px · 600
title-xlMartine Durand — vendeur Rezé26 px · 600
titleMartine Durand — vendeur Rezé19 px · 600
nameMartine Durand — vendeur Rezé15 px · 600
bodyMartine Durand — vendeur Rezé15 px · 400
body-smMartine Durand — vendeur Rezé14 px · 400
labelMartine Durand — vendeur Rezé13 px · 500
captionMartine Durand — vendeur Rezé12 px · 400
.num9 h 121 h 4813 200 €06 12 34 56 78

Espacement

Base 4. Les espacements restent en px : ils ne grossissent pas avec le texte.

4
8
12
16
20
24
32
40
56
72

Formes et élévation

Élévation 1 = une bordure 1 px, pas un anneau : un anneau extérieur est rogné par overflow:hidden.

Rayons

xs · 3 px
sm · 5 px
md · 8 px
lg · 10 px
xl · 12 px

Ombres

bordure
card
pop
modal

Boutons

Un seul primaire par écran. 54 px sur mobile pour « Appeler », 48 px pour une action, 44 px minimum partout.

Normal

Désactivé (avec sa raison à côté)

Le prospect a demandé STOP : plus aucun message ne part.

Chargement

Survol, pression et focus se voient à l'écran : passez la souris, cliquez, puis naviguez à la touche Tab — l'anneau de focus est le même partout.

Champs

Libellé au-dessus, jamais dans le champ. L'erreur remplace l'aide et dit quoi faire.

Portable ou fixe, avec l'indicatif.

Code de vérification

Choix

Pas de boutons radio : segment à 2-3 options, feuille de lignes de 48 px au-delà.

Liste déroulante

Segment

Case et bascule

Une coordonnée ne part jamais dans un WhatsApp.

Part dès l'arrivée du lead, pendant la plage.

Chips de filtre — trois états

Statut et température

La couleur d'un statut vient de la base et ne colore qu'une pastille de 10 px. La température est trois flammes à l'encre, jamais dérivée d'un montant.

Badges de statut (couleurs choisies par le client)

NouveauÀ rappelerEn contactRDV planifiéMandatEn attenteTièdePerdu

Température

FroidTièdeChaudBrûlant

Cartes et listes

Ligne de liste de 52 px ; sélection en action-050 avec un filet action-500.

Carte simple

Bordure d'un pixel, aucune ombre.

Carte saisissable

Ombre légère : on peut cliquer dessus.

Tableau responsive

Tableau sur bureau, cartes sur mobile : jamais un tableau qui déborde horizontalement.

  • Julie Martin
    Leads du mois14
    En retard2
  • Paul Rivière
    Leads du mois9
    En retard0
  • Sonia Bakri
    Leads du mois21
    En retard3

Groupe repliable

Toute liste tronquée déclare son reste.

Trois leads attendent depuis hier.

Bandeaux et questions

Un bandeau persistant dit ce qui manque et ce qu'on peut faire.

Ajoutez WhatsApp pour être prévenu à temps

Sans numéro vérifié, les alertes partent par email seulement.

Accueil non terminé

Il reste 2 étapes avant que les leads arrivent.

Collecte interrompue

Aucun lead reçu depuis 48 h alors que la pub tourne.

Vous l'avez eu ?

Couches : feuille, modale, toast

On ne demande confirmation que pour ce qui ne se rattrape pas.

Vide et chargement

Un état vide dit ce qui manque et ce qu'on peut faire.

Aucun lead en retard

Tout le monde a été rappelé dans les temps.

Navigation mobile

Chaque écran client est utilisable à une main sur un téléphone de 375 px.

La barre d'onglets est fixée en bas de cette page : réduisez la fenêtre sous 768 px pour la voir.