Fondations du design et mise en page

Crée un système de couleurs pour cette application :
- 1 couleur de marque principale
- 1 couleur secondaire
- 1 couleur d'accent pour les mises en avant
- 4 gris neutres pour les arrière-plans, les surfaces et les bordures
Associe les couleurs à des rôles comme primary, surface, border, success, warning, error.
Assure-toi que le texte sur les arrière-plans respecte les niveaux de contraste d'accessibilité.
Applique ce système dans toute l'application et remplace les couleurs isolées.

Utilise cette palette et attribue un rôle à chaque code hexadécimal :
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Définis lesquels sont les rôles primary, secondary, accent et neutres.
Remplace les couleurs codées en dur par des tokens ou des classes Tailwind qui suivent ces rôles.

Applique les couleurs de cette image à mon application.
Associe chaque couleur à un rôle comme primary, background, foreground et accent.
Remplace les couleurs existantes dans toute l'application pour correspondre.

Importe la police "Raleway" depuis Google Fonts.
Utilise-la pour les titres de page et les titres de section.
Garde la police actuelle du texte courant pour les paragraphes.
Mets à jour les styles dans toute l'application pour suivre cette règle.

Ajoute une image hero pleine largeur à la page d'accueil qui correspond à la palette de couleurs actuelle.
Utilise une image de remplacement qui évoque un tableau de bord analytique moderne.

Crée une courte vidéo d'onboarding pour mon application de fitness montrant une routine d'entraînement matinale simple. Ajoute-la à l'écran de bienvenue au-dessus du bouton Get Started.

Utilise cette référence comme inspiration.
Garde ma mise en page et mon contenu, mais :
- Reprends les formes et les ombres des boutons
- Reprends le rayon des coins et le style de bordure des cartes
- Applique un dégradé doux similaire uniquement à l'en-tête supérieur
Ne copie pas les couleurs exactes, seulement la structure et le ressenti.

À partir de cette capture d'écran, extrais des règles de design pour :
- Les rôles de couleurs
- Les tailles et graisses de police
- Le rayon des coins et les ombres
- L'espacement entre les sections et les cartes
Explique les règles, puis applique un style similaire avec mes couleurs de marque actuelles.

Change le style d'arrière-plan de cet élément en :
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Garde tous les autres styles identiques.

Remplace les icônes génériques par des icônes plus parlantes :
- Utilise des icônes qui correspondent clairement à chaque élément de navigation et action principale
- Garde la taille des icônes et l'épaisseur des traits cohérentes
- Aligne proprement les icônes avec les libellés dans la navigation, les listes et les boutons

Mets à jour tous les boutons d'appel à l'action principaux :
- Utilise l'icône "sparkles" à gauche du libellé
- Garde une petite taille d'icône et un padding régulier
- N'ajoute pas d'icônes aux boutons secondaires ou destructifs

Identifie les principaux types de pages de cette application (atterrissage, tableau de bord, liste, détail, formulaire, paramètres).
Pour chaque type :
- Propose une structure de mise en page cohérente
- Suggère quels composants existants réutiliser
Applique ces mises en page à toutes les pages du même type, sans changer le contenu.

Améliore la hiérarchie visuelle et l'espace blanc sur cette page :
- Fais clairement ressortir le titre de page au-dessus des autres textes
- Utilise des titres de section cohérents pour regrouper le contenu
- Ajoute plus de padding en haut et en bas de chaque section
- Augmente l'écart entre les rangées de cartes
Évite d'ajouter de nouvelles couleurs ou polices.

Rends cette mise en page responsive :
- Sur téléphone, utilise une seule colonne verticale et empile les sections
- Sur tablette, utilise deux colonnes pour les cartes quand l'espace le permet
- Sur ordinateur, utilise trois ou quatre colonnes pour les cartes
Garde les images au ratio 4:3.
Replie la barre latérale en menu supérieur sur les petits écrans.
Évite le défilement horizontal à tous les points de rupture.

Conçois la page d'accueil comme une page d'atterrissage ciblée :
- Section hero épurée avec un titre court, une phrase de soutien et un appel à l'action principal
- Enchaîne avec trois bénéfices clés dans des cartes
- Ajoute une section de preuve sociale simple avec des logos
- Garde une navigation minimale
Utilise mon système de couleurs et de typographie existant.

Restructure ce tableau de bord :
- Place le KPI principal en haut à gauche dans une carte bien visible
- Regroupe les métriques liées dans une grille de cartes 2x2
- Déplace les filtres et les contrôles de plage de dates dans une barre supérieure épurée
- Réduis le bruit visuel des graphiques avec des couleurs et des styles cohérents

Nettoie cette vue de table :
- Augmente légèrement la hauteur des lignes
- Utilise des séparateurs de ligne discrets ou des rayures alternées
- Aligne les actions dans une colonne cohérente en fin de ligne
- Ajoute un état vide clair avec un court message et une action principale

Améliore cette page de détail :
- Déplace le titre principal et les actions principales en haut de la page
- Utilise une mise en page à deux colonnes avec le contenu principal à gauche et les infos secondaires à droite
- Regroupe les champs liés sous de petits titres
- Rends les actions destructives clairement libellées et visuellement distinctes

Repense ce formulaire pour plus de clarté :
- Utilise une mise en page à une colonne
- Regroupe les champs liés sous de courts titres
- Ajoute des libellés clairs et du texte d'aide si besoin
- Affiche des messages d'erreur en ligne sous chaque champ quand la validation échoue
Utilise mon système de typographie et d'espacement existant.

J'ai ajouté le package npm framer-motion. Refactore la grille de cartes existante pour que chaque carte s'anime au survol avec framer-motion :
- Garde la mise en page et les textes actuels
- Utilise les tokens de couleur, le rayon de bordure et la typographie existants
- Respecte prefers-reduced-motion et garde des contours de focus clavier bien visibles

Refactore ces composants pour utiliser des classes Tailwind cohérentes :
- Remplace les attributs de style en ligne par des utilitaires Tailwind
- Utilise les tokens de design pour les couleurs, l'espacement et la typographie
- Documente les principales combinaisons de classes pour la navigation, les cartes et les boutons

Voici mon composant Layout.js.
Ajuste-le pour que :
- L'en-tête reste collé au défilement
- Le contenu principal ait une largeur maximale et soit centré sur les grands écrans
- La couleur d'arrière-plan utilise le token surface de mon système de design
Explique ce que tu as changé dans des commentaires.

Examine le design de cette application sous l'angle de la performance :
- Identifie les éléments visuels ou de code lourds qui pourraient ralentir le chargement
- Suggère des alternatives plus légères qui gardent le même rendu global
- Propose des endroits précis où le chargement différé ou le découpage de code aiderait

Audite cette application pour le contraste des couleurs :
- Identifie les textes ou icônes avec un faible contraste par rapport à leur arrière-plan
- Renforce le contraste en gardant globalement la même palette
- Assure-toi que les boutons principaux et les liens sont clairement identifiables
Décris les principales corrections appliquées.

Améliore la lisibilité du texte :
- Augmente légèrement la taille de base du texte courant
- Augmente la hauteur de ligne des paragraphes
- Assure-toi que les titres sont nettement plus grands que le texte courant
- Réduis les lignes très longues sur les écrans larges

Améliore l'accessibilité au clavier et le focus :
- Assure-toi que tous les éléments interactifs sont accessibles avec Tab
- Ajoute des styles de focus visibles aux boutons, liens et champs de formulaire
- Corrige les problèmes d'ordre de focus sur cette page
Décris les changements majeurs effectués.

Ajuste les animations pour l'accessibilité :
- Respecte la préférence de mouvement réduit de l'utilisateur
- Supprime ou simplifie les grandes animations continues
- Garde seulement des mouvements courts et subtils qui aident la compréhension

Améliore l'accessibilité des libellés et du texte alternatif :
- Rends les libellés de boutons et de liens plus descriptifs si besoin
- Ajoute ou améliore le texte alternatif des images importantes
- Assure-toi que les titres suivent une structure claire
Garde le même ton et la même voix de marque.

Rends cette mise en page responsive pour mobile, tablette et ordinateur.
Évite le défilement horizontal et garde les actions principales visibles sans défilement excessif.