Pular para o conteúdo
- Um primário por tela. Um único
AppButton sólido primário para a ação principal (ex.: “Participar”); as demais
ações em outline, ghost ou link.
- Prefira
lg no primário. A primária da idPlugger (#EC2474) com texto branco dá 4,14:1, abaixo de 4,5:1 para
texto normal; o tamanho lg (16px semibold) melhora a leitura. Outras marcas devem escolher um par com 4,5:1.
- Títulos com
Typography h1–h5 (VAG Rundschrift D); texto corrido em body (Poppins 400).
- Use as cores de texto dos tokens semânticos (
--color-foreground*), não hex: elas mudam com a marca e o modo.
Container (largura limitada por breakpoint) para o conteúdo da página; fluid para faixas de ponta a ponta.Grid com columns de 1 a 4 e gap sm, md ou lg para listas de cards e produtos.
- Sucesso e erro de envio com
AppToast; confirmações importantes e textos longos (regulamento) com AppModal.
- Erros de formulário no próprio campo (
error do AppInput), não só no toast.
- Troque a marca pelo contrato
--color-brand-* (no :root ou num elemento com data-brand) ou por um preset.
Hover, pressionado e foco derivam sozinhos.
- Para ajustar só um componente, sobrescreva o token dele (
--button-*, --input-*…), não as escalas de cor.
