Fundamentos de diseño y estructura

Crea un sistema de color para esta app:
- 1 color primario de marca
- 1 color secundario
- 1 color de acento para destacados
- 4 grises neutros para fondos, superficies y bordes
Asigna los colores a roles como primario, superficie, borde, éxito, advertencia y error.
Asegura que el texto sobre los fondos cumpla los niveles de contraste de accesibilidad.
Aplica este sistema en toda la app y reemplaza los colores sueltos.

Usa esta paleta y asigna cada hex a un rol:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Define cuáles son los roles primario, secundario, de acento y neutros.
Reemplaza los colores fijos en el código con tokens o clases de Tailwind que sigan estos roles.

Aplica los colores de esta imagen a mi app.
Asigna cada color a un rol como primario, fondo, primer plano y acento.
Reemplaza los colores existentes en toda la app para que coincidan.

Importa la fuente "Raleway" desde Google Fonts.
Úsala para los títulos de página y los encabezados de sección.
Mantén la fuente de cuerpo actual para los párrafos.
Actualiza los estilos en toda la app para seguir esta regla.

Añade una imagen hero de ancho completo a la página de inicio que combine con la paleta de colores actual.
Usa una imagen de marcador de posición que sugiera un panel de analítica moderno.

Crea un video corto de onboarding para mi app de fitness que muestre una rutina simple de ejercicio matutino. Añádelo a la pantalla de bienvenida encima del botón Get Started.

Usa esta referencia como inspiración.
Mantén mi estructura y contenido, pero:
- Iguala las formas y sombras de los botones
- Iguala el radio de esquina y el estilo de borde de las tarjetas
- Aplica un degradado suave similar solo al encabezado superior
No copies los colores exactos, solo la estructura y la sensación.

A partir de esta captura, extrae reglas de diseño para:
- Roles de color
- Tamaños y pesos de fuente
- Radio de esquina y sombras
- Espaciado entre secciones y tarjetas
Explica las reglas y luego aplica un estilo similar usando mis colores de marca actuales.

Cambia el estilo de fondo de este elemento a:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Mantén todos los demás estilos igual.

Reemplaza los iconos genéricos por otros más significativos:
- Usa iconos que coincidan claramente con cada elemento de navegación y acción principal
- Mantén el tamaño de icono y el grosor de trazo consistentes
- Alinea los iconos con las etiquetas en la navegación, las listas y los botones

Actualiza todos los botones principales de llamada a la acción:
- Usa el icono "sparkles" a la izquierda de la etiqueta
- Mantén el tamaño de icono pequeño y el relleno uniforme
- No añadas iconos a los botones secundarios o destructivos

Identifica los tipos de página principales de esta app (aterrizaje, panel, lista, detalle, formulario, configuración).
Para cada tipo:
- Propón una estructura de diseño consistente
- Sugiere qué componentes existentes reutilizar
Aplica esas estructuras a todas las páginas del mismo tipo, sin cambiar el contenido.

Mejora la jerarquía visual y el espacio en blanco en esta página:
- Haz que el título de la página destaque claramente sobre el resto del texto
- Usa encabezados de sección consistentes para agrupar el contenido
- Añade más relleno superior e inferior alrededor de cada sección
- Aumenta el espacio entre filas de tarjetas
Evita añadir nuevos colores o fuentes.

Haz esta estructura responsiva:
- En teléfonos, usa una sola columna vertical y apila las secciones
- En tabletas, usa dos columnas para las tarjetas donde el espacio lo permita
- En ordenadores, usa tres o cuatro columnas para las tarjetas
Mantén las imágenes en una proporción 4:3.
Colapsa la barra lateral en un menú superior en pantallas pequeñas.
Evita el desplazamiento horizontal en todos los puntos de quiebre.

Diseña la página de inicio como una página de aterrizaje enfocada:
- Sección hero limpia con un titular corto, una frase de apoyo y una llamada a la acción principal
- A continuación, tres beneficios clave en tarjetas
- Añade una sección simple de prueba social con logos
- Mantén la navegación mínima
Usa mi sistema de color y tipografía existente.

Reestructura este panel:
- Coloca el KPI principal arriba a la izquierda en una tarjeta destacada
- Agrupa las métricas relacionadas en una cuadrícula de tarjetas de 2x2
- Mueve los filtros y los controles de rango de fechas a una barra superior limpia
- Reduce el ruido visual de los gráficos usando colores y estilos consistentes

Limpia esta vista de tabla:
- Aumenta ligeramente la altura de las filas
- Usa separadores de fila sutiles o filas alternadas
- Alinea las acciones en una columna consistente al final
- Añade un estado vacío claro con un mensaje corto y una acción principal

Mejora esta página de detalle:
- Mueve el título principal y las acciones principales a la parte superior de la página
- Usa una estructura de dos columnas con el contenido principal a la izquierda y la información secundaria a la derecha
- Agrupa los campos relacionados bajo encabezados pequeños
- Haz que las acciones destructivas estén claramente etiquetadas y sean visualmente distintas

Rediseña este formulario para mayor claridad:
- Usa una estructura de una sola columna
- Agrupa los campos relacionados bajo encabezados cortos
- Añade etiquetas claras y texto de ayuda donde sea necesario
- Muestra mensajes de error en línea bajo cada campo cuando falle la validación
Usa mi sistema de tipografía y espaciado existente.

Añadí el paquete npm framer-motion. Refactoriza la cuadrícula de tarjetas existente para que cada tarjeta se anime al pasar el cursor usando framer-motion:
- Mantén la estructura y los textos actuales
- Usa los tokens de color, el radio de borde y la tipografía existentes
- Respeta prefers-reduced-motion y mantén claros los contornos de foco del teclado

Refactoriza estos componentes para usar clases de Tailwind consistentes:
- Reemplaza los atributos de estilo en línea con utilidades de Tailwind
- Usa los tokens de diseño para colores, espaciado y tipografía
- Documenta las combinaciones de clases principales para navegación, tarjetas y botones

Aquí está mi componente Layout.js.
Ajústalo para que:
- El encabezado sea fijo al hacer scroll
- El contenido principal tenga un ancho máximo y esté centrado en pantallas grandes
- El color de fondo use el token de superficie de mi sistema de diseño
Explica lo que cambiaste en comentarios.

Revisa el diseño de esta app desde una perspectiva de rendimiento:
- Identifica elementos visuales o de código pesados que puedan ralentizar la carga
- Sugiere alternativas más ligeras que mantengan el mismo aspecto general
- Propón lugares específicos donde ayudaría la carga diferida o la división de código

Audita esta app en cuanto a contraste de color:
- Identifica texto o iconos con bajo contraste respecto a sus fondos
- Refuerza el contraste manteniendo la misma paleta general
- Asegura que los botones primarios y los enlaces se distingan claramente
Describe las correcciones principales que aplicaste.

Mejora la legibilidad del texto:
- Aumenta ligeramente el tamaño base de la fuente de cuerpo
- Aumenta la altura de línea de los párrafos
- Asegura que los encabezados sean claramente más grandes que el texto de cuerpo
- Reduce las longitudes de línea muy largas en pantallas anchas

Mejora la accesibilidad de teclado y foco:
- Asegura que todos los elementos interactivos se puedan alcanzar con Tab
- Añade estilos de foco visibles a botones, enlaces y campos de formulario
- Corrige cualquier problema de orden de foco en esta página
Describe cualquier cambio importante que hayas hecho.

Ajusta las animaciones para accesibilidad:
- Respeta la preferencia de movimiento reducido del usuario
- Elimina o simplifica las animaciones continuas grandes
- Mantén solo movimiento corto y sutil que ayude a la comprensión

Mejora la accesibilidad de las etiquetas y el texto alternativo:
- Haz que las etiquetas de botones y enlaces sean más descriptivas donde sea necesario
- Añade o mejora el texto alternativo de las imágenes importantes
- Asegura que los encabezados sigan una estructura clara
Mantén el mismo tono y voz de marca.

Haz esta estructura responsiva para móvil, tableta y ordenador.
Evita el desplazamiento horizontal y mantén las acciones principales visibles sin desplazamiento excesivo.