Fundamentos de design e layout

Crie um sistema de cores para esta aplicação:
- 1 cor primária da marca
- 1 cor secundária
- 1 cor de destaque para realces
- 4 cinzas neutros para fundos, superfícies e bordas
Mapeie as cores para papéis como primária, superfície, borda, sucesso, aviso e erro.
Garanta que o texto sobre os fundos atenda aos níveis de contraste de acessibilidade.
Aplique este sistema em toda a aplicação e substitua cores avulsas.

Use esta paleta e atribua um papel a cada hexadecimal:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Defina quais são os papéis primário, secundário, de destaque e neutros.
Substitua cores fixas no código por tokens ou classes Tailwind que sigam esses papéis.

Aplique as cores desta imagem à minha aplicação.
Mapeie cada cor para um papel como primária, fundo, primeiro plano e destaque.
Substitua as cores existentes em toda a aplicação para corresponder.

Importe a fonte "Raleway" do Google Fonts.
Use-a para títulos de página e títulos de seção.
Mantenha a fonte atual do corpo para os parágrafos.
Atualize os estilos em toda a aplicação para seguir esta regra.

Adicione uma imagem de destaque em largura total na página inicial que combine com a paleta de cores atual.
Use uma imagem de exemplo que sugira um painel de análise moderno.

Crie um vídeo curto de onboarding para meu app de fitness mostrando uma rotina simples de treino matinal. Adicione-o à tela de boas-vindas, acima do botão Get Started.

Use esta referência como inspiração.
Mantenha meu layout e conteúdo, mas:
- Reproduza os formatos e sombras dos botões
- Reproduza o raio de canto e o estilo de borda dos cards
- Aplique um gradiente suave semelhante apenas no cabeçalho superior
Não copie as cores exatas, apenas a estrutura e a sensação.

A partir desta captura de tela, extraia regras de design para:
- Papéis de cores
- Tamanhos e pesos de fonte
- Raio de canto e sombras
- Espaçamento entre seções e cards
Explique as regras e depois aplique um estilo semelhante usando as cores atuais da minha marca.

Altere o estilo de fundo deste elemento para:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Mantenha todos os outros estilos iguais.

Substitua ícones genéricos por outros mais significativos:
- Use ícones que correspondam claramente a cada item de navegação e ação principal
- Mantenha o tamanho dos ícones e a espessura do traço consistentes
- Alinhe os ícones com os rótulos na navegação, nas listas e nos botões

Atualize todos os botões primários de chamada para ação:
- Use o ícone "sparkles" à esquerda do rótulo
- Mantenha o ícone pequeno e o preenchimento uniforme
- Não adicione ícones a botões secundários ou destrutivos

Identifique os principais tipos de página desta aplicação (destino, painel, lista, detalhe, formulário, configurações).
Para cada tipo:
- Proponha uma estrutura de layout consistente
- Sugira quais componentes existentes reutilizar
Aplique esses layouts a todas as páginas do mesmo tipo, sem alterar o conteúdo.

Melhore a hierarquia visual e o espaço em branco nesta página:
- Faça o título da página se destacar claramente sobre os demais textos
- Use títulos de seção consistentes para agrupar o conteúdo
- Adicione mais preenchimento superior e inferior em cada seção
- Aumente o espaço entre as linhas de cards
Evite adicionar novas cores ou fontes.

Torne este layout responsivo:
- Em celulares, use uma única coluna vertical e empilhe as seções
- Em tablets, use duas colunas para os cards onde houver espaço
- Em desktops, use três ou quatro colunas para os cards
Mantenha as imagens em proporção 4:3.
Recolha a barra lateral em um menu superior em telas menores.
Evite rolagem horizontal em todos os pontos de quebra.

Projete a página inicial como uma página de destino focada:
- Seção de destaque limpa, com um título curto, uma frase de apoio e uma chamada para ação primária
- Em seguida, três benefícios principais em cards
- Adicione uma seção simples de prova social com logotipos
- Mantenha a navegação mínima
Use meu sistema existente de cores e tipografia.

Reestruture este painel:
- Coloque o KPI principal no canto superior esquerdo em um card de destaque
- Agrupe métricas relacionadas em uma grade 2x2 de cards
- Mova filtros e controles de intervalo de datas para uma barra superior limpa
- Reduza o ruído visual dos gráficos usando cores e estilos consistentes

Organize esta visualização de tabela:
- Aumente levemente a altura das linhas
- Use separadores sutis ou listras alternadas
- Alinhe as ações em uma coluna consistente no final
- Adicione um estado vazio claro com uma mensagem curta e uma ação primária

Melhore esta página de detalhes:
- Mova o título principal e as ações primárias para o topo da página
- Use um layout de duas colunas, com o conteúdo principal à esquerda e informações secundárias à direita
- Agrupe campos relacionados sob títulos pequenos
- Deixe as ações destrutivas claramente rotuladas e visualmente distintas

Redesenhe este formulário para maior clareza:
- Use um layout de coluna única
- Agrupe campos relacionados sob títulos curtos
- Adicione rótulos claros e textos de ajuda onde necessário
- Mostre mensagens de erro em linha abaixo de cada campo quando a validação falhar
Use meu sistema existente de tipografia e espaçamento.

Adicionei o pacote npm framer-motion. Refatore a grade de cards existente para que cada card anime no hover usando framer-motion:
- Mantenha o layout e o texto atuais
- Use os tokens de cor, o raio de borda e a tipografia existentes
- Respeite prefers-reduced-motion e mantenha os contornos de foco do teclado visíveis

Refatore estes componentes para usar classes Tailwind consistentes:
- Substitua atributos de estilo em linha por utilitários do Tailwind
- Use os tokens de design para cores, espaçamento e tipografia
- Documente as principais combinações de classes para navegação, cards e botões

Aqui está meu componente Layout.js.
Ajuste-o para que:
- O cabeçalho fique fixo durante a rolagem
- O conteúdo principal tenha uma largura máxima e fique centralizado em telas grandes
- A cor de fundo use o token de superfície do meu sistema de design
Explique o que você mudou em comentários.

Revise o design desta aplicação sob a perspectiva de desempenho:
- Identifique elementos visuais ou de código pesados que possam atrasar o carregamento
- Sugira alternativas mais leves que mantenham o mesmo visual geral
- Proponha lugares específicos onde carregamento sob demanda ou divisão de código ajudariam

Audite esta aplicação quanto ao contraste de cores:
- Identifique textos ou ícones com baixo contraste em relação aos fundos
- Reforce o contraste mantendo a mesma paleta geral
- Garanta que botões primários e links sejam claramente distinguíveis
Descreva as principais correções aplicadas.

Melhore a legibilidade do texto:
- Aumente levemente o tamanho base da fonte do corpo
- Aumente a altura de linha dos parágrafos
- Garanta que os títulos sejam claramente maiores que o texto do corpo
- Reduza linhas muito longas em telas largas

Melhore a acessibilidade de teclado e foco:
- Garanta que todos os elementos interativos possam ser alcançados com Tab
- Adicione estilos de foco visíveis a botões, links e campos de formulário
- Corrija problemas de ordem de foco nesta página
Descreva as principais mudanças feitas.

Ajuste as animações para acessibilidade:
- Respeite a preferência de movimento reduzido do usuário
- Remova ou simplifique animações grandes e contínuas
- Mantenha apenas movimentos curtos e sutis que ajudem na compreensão

Melhore a acessibilidade de rótulos e textos alternativos:
- Deixe os rótulos de botões e links mais descritivos onde necessário
- Adicione ou melhore o texto alternativo de imagens importantes
- Garanta que os títulos sigam uma estrutura clara
Mantenha o mesmo tom e voz da marca.

Torne este layout responsivo para celular, tablet e desktop.
Evite rolagem horizontal e mantenha as ações primárias visíveis sem rolagem excessiva.