1. Paleta de Cores e Tokens Semânticos
Definidos como tokens semânticos no Tailwind CSS v4, garantindo coerência sem repetição de hexadecimais arbitrários.
Cores Expressivas
Gradientes Funcionais
Gradiente Principal de Energia
Usado em indicadores de progresso, heros, CTA principal e evolução de treino.
Progresso e Conclusão
Transição suave do azul para o ciano e verde, simbolizando metas atingidas.
Esforço e Intensidade (RIR)
Do âmbar ao coral e violeta para registrar séries no limite e esforço máximo.
Superfícies Glassmorphism & Profundidade
Fundo translúcido (72%) com blur de 18px e saturação 140%.
Destinada para barras flutuantes, bottom navigation e modais rápidos.
Superfície elevada com sombra calculada para modos claro e escuro.
Garante legibilidade alta sem poluição visual em formulários e listas densas.
Tokens de Border Radius (Cantos Generosamente Arredondados)
2. Tipografia e Escala de Leitura (Geist)
Tipografia limpa, geométrica e de alto contraste. No modo treino, métricas numéricas ganham peso e escala dominante.
SUPERAÇÃO DIÁRIA
Treino A • Peitoral e Tríceps
Supino Reto com Barra Olímpica
Mantenha a contração constante no topo sem hiperestender os cotovelos. Inspire na descida de 3 segundos e expire com força na subida explosiva.
3. Componentes Fundamentais
Alvos de toque ergonômicos (≥ 44px), micro-interações táteis (`active:scale-[0.97]`) e estados de foco acessíveis.
Botões e Ações
Chips e Pílulas de Estado
Inputs e Controles de Formulário
Banners de Estado (Sucesso, Atenção e Offline)
Carga de 34 kg registrada na nuvem. Seu novo recorde pessoal foi atualizado.
Você treinou Peitoral há menos de 48h. Considere monitorar a escala de fadiga (RIR).
Suas séries serão armazenadas localmente no dispositivo e sincronizadas ao reconectar.
Skeletons & Shimmer (Carregamento Assíncrono)
Placeholders com animação fluida para simular carregamento futuro de dados sem layout shifts.
4. Experiência de Treino & Domínio FORÇA
Componentes centrais que o usuário utilizará diretamente durante a execução dos exercícios na academia.
Peito, Ombros e Tríceps
Foco em Hipertrofia & Força Estrita
Supino Inclinado com Halteres
Peitoral Superior e Tríceps
Desenvolvimento Militar com Halteres
- Posicione o banco em 75° a 80° para conforto articular.
- Pés firmes no chão gerando leg drive moderado.
- Desça os halteres até a linha das orelhas mantendo cotovelos a 45°.