Logo

Démonstration du thème

Cette page montre comment les tokens visuels (couleurs, surfaces, contrastes) s'appliquent automatiquement en mode clair et sombre.

Retour à l'accueil
Changer le mode
Primary
Token de couleur du design system
Exemple de fond primary

Ce texte utilise la teinte primary.

Secondary
Token de couleur du design system
Exemple de fond secondary

Ce texte utilise la teinte secondary.

Accent
Token de couleur du design system
Exemple de fond accent

Ce texte utilise la teinte accent.

Destructive
Token de couleur du design system
Exemple de fond destructive

Ce texte utilise la teinte destructive.

Composants interactifs
Les composants s'adaptent sans modification de code selon le thème actif.
Statuts et badges
Exemple d'application sur des éléments de statut.
Par défautInformationUrgentNeutre
Guide d'utilisation
Quelques règles simples pour appliquer le thème de façon uniforme dans l'application.

Surfaces

Utiliser bg-background pour la page, bg-card pour les blocs de contenu, et border-border pour garder une hiérarchie lisible.

Texte

text-foreground pour le texte principal et text-muted-foreground pour les compléments permet de maintenir un contraste cohérent.

Actions

Le bouton principal doit rester réservé aux actions critiques du parcours. Les variantes secondary/outline/ghost servent à réduire la charge visuelle.

Feedback

Accent met en valeur des états positifs et destructive les alertes. Éviter d'utiliser ces teintes pour du contenu purement décoratif.

Hiérarchie typographique
Exemple de styles de texte à conserver pour rester homogène.

Libellé / métadonnée

Titre de section

Texte d'accompagnement. Utiliser des phrases courtes et explicites pour les descriptions.

Zone secondaire (bg-muted) pour contenus contextuels.

Pratique pour des aides, notes ou encarts de résumé.

Tableau: suivi du tunnel
Exemple de table lisible en clair/sombre pour piloter les métriques de conversion.
Prioriser les étapes avec le plus grand écart entre objectif et réel.
ÉtapeMétriqueObjectifNote d'action
Visite page tournoiTaux de clic CTA≥ 20 %Tester des CTA plus explicites: "Je m'inscris en 3 min".
Ouverture formulaireTaux de démarrage≥ 65 %Afficher les étapes et la durée estimée dès le départ.
RemplissageAbandon mi-parcours≤ 30 %Réduire les champs non bloquants et clarifier les aides.
ValidationTaux de soumission≥ 80 %Renforcer la confirmation et le suivi post-envoi.
Jauges: lecture rapide des états
Les barres de progression servent à rendre le niveau d'avancement immédiatement visible.
Profil complété72%
Paiement validé45%
Dossiers incomplets20%
Formulaire: structure recommandée
Démo d'un formulaire avec labels, aides contextuelles, validation et hiérarchie claire.

Utiliser le même nom que sur la licence FFTT.

Validation à afficher

✅ Champ valide (vert), ⚠️ attention (amber), ❌ erreur (rouge) avec message actionnable sous le champ.

Listes: informations scannables
Utiliser listes à puces et listes numérotées pour faciliter la lecture rapide.

Checklist UX avant mise en production

  • Lister les champs obligatoires avant ouverture du formulaire.
  • Afficher une progression visible pour réduire l'incertitude.
  • Pré-remplir les informations connues de l'utilisateur connecté.
  • Montrer une validation inline (erreurs + succès) champ par champ.
  • Ajouter une section d'aide concise sous les champs complexes.

Séquence recommandée

  1. Définir les objectifs (conversion, rapidité, clarté).
  2. Prototyper les écrans clés avec états vides/erreurs/succès.
  3. Tester avec 5 utilisateurs et corriger les frictions majeures.
  4. Instrumenter les KPI et suivre chaque semaine.