# Achadinhos — Design System

**Achadinhos** encontra as melhores ofertas da internet e manda só as que valem a pena para grupos de WhatsApp, com link de afiliado. Começa pelo Mercado Livre. Várias vezes por dia percorre as páginas de ofertas e analisa cada produto como um caçador de promoções experiente: confere o histórico de preços (para não cair em "De" inflado), a nota dos compradores, quantas unidades já vendeu, se é loja oficial, se tem frete grátis e se é relâmpago. Cada oferta recebe uma **nota de 0 a 100**; só a nata da nata passa. Explica por que escolheu, não repete oferta (a menos que o preço caia mais) e evita parecidos na mesma leva. Quem está no grupo recebe **poucas mensagens, todas boas**.

**Fontes deste sistema:** briefing do produto (acima), 20 referências visuais de logos enviadas pelo usuário (`uploads/`), decisões do usuário: símbolo evocando o caçador/lupa, grafia "Achadinhos", temas claro e escuro, escopo = painel do operador, tom = "amigo que entende de promoção". Processo da logo documentado em `Logo Achadinhos — Conceitos.dc.html` (direção escolhida: 2C "Nata II").

## Índice

- `styles.css` — entrada única: fontes, tokens, base e classes dos componentes
- `tokens/cores.css` · `tokens/tipografia.css` · `tokens/espaco.css` — variáveis CSS (claro + `[data-tema="escuro"]`)
- `fonts/fonts.css` — Sora, Albert Sans, JetBrains Mono (Google Fonts)
- `estilos/base.css` — body, títulos, links, utilitários (`.display`, `.rotulo`, `.preco`, `.pagina`)
- `estilos/componentes.css` — classes `ach-*` usadas pelos componentes
- `assets/logo/` — símbolo, horizontal, empilhado, logotipo (cor / cor fundo escuro / preto / branco), favicon, app-icon
- `components/` — 16 componentes React: **base** (Icone, Botao, BotaoIcone, Selo), **formularios** (Campo, Seletor, Caixa, Alternador), **exibicao** (Cartao, Abas, Tabela, NotaOferta, CartaoOferta), **retorno** (Aviso, Dica, Dialogo)
- `guidelines/` — cards de fundação (cores, tipo, espaço, marca)
- `ui_kits/painel/` — Painel do operador (fila, detalhe, grupos, regras)
- `SKILL.md` — para usar este sistema no Claude Code

## Marca

**Símbolo "Nata":** lupa sólida — lente laranja com um brilho de quatro pontas recortado em espaço negativo ("a nata da nata"), cabo verde-mata chanfrado a 45°. Lê como lupa em 16px e em uma cor.
**Logotipo:** "Achadinhos" desenhado letra a letra (não é fonte): monolinha de traço 36 em corpo 256, altura-x 130, arcos de círculo com raio 65 (o mesmo do símbolo), terminais redondos, A em ponta com barra. O pingo do **i** é o brilho da lente.
**Versões:** símbolo, horizontal (padrão), empilhado (quadrados), logotipo só. Cada uma em colorida (fundo claro), colorida (fundo escuro: cabo verde-300 e logotipo branco), preta e branca. Favicon tem corte próprio (lente e brilho maiores, cabo mais grosso). Área de proteção = ¼ da altura do símbolo. Mínimos: símbolo 20px, horizontal 110px, empilhado 64px. Não: gradiente, rotação, esticar, inverter as cores das peças, fonte no lugar do logotipo.

## CONTENT FUNDAMENTALS

- **Voz:** o amigo que entende de promoção. Direto, confiante, sem gritaria de varejão. Fala como quem já caiu em desconto falso e aprendeu.
- **Pessoa:** o produto fala em 1ª pessoa quando age ("Não consegui ler a página… tento de novo em 10 min") e em "você" com o operador. Nos grupos, fala com o leitor em "você".
- **Caixa:** frases em caixa de sentença. Rótulos de interface curtos (`.rotulo`) em caixa alta só para categorias de dado ("PREÇO", "NOTA"). Títulos nunca em caixa alta.
- **Números:** dinheiro sempre `R$ 1.234,56`, datas `dd/mm/aaaa`, horas `14h02`, milhares com ponto. Preço, nota, contagem e data em **mono tabular**.
- **Vocabulário da marca:** *achado*, *nata* (≥85), *passou no filtro*, *"De" inflado*, *varredura*, *leva*, *grupo*. Evitar: "imperdível", "corre", "última chance", exclamações em série.
- **Explicar sempre:** toda oferta vem com "por que escolhemos" em frases curtas e verificáveis ("Menor preço desde julho", "Loja oficial com 4,8 em 4.200 vendas").
- **Emoji:** nunca na interface. Nas mensagens de WhatsApp, no máximo dois por mensagem e sempre os mesmos: 🔎 (abertura), ✅ (critérios), 👉 (link).
- **Exemplos:** "Poucas mensagens, todas boas." · "Passa direto. Pode enviar sem revisar." · "O preço 'De' subiu 40% na semana passada. Desconto provavelmente inflado." · "Nada por aqui. A próxima varredura é às 15h00."

## VISUAL FOUNDATIONS

- **Psicologia das cores:** **Laranja Achado** (#FF5A1F) = impulso, oferta, apetite e ação — é a cor do botão principal, da nota Nata e da lente. **Verde Mata** (#0E3B36) = confiança, dinheiro, curadoria — âncora da marca, cabo da lupa, logotipo, critérios atendidos. **Areia** (#F5F2EC) como fundo quente do tema claro, para não parecer loja. Nunca vermelho de "liquidação".
- **Temas:** claro é o padrão; escuro via `[data-tema="escuro"]` no `html` — verde-carvão profundo (#0B1413), laranja um tom mais claro (#FF6A33), marca vira verde-300 (#7FB9A8). Só aliases mudam; os tokens base não.
- **Tipografia:** Sora (display/títulos, 600–700, tracking −2 a −3%), Albert Sans (texto, 15px base), JetBrains Mono (números, tabular). O logotipo é desenho, não fonte.
- **Espaço:** base 4px. 16 entre campos, 20 dentro de cartões, 24–32 entre blocos, 48 de margem de página.
- **Forma:** cartões 20px, controles 10px, botões e selos em pílula, diálogo 28px. Nada quadrado, nada totalmente redondo em superfícies.
- **Superfícies e bordas:** cartões brancos com borda 1px `--borda` e `--sombra-1` quase invisível; sem cartões aninhados; listas dentro de cartões coladas na borda (`preenchido={false}`).
- **Sombras:** 3 níveis, muito leves; `--sombra-3` só em diálogos.
- **Fundos:** cor chapada. Sem gradientes, texturas, ilustrações. A imagem é a do produto.
- **Movimento:** 120–320ms com `cubic-bezier(0.2, 0, 0, 1)`; entrada de cartões com `ach-surgir` (6px para cima + fade). Nada quica.
- **Hover:** botão primário escurece um tom; secundário/fantasma ganham fundo `--superficie-3`; linhas de tabela ganham `--superficie-2`; cartão de oferta sobe para `--sombra-2`.
- **Press:** `scale(0.98)` + tom mais escuro. **Foco:** anel laranja a 35% (`--anel-foco`), sem outline.
- **Transparência/blur:** só na sobreposição do diálogo (55% carvão). Sem glassmorphism.
- **Layout:** painel com barra lateral fixa de 236px; conteúdo até 1200px; grades que colapsam em 1100px e 820px.
- **Nota da oferta:** anel cônico; a cor vem da faixa (Nata laranja ≥85, Boa verde ≥70, Fraca cinza). Nunca recolorir à mão.
- **Imagens de produto:** quadradas, 96px na fila, 56px compactas, raio 10px, fundo `--superficie-3` quando não há imagem.

## ICONOGRAPHY

- Conjunto **Lucide** (traço 2px, cantos redondos), carregado do CDN via o componente `Icone` (máscara CSS, herda `currentColor`). Sem fonte de ícones própria, sem emoji na interface, sem SVG desenhado à mão.
- Tamanhos: 12 dentro de selos, 14 em botões pequenos, 16–18 em botões e navegação, 20–28 em estados vazios.
- Vocabulário fixo: search (varredura), flame (relâmpago), truck (frete grátis), badge-check (loja oficial), star (avaliação), trending-down (preço caiu), history (90 dias), send (enviar), message-circle (grupos), settings (regras), layout-grid (fila), sparkles (nata), triangle-alert ("De" inflado), package (sem imagem).
- O brilho de quatro pontas do símbolo é o único glifo próprio da marca; usá-lo só como marca (favicon, pingo do i), não como ícone de interface.

## Intentional additions

- `Icone` — wrapper do Lucide para os ícones herdarem cor sem SVG inline.
- `NotaOferta` e `CartaoOferta` — componentes do domínio (a nota e a oferta são o produto).

## Caveats

- Fontes vêm do Google Fonts (sem arquivos locais). Para uso offline, baixar Sora, Albert Sans e JetBrains Mono e trocar `fonts/fonts.css` por `@font-face`.
- Ícones vêm do CDN jsDelivr (lucide-static). Para offline, copiar os SVGs usados para `assets/icones/`.