Pilaris. Sistema de design.
Linguagem visual única para landing pages, conteúdo, relatórios e identidade de marca. Construído sobre minimalismo refinado, tipografia geométrica e um acento dramático.
Princípios
Quatro regras que toda peça precisa respeitar. Quando bate uma dúvida sobre o que fazer, volta aqui.
Laranja Pilaris só aparece em CTA principal, número de destaque, ou um único elemento por tela. Se aparecer em três lugares, perdeu a função.
Hierarquia se constrói com tamanho e peso, não com cor ou decoração. Display pesa, body respira.
Títulos em sentence case, kickers em UPPERCASE com tracking aberto. Title Case não existe aqui.
Espaço em branco é elemento de design. Se a tela está cheia, está errada. Respiro entre blocos é obrigatório.
Paleta de cor
Cinco neutros mais um acento. Mais que isso é ruído. Clique em qualquer cor para copiar o hex.
Tipografia
Manrope em todos os pesos. Hierarquia se constrói com escala e peso. Sete níveis cobrem tudo.
−0.035em
−0.025em
−0.02em
−0.01em
1.55
1.55
1.5
+0.14em
tabular
Logo system
Monograma AP com P em Pilaris sólido e A em Carbon ou Bone. Wordmark em Zen Dots. 20 arquivos no Drive cobrem 100% dos casos de uso reais.
Zen Dots Regular · 92px · letter-spacing −2. Embutida como path nos SVGs de lockup, renderiza idêntico em qualquer ambiente sem depender de fonte instalada. Use apenas na wordmark, nunca em UI ou headlines (essa função é da Manrope).
| # | Arquivo | Uso |
|---|---|---|
| 01 | monograma-claro | Quadrado, fundo Bone |
| 02 | monograma-escuro | Quadrado, fundo Carbon |
| 03 | circular-claro | Avatar redes sociais, perfil claro |
| 04 | circular-escuro | Avatar redes sociais, perfil escuro |
| 05 | lockup-claro | Header, assinatura, fundo claro |
| 06 | lockup-escuro | Header, assinatura, fundo escuro |
| 07 | lockup-claro-transparente | Sobre foto/textura clara |
| 08 | lockup-escuro-transparente | Sobre foto/textura escura |
| 09 | favicon-claro | Favicon site modo claro (32px) |
| 10 | favicon-escuro | Favicon site modo escuro |
| 11 | mono-preta | Quadrado preto sobre Bone |
| 12 | mono-branca | Quadrado branco sobre Carbon |
| 13 | mono-preta-transparente | Preto sobre qualquer fundo claro |
| 14 | mono-branca-transparente | Branco sobre qualquer fundo escuro |
| 15 | lockup-mono-preto | Horizontal preto, contratos B&W |
| 16 | lockup-mono-branco | Horizontal branco |
| 17 | lockup-mono-preto-transparente | Horizontal preto transparente |
| 18 | lockup-mono-branco-transparente | Horizontal branco transparente |
| 19 | stamp-preto | Watermark PDF/slide claro (opacity 8%) |
| 20 | stamp-branco | Watermark PDF/slide escuro (opacity 8%) |
Arquivos disponíveis em Drive · pasta nova logo agencia pilaris ↗. SVG + PNG para cada variante.
- P sempre Pilaris #FB8500 sólido
- Manter contraste mínimo 4.5:1
- Usar SVG sempre que possível
- Watermark com opacity 8–15% no máximo
- Zen Dots só na wordmark, Manrope no resto
- Aplicar sobre fundo Pilaris (P some)
- Escrever wordmark em caixa alta (sempre "Agência Pilaris")
- Gradiente, sombra, glow no P
- Combinar com #FFB703 (cor aposentada)
- Trocar fonte do wordmark (Zen Dots é oficial)
Espaçamento e raio
Escala base 4px. Use sempre os tokens, nunca valores quebrados. Raios servem só duas funções: card e pill.
inputs, pills pequenos
botões, badges
cards padrão
hero, blocos grandes
tags e chips
Botões
Quatro variantes, três tamanhos. Primary (laranja) só aparece uma vez por tela — é a ação que importa.
Primary · Secondary · Ghost · Dark. Ordem de prioridade visual de cima pra baixo.
Large em CTA de hero. Medium é padrão. Small em forms e ações inline.
Pills e badges
Etiqueta curta, categorização, estado. Sempre em sentence case, 11px, peso 600.
Cards de KPI
Base de relatórios e dashboards. Número grande, label discreta, delta colorido. Sempre fonte tabular pra números alinharem.
Landing pages
Estrutura de hero que funciona para qualquer serviço. Kicker → Display → Sub → Pills → CTA → Stats. Use claro pra serviços calorosos, escuro pra premium e técnico.
Carrosséis Instagram
Formato 4:5. Três templates cobrem 90% dos posts: capa-texto, capa-dado, capa-acento. Sempre kicker no topo, brand no rodapé.
Relatório cliente
Capa de relatório mensal. Marca discreta no topo, período à direita, grid de KPIs principais. Mesmo layout funciona em PDF, Notion e slide.
Do & don't
Lista curta de armadilhas que tornam o sistema genérico. Memorize.
- Sentence case em todos os títulos
- Laranja apenas em 1 elemento por tela
- Espaço em branco generoso entre blocos
- Números em fonte tabular (alinham)
- Manrope 800 para headlines
- Title Case ou ALL CAPS em headlines
- Laranja + amarelo juntos (vira fast food)
- Sombras, glow, gradientes decorativos
- Mais de 2 CTAs primários por tela
- Cores semânticas (verde, vermelho) em texto decorativo