Tudo que a Agência Pilaris publica.
Nasce aqui.
Identidade visual da Agência Pilaris. Regras, componentes, aplicação.
Cor, tipografia, componentes e padrões aplicados em landing page, carrossel, proposta e anúncio. Uma identidade só, em todo lugar.
Identidade visual.
Wordmark
Lockup horizontal: símbolo + Agência Pilaris em Zen Dots.
Lockups
Quatro combinações válidas. P sempre laranja. A muda entre preto e branco.
Favicon
Stamp em 5 tamanhos: 16, 24, 32, 48, 64 px.
Don'ts
Usos proibidos da logo. Sem exceção.
Paleta core.
Core palette
Seis tokens. Um único laranja. Sem variantes.
Neutrals
Escala completa de cinzas. Cada tom tem função fixa, sem cinza arbitrário.
Uso do laranja
Laranja é acento, nunca superfície. Pontua, não preenche.
Uso correto
Botão primário sólido
Eyebrow uppercase espaçado
1 palavra italic em heading
Hover border laranja em card
Uso errado
Fundo laranja inteiro de seção
Texto corrido inteiro em laranja anula a função de acento.
Gradiente laranja · proibido
Tint laranja como background de card
Escala tipográfica.
Font family
Primary: Plus Jakarta Sans (Google Fonts). Única fonte do sistema.
Display scale
Body scale
Weights
Sete pesos disponíveis. Use 800 para display, 700 para H1/H2, 600 para H3, 500 para eyebrow, 400 para body.
Text measure
Limite de 60 caracteres por linha. Mantém ritmo de leitura sem fadiga.
Texto de leitura confortável usa medida de até 60 caracteres por linha. Acima disso o olho cansa, abaixo perde contexto. Plus Jakarta Sans 400 em 16px com line-height 1.6 entrega esse ritmo na maioria dos contextos editoriais da Agência Pilaris.
Base do sistema.
Spacing scale
Múltiplos de 4. Nove tokens, do micro ao macro.
Grid
12 colunas, gutter 24px. Cinco breakpoints.
Radii scale
Elevation
Três níveis. Sombra sutil, pra UI funcional, não decoração.
Vertical rhythm
Baseline grid de 8px. Cada heading e parágrafo alinha em múltiplo de 8.
Heading 32px · line-height 40px
Subheading 24px · line-height 32px
Body 16px · line-height 24px. Cada linha de baseline está marcada na overlay laranja. O ritmo vertical mantém alinhamento previsível em qualquer composição da Agência Pilaris.
Outro parágrafo continua o ritmo. Espaçamentos verticais entre blocos sempre múltiplos de 8 (16, 24, 32, 48, 64).
Motion
Easing único: cubic-bezier(0.2, 0, 0, 1). Sem bounce, sem spring. Scale max 1.02. Translate max 8px. prefers-reduced-motion respeitado.
Iconography
Set: Lucide. Stroke 1.5px. 24px padrão.
Peças do sistema.
Button
Primary · Ghost · Disabled.
Eyebrow
Plus Jakarta 500 · UPPER · letter-spacing 0.16em · cor laranja.
Section header
Eyebrow + heading com 1 italic laranja + parágrafo supporting.
O título carrega peso.
Subtítulo em Plus Jakarta regular, cor muted, com no máximo 60 caracteres por linha.
Card
Default + hover (border laranja).
Título do card
Descrição em Plus Jakarta 400, cor muted. Hover muda border para laranja.
Accordion / FAQ
Posso usar a logo em fundo colorido?
Quando uso o monograma vs o lockup completo?
Posso usar gradient laranja em CTA?
Two-column list
Faça
- Headings em Plus Jakarta 700
- 1 palavra italic laranja por heading
- Body em Plus Jakarta 400
Não faça
- Mais de uma fonte por peça
- Italic em mais de uma palavra
- Capitalize no body
Step
Comece pelo eyebrow
Categoria em maiúscula, espaçada, em laranja.
Heading com peso
Título em Plus Jakarta 700 com 1 palavra em itálico laranja.
Divider
Acima do divisor.
Abaixo do divisor.
Acima do divisor com label.
Abaixo do divisor com label.
Tag / Badge
Table
Header bold, hairline rows, dados mono tabular-nums.
| Cliente | Pacote | Status | CPL |
|---|---|---|---|
| Top Forros | Google Ads PRO II | Ativo | R$ 14,20 |
| Construtora Andrade | Google Ads PRO | Onboarding | — |
| Salão Studio | Exclusive | Ativo | R$ 8,75 |
| Chaveiro 24h | GBP PRO | Pausado | R$ 22,40 |
Form field
Input · textarea · label · placeholder · focus border laranja.
Composições prontas.
Hero section
Tudo que a Agência Pilaris publica. Nasce aqui.
Identidade visual da Agência Pilaris. Regras, componentes, aplicação.
Cor, tipografia, componentes e padrões aplicados em landing page, carrossel, proposta e anúncio. Uma identidade só, em todo lugar.
Section block · Princípios
O que a marca faz.
Direção sobre ornamento
Cada elemento visual tem função. Nada decora por decorar. Hierarquia substitui efeito.
Sistema sobre improviso
Mesmas regras, mesmo padrão, em todo material. Eyebrow, heading, corpo, CTA: a ordem nunca muda.
Laranja é ação
Cor única de marca, usada apenas para CTA, palavra-chave e ponto de atenção. Nunca como fundo.
Card grid · Aplicações
A marca em uso.
10 slides com ritmo
Hierarquia padrão em cada slide. CTA final em laranja.
Conversão direta
Hero, prova, oferta, CTA. Mesmo ritmo do brand book.
Capa institucional
Hero com headline + itálico laranja. Hierarquia consistente.
Diagnóstico padrão
Capa + 6 slides internos + capa final. Métricas em destaque.
Atualização visual
Foto + frase curta + CTA sutil em laranja.
Display banner
Imagem + 1 frase + CTA. Sem ruído visual.
Steps block · Como aplicar
Como aplicar a marca.
Comece pelo eyebrow
Categoria em maiúscula, espaçada, em laranja. Define o assunto antes do título.
Heading com peso
Título em Plus Jakarta Sans 700 com 1 palavra em itálico laranja.
Corpo claro
Plus Jakarta Sans 400, line-height 1.6, máximo 60ch por linha. Frases curtas, parágrafos de 3 linhas.
CTA único
Botão primário laranja, texto preto. Um por seção, no máximo.
Two-column context · Onde usar
Onde usar / onde não.
Onde usar
- Material institucional da Agência Pilaris
- Landing page de cliente com identidade adaptada
- Proposta comercial e diagnóstico
- Carrossel em @agenciapilaris
- Slide de apresentação interno
- Anúncio com logo da Agência Pilaris
Onde não usar
- Material onde o cliente é o protagonista visual
- Conteúdo pessoal em @vininunescardoso
- Sites de terceiros sem autorização
- Marca registrada de cliente como fundo
- Em CMYK impresso sem prova de cor
- Material de marca pessoal de funcionário