Tokens de cor
Nunca use cores fixas. Cada token troca de valor automaticamente no tema escuro.
- backgroundFundo da aplicação
- cardCartões e superfícies
- brandAção primária
- brandDestaque e progresso
- paperFundo suave
- surface-coolFundo tonalizado
- botanicalSucesso suave
- periwinkleInformação suave
- foregroundTexto principal
- muted-foregroundTexto secundário
- successEstado de sucesso
- dangerEstado de erro
Tipografia
Escala em rem: respeita o tamanho de fonte definido pela usuária no sistema.
Cuide de você hoje
text-display · 1.75rem · Título de tela
Cuide de você hoje
text-headline · 1.375rem · Título de seção
Cuide de você hoje
text-title · 1.125rem · Título de cartão
Cuide de você hoje
text-body · 0.9375rem · Texto corrido
Cuide de você hoje
text-small · 0.8125rem · Apoio e legendas longas
Cuide de você hoje
text-caption · 0.75rem · Metadados
Cuide de você hoje
text-eyebrow · 0.6875rem · Rótulos em caixa alta
Componentes
Display · Headline · Title · Body · Caption · Eyebrow. Todos aceitam a propaspara manter a hierarquia semântica de headings.
Botões
AppButton — variantes primary, solid, soft, outline e ghost; tamanhos sm, md, lg e icon (mínimo 44px).
Cartões
AppCard — glass, solid, tinted e hero. Use interactive quando o cartão for clicável.
Glass
Conteúdo sobre fundos coloridos.
Solid
Listas e conteúdo denso.
Tinted
Destaques leves e insights.
Hero
Fase folicular · Dia 09
Formulários
AppInput e AppSelect trazem label sempre associada, hint com aria-describedby e erro com role=alert.
Busque por chás, exercícios ou sintomas.
Ajusta as recomendações da IA.
Escolha uma intensidade para continuar.
Feedback
AppModal para decisões e appToast para confirmações passageiras.
Estados padronizados
Loading, vazio, erro e sucesso com AppState; esqueletos com AppSkeleton.
Carregando sua rotina
A IA está montando o dia.
Nenhum registro ainda
Comece anotando como você se sente hoje.
Não foi possível carregar
Verifique sua conexão e tente novamente.
Tudo em dia
Todas as missões foram concluídas.
Exemplos de layout
Padrões recorrentes do app montados apenas com as primitivas.
Painel de indicador
7h30
Sono
1,6L
Água
Calma
Humor
Lista de conteúdo
Destaque com ação
Precisa de alívio agora?
Técnicas guiadas de 2 a 10 minutos com temporizador.
Voltar para o início do Femina AI