Marca & voz.
Agência Pilaris é gestão de tráfego pago e presença digital pra negócio local da Grande Florianópolis. A marca existe pra um único propósito: traduzir investimento em anúncio em cliente entrando pela porta. Tudo neste handbook serve isso.
Posicionamento
“Performance que negócio local sente no caixa.”
Direto. Sem jargão. Sem promessa vazia. O dono de chaveiro, construtora ou salão precisa entender o que a gente faz em cinco segundos — e por que isso é diferente da agência da esquina.
Princípios
Tom de voz
Coleguismo de sócio, não consultor. Frase curta. Verbo no presente. Número específico antes de adjetivo. Português do Brasil, sem traduzir o que já é claro em inglês quando o termo é técnico do dia a dia (CPC, CTR, CPL, ROAS).
Falamos assim
- “Sua campanha gerou 38 ligações em outubro. Custo médio: R$ 14,20.”
- “Esse criativo não tá performando. Vamos cortar e testar dois novos.”
- “GBP otimizado vale mais que post bonito de Instagram pra chaveiro.”
- “Não vendemos pacote fechado. Investimento parte de R$ 1.200/mês.”
Nunca falamos assim
- “Vamos transformar seu negócio com soluções inovadoras.”
- “Alavanque suas vendas com nossa metodologia exclusiva.”
- “Leve sua empresa para o próximo nível.”
- “Potencialize seus resultados de forma assertiva.”
Lockups da logo
Horizontal · símbolo + wordmark
Símbolo · monograma AP
Variantes mono & stamp
Logo com gradient é DNA da marca. Em UI (botões, tags, headers de dashboard) usamos a versão flat de laranja sólido pra respeitar "nada de gradiente em background". O stamp circular é exclusivo de avatar de rede social — nunca dentro de layout de página.
Cor & luz.
Laranja é cor de ação, nunca de fundo de página. Branco puro é o estado de repouso da marca — sem cream, sem bege, neutro frio. Acentos só entram quando precisam separar categoria.
Laranja AP — âncora #FB8500
Escala perceptualmente uniforme em OKLCH. Chroma cai nos extremos. Use 500 como cor de ação principal. 600/700 só pra estado pressed ou sobre superfícies claras.
Clay — calor sem competir com primária
Cor de apoio em peças longas (proposta, deck, brandbook). Quando uma seção precisa de calor mas não pode roubar atenção do CTA, use clay.
Petrol · Mint · Indigo · Gold
Cada cor tem um papel semântico em peças longas: identificar serviço, segmentar gráfico, marcar episódio. Fora desses contextos, usar só laranja AP.
Status & feedback
Background, surface, border, text
Tipografia editorial.
Três famílias, papéis distintos. Serifa só pra display em itálico. Sans pra UI e leitura. Mono pra dado, métrica e label de seção. Nunca misturar pesos sem motivo.
Famílias
| Família | Pesos | Quando usar | Exemplo |
|---|---|---|---|
| Source Serif 4 | 400 · 600 · italic | Display, título de capítulo, citação. Sempre itálico em hero. | Cor & luz. |
| Inter | 400 · 500 · 600 · 700 | Corpo, UI, formulário, navegação, parágrafo longo. | Texto de leitura confortável. |
| JetBrains Mono | 400 · 500 · 600 | Métrica, eyebrow label, código, tag, número de capítulo. | CPL · R$ 14,20 |
Escala
Display de marca
local sente no caixa.
Espaço & forma.
Ritmo vertical em base 4. Toda peça respira em múltiplo. Raio contido — forma redonda só em tag. Sombra existe pra separar camada, nunca pra decorar.
Escala de espaçamento
Raio
Pill nunca em botão. Pill é exclusivo de tag/badge.
Sombra
Hairline · separação sutil entre camadas adjacentes.
Card elevado · 4-12px blur · exclusivo de overlay/menu.
Modal · 8-16px blur · limite máximo do sistema.
Nunca aplicar sombra colorida ou glow. Blur acima de 16px é proibido. Sombra escura sobre dark, sombra escura suave sobre light — nunca branca.
Componentes vivos.
Biblioteca mínima. Cada componente faz uma coisa, com hierarquia clara. Variantes são exceção, não a regra.
Botão
| Variante | Quando usar |
|---|---|
| Primário | Ação principal da tela. Um por vez. |
| Secundário ghost | Ação alternativa de igual peso semântico (ex: ver mais detalhes). |
| Link | Navegação inline em texto corrido. |
Card de métrica
Callout
Laranja é cor de ação. Nunca usar como background de página inteira. CTA, número, palavra-destaque — só.
Tag & badge
Combo · seção institucional
Setup completo de campanha de busca, gestão diária de lance e relatório semanal com leads, ligações e custo. Indicado pra negócio local com ticket acima de R$ 300.
Movimento discreto.
Animação no AP serve pra confirmar interação, nunca pra entreter. Easing único. Três durações. Nada de bounce, spring exagerado ou parallax.
Easing & durações
| Token | Valor | Uso |
|---|---|---|
| --ease-out | cubic-bezier(0.2, 0.8, 0.2, 1) | Padrão de saída para qualquer transição. |
| --d-micro | 150ms | Hover de botão, change de cor, foco de input. |
| --d-ui | 250ms | Abrir menu, expandir card, fade in de seção. |
| --d-page | 400ms | Transição de página, modal, drawer. |
Demos
Loop suave em laranja AP. Uso pontual em status de "ao vivo" ou "ativo".
150ms · cor sobe um stop · sem deslocamento agressivo.
Nada de animação ao scroll com parallax. Nada de bounce. Nada de fade lento acima de 400ms. Reduce-motion sempre respeitado via prefers-reduced-motion.