Fondamenta di design e layout

Crea un sistema di colori per questa app:
- 1 colore primario del brand
- 1 colore secondario
- 1 colore accento per le evidenziazioni
- 4 grigi neutri per sfondi, superfici e bordi
Assegna i colori a ruoli come primario, superficie, bordo, successo, avviso, errore.
Assicurati che il testo sugli sfondi rispetti i livelli di contrasto per l'accessibilità.
Applica questo sistema a tutta l'app e sostituisci i colori fuori standard.

Usa questa palette e assegna ogni codice esadecimale a un ruolo:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Definisci quali sono i ruoli primario, secondario, accento e neutri.
Sostituisci i colori scritti a mano con token o classi Tailwind che seguono questi ruoli.

Applica i colori di questa immagine alla mia app.
Assegna ogni colore a un ruolo come primario, sfondo, primo piano e accento.
Sostituisci i colori esistenti in tutta l'app perché corrispondano.

Importa il font "Raleway" da Google Fonts.
Usalo per i titoli di pagina e le intestazioni di sezione.
Mantieni il font attuale del corpo per i paragrafi.
Aggiorna gli stili in tutta l'app per seguire questa regola.

Aggiungi un'immagine hero a tutta larghezza alla homepage che corrisponda alla palette di colori attuale.
Usa un'immagine segnaposto che suggerisca una dashboard di analisi moderna.

Crea un breve video di onboarding per la mia app di fitness che mostri una semplice routine di allenamento mattutino. Aggiungilo alla schermata di benvenuto sopra il pulsante Get Started.

Usa questo riferimento come ispirazione.
Mantieni il mio layout e i miei contenuti, ma:
- Riprendi le forme e le ombre dei pulsanti
- Riprendi il raggio degli angoli e lo stile dei bordi delle card
- Applica un gradiente morbido simile solo all'header in alto
Non copiare i colori esatti, solo la struttura e l'atmosfera.

Da questo screenshot, estrai regole di design per:
- Ruoli dei colori
- Dimensioni e pesi dei font
- Raggio degli angoli e ombre
- Spaziatura tra sezioni e card
Spiega le regole, poi applica uno stile simile usando i colori attuali del mio brand.

Cambia lo stile di sfondo di questo elemento in:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Mantieni invariati tutti gli altri stili.

Sostituisci le icone generiche con altre più significative:
- Usa icone che corrispondano chiaramente a ogni voce di navigazione e azione principale
- Mantieni coerenti la dimensione e lo spessore del tratto delle icone
- Allinea con cura le icone alle etichette nella navigazione, negli elenchi e nei pulsanti

Aggiorna tutti i pulsanti di call to action primari:
- Usa l'icona "sparkles" a sinistra dell'etichetta
- Mantieni l'icona piccola e il padding uniforme
- Non aggiungere icone ai pulsanti secondari o distruttivi

Identifica i principali tipi di pagina in questa app (landing, dashboard, elenco, dettaglio, form, impostazioni).
Per ogni tipo:
- Proponi una struttura di layout coerente
- Suggerisci quali componenti esistenti riutilizzare
Applica questi layout a tutte le pagine dello stesso tipo, senza cambiare i contenuti.

Migliora la gerarchia visiva e lo spazio bianco in questa pagina:
- Fai risaltare chiaramente il titolo della pagina rispetto al resto del testo
- Usa intestazioni di sezione coerenti per raggruppare i contenuti
- Aggiungi più padding sopra e sotto ogni sezione
- Aumenta lo spazio tra le righe di card
Evita di aggiungere nuovi colori o font.

Rendi questo layout responsive:
- Sui telefoni, usa una singola colonna verticale e impila le sezioni
- Sui tablet, usa due colonne per le card dove lo spazio lo consente
- Sui desktop, usa tre o quattro colonne per le card
Mantieni le immagini in proporzione 4:3.
Comprimi la sidebar in un menu in alto sugli schermi più piccoli.
Evita lo scorrimento orizzontale a tutti i breakpoint.

Progetta la homepage come una landing page focalizzata:
- Sezione hero pulita con un titolo breve, una frase di supporto e una call to action primaria
- A seguire tre benefici chiave in card
- Aggiungi una semplice sezione di social proof con loghi
- Mantieni la navigazione minima
Usa il mio sistema esistente di colori e tipografia.

Ristruttura questa dashboard:
- Metti il KPI principale in alto a sinistra in una card ben visibile
- Raggruppa le metriche correlate in una griglia 2x2 di card
- Sposta filtri e controlli dell'intervallo di date in una barra superiore pulita
- Riduci il rumore visivo nei grafici usando colori e stili coerenti

Ripulisci questa vista tabella:
- Aumenta leggermente l'altezza delle righe
- Usa separatori di riga discreti o righe alternate
- Allinea le azioni in una colonna coerente alla fine
- Aggiungi uno stato vuoto chiaro con un messaggio breve e un'azione primaria

Migliora questa pagina di dettaglio:
- Sposta il titolo principale e le azioni primarie in cima alla pagina
- Usa un layout a due colonne con il contenuto principale a sinistra e le informazioni secondarie a destra
- Raggruppa i campi correlati sotto piccole intestazioni
- Rendi le azioni distruttive etichettate chiaramente e visivamente distinte

Riprogetta questo form per renderlo più chiaro:
- Usa un layout a colonna singola
- Raggruppa i campi correlati sotto intestazioni brevi
- Aggiungi etichette chiare e testo di aiuto dove serve
- Mostra messaggi di errore inline sotto ogni campo quando la validazione fallisce
Usa il mio sistema esistente di tipografia e spaziatura.

Ho aggiunto il pacchetto npm framer-motion. Rifattorizza la griglia di card esistente in modo che ogni card si animi al passaggio del mouse usando framer-motion:
- Mantieni il layout e i testi attuali
- Usa i token di colore, il raggio dei bordi e la tipografia esistenti
- Rispetta prefers-reduced-motion e mantieni chiari i contorni di focus da tastiera

Rifattorizza questi componenti per usare classi Tailwind coerenti:
- Sostituisci gli attributi di stile inline con utility Tailwind
- Usa i token di design per colori, spaziatura e tipografia
- Documenta le principali combinazioni di classi per navigazione, card e pulsanti

Ecco il mio componente Layout.js.
Modificalo in modo che:
- L'header resti fisso durante lo scorrimento
- Il contenuto principale abbia una larghezza massima e sia centrato sugli schermi grandi
- Il colore di sfondo usi il token surface del mio sistema di design
Spiega cosa hai cambiato nei commenti.

Rivedi il design di questa app dal punto di vista delle prestazioni:
- Identifica gli elementi visivi o di codice pesanti che potrebbero rallentare il caricamento
- Suggerisci alternative più leggere che mantengano lo stesso aspetto generale
- Proponi punti specifici dove lazy loading o code splitting sarebbero utili

Verifica il contrasto dei colori di questa app:
- Identifica testo o icone con basso contrasto rispetto allo sfondo
- Rafforza il contrasto mantenendo la stessa palette generale
- Assicurati che pulsanti primari e link siano chiaramente distinguibili
Descrivi le principali correzioni applicate.

Migliora la leggibilità del testo:
- Aumenta leggermente la dimensione base del font del corpo
- Aumenta l'interlinea dei paragrafi
- Assicurati che le intestazioni siano chiaramente più grandi del testo del corpo
- Riduci le righe molto lunghe sugli schermi larghi

Migliora l'accessibilità di tastiera e focus:
- Assicurati che tutti gli elementi interattivi siano raggiungibili con Tab
- Aggiungi stili di focus visibili a pulsanti, link e campi dei form
- Correggi eventuali problemi di ordine del focus in questa pagina
Descrivi le modifiche principali che hai fatto.

Regola le animazioni per l'accessibilità:
- Rispetta la preferenza di riduzione del movimento dell'utente
- Rimuovi o semplifica le grandi animazioni continue
- Mantieni solo movimenti brevi e discreti che aiutano la comprensione

Migliora l'accessibilità di etichette e testo alternativo:
- Rendi più descrittive le etichette di pulsanti e link dove serve
- Aggiungi o migliora il testo alternativo delle immagini importanti
- Assicurati che le intestazioni seguano una struttura chiara
Mantieni lo stesso tono e la stessa voce del brand.

Rendi questo layout responsive per mobile, tablet e desktop.
Evita lo scorrimento orizzontale e mantieni le azioni primarie visibili senza scorrimenti eccessivi.