ver exemplos ao vivo

Dois exemplos prontos para você ver a identidade funcionando — um app avulso e um painel completo.

os exemplos abrem do servidor — suba DEMO-modelo-painel.html e DEMO-modelo-app.html junto com os outros arquivos.

hierarquia — do mais forte ao mais discreto

Para duas ações verdes lado a lado (ex.: downloads): primary + primary-soft.

azul (secondary) — use só em contexto institucional

exemplos certos

O ícone reforça a ação que o texto já diz. Os dois juntos comunicam mais rápido.

quando NÃO usar ícone

• × Não force um ícone quando a ação não tem um símbolo óbvio (ex.: "ver detalhes", "continuar"). Texto sozinho é melhor que ícone confuso.
• × Nunca use ícone decorativo que não tem relação com a ação. Ícone é função, não enfeite.
• × Não misture: ou todos os botões de um grupo têm ícone, ou nenhum.

ícones disponíveis (outline)

Estilo linha fina. Use dentro do botão como <svg viewBox="0 0 24 24">…</svg> antes do texto. O CSS já cuida do tamanho e alinhamento.

formulário · select, textarea, validação

seleção · checkbox, radio, switch

navegação · tabs e navbar

painelvendasconfig

feedback · alertas

dados · tabela e avatar

estado · progress, spinner, skeleton, tooltip

sobreposição · modal

card de métrica

Rótulo mono pequeno em cima, número grande em destaque, variação em verde. Topo verde de assinatura.

formulário (label acima, ação principal embaixo)

Label sempre acima do campo. Campos separados por --aj-3. Uma ação principal (verde), à direita.

listagem

Avatar + info à esquerda, status à direita. Linhas separadas por borda sutil, não por espaço grande.

botões — diga a ação, não "ok"

erros — diga o que houve e como resolver

estado vazio — convide à ação

Tela vazia não é erro — é oportunidade. Explique e ofereça a ação principal.

princípios de escrita

• // Botões e rótulos em minúsculas; títulos podem ter inicial maiúscula.
• // Fale com o usuário (você), não sobre ele.
• // Evite jargão técnico onde o usuário não precisa dele.
• // Curto vence longo. Corte palavras que não mudam o sentido.

estrutura

A casca é a classe .aj-shell com sidebar (.aj-side) + área principal (.aj-main). As categorias usam .aj-navgroup (accordion) e cada ferramenta é um .aj-navitem. O JS cuida de abrir/fechar e da gaveta mobile sozinho.

regras

• // Agrupe as ferramentas por categoria macro (Financeiro, Logística, Marketing…). Use ícone que descreva cada uma.
• // A ferramenta aberta fica marcada com .is-active — a categoria dela abre sozinha.
• // O título da ferramenta atual aparece na topbar. No mobile, o hambúrguer abre o menu.

regras que o css já aplica sozinho (≤640px)

• // Botões e campos ocupam largura total e ganham altura mínima de 48px.
• // Toda área tocável tem ≥44px (botões, abas, checkboxes, links).
• // Navbar quebra em linhas; tabelas largas rolam na horizontal.
• // Cards e modais ocupam a largura disponível.

o que você deve fazer ao montar a tela

• // Sempre incluir <meta name="viewport" content="width=device-width, initial-scale=1">.
• // Conteúdo dentro de um container com max-width e padding lateral.
• // Botões lado a lado SEMPRE dentro de .aj-btn-row (ou .aj-modal__foot no modal). Nunca use um <div> com flex solto — eles não empilham e vazam da tela no mobile.
• // Nunca dar width fixo em px num container que precisa caber no celular — use max-width + largura fluida.
• // Grids: use grid-template-columns:repeat(auto-fit,minmax(...)) em vez de colunas fixas.
• // Imagens com max-width:100%.
• // Testar em 360px de largura antes de publicar.

breakpoint

Um só, simples: 640px. Acima, layout de desktop; abaixo, tudo empilha. Não invente vários breakpoints — um ponto de quebra cobre quase tudo e mantém a manutenção fácil.

1. subir os arquivos (primeira vez)

• // Na Hostinger, aponte o subdomínio ui.ajudaecom.com.br para uma pasta (ex.: public_html/ui).
• // Suba na raiz dessa pasta: ajuda-ds.css, ajuda-ds.js e a central como index.html.
• // Confirme abrindo https://ui.ajudaecom.com.br/ajuda-ds.css no navegador — tem que aparecer o código.

2. configurar o cache (importante!)

Sem isso, o navegador guarda a versão antiga e a atualização demora a aparecer. Crie um arquivo .htaccess na mesma pasta com cache curto e revalidação:

<FilesMatch "\.(css|js)$">
  Header set Cache-Control "public, max-age=300, must-revalidate"
</FilesMatch>

max-age=300 = o navegador revalida a cada 5 minutos. Para mudança imediata em todos, veja o passo 3.

3. atualizar o design (depois)

• // Peça a mudança ao Claude (ex.: "deixe o botão primário mais arredondado"). Ele te devolve o ajuda-ds.css novo.
• // Substitua o arquivo no servidor (mesmo nome, mesma pasta). Só isso.
• // Todos os apps que puxam de ui.ajudaecom.com.br mostram a mudança — sem tocar em nenhum app.
• // Se usar Cloudflare no domínio, dê um "Purge Cache" após subir, e a mudança é instantânea.