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
Cinco 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 em UI funcional, dashboard e relatório. Em peça narrativa/promocional, cor pode entrar como hierarquia via Exceção autorizada (§Onde o acento pode aparecer > Highlight em headline).
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.
Cada peça funciona em Bone e em Carbon. Não existe "modo principal e secundário". Hierarquia, peso do acento e densidade permanecem idênticos nos dois modos.
Acento Pilaris
Laranja #FB8500 aparece em no máximo 1 elemento por tela. Aqui está onde ele pode entrar e a exceção autorizada para peças narrativas.
Acima de tudo: um por tela. Se já tem em algum dos lugares abaixo, não tem nos outros.
Botão sólido, ou pílula de "próximo passo". Default.
KPI hero, big number de carrossel, percentual de redução. Quando o dado é o ponto da tela.
Seta de progresso, dot de status "live", underline de link interativo crítico.
Pintar 1 palavra do display/H1 em Pilaris é permitido somente quando os 4 critérios abaixo são satisfeitos juntos:
- A tela não tem outro acento (CTA fica em Carbon Dark, KPIs ficam neutros, nenhum sinalizador laranja).
- A palavra colorida é a palavra-chave semântica do título, não decorativa. "Busca local", "menos suor". Verbos e artigos nunca.
- Uma única palavra (no máximo dois nomes próprios contíguos). Frases inteiras viram outline laranja, que é proibido.
- A peça é narrativa ou promocional (capa de pitch, hero de LP, capa de carrossel). Em UI funcional, dashboard ou relatório o highlight não é permitido — lá a hierarquia volta a ser tamanho e peso pura.
Em dúvida, prefira tirar o highlight. A regra base do system é hierarquia por tamanho e peso. O highlight em cor é ferramenta, não default.
Não contam como acento: wordmark "Agência Pilaris" (Zen Dots), seta → estrutural de rodapé de slide, watermark do logo abaixo de 15% de opacity. Tudo o que for pintado em Pilaris fora dessa lista conta como 1 elemento de acento.
Hierarquia de regras: R-09 (highlight em headline) é exceção válida em peça narrativa/promocional. Em UI funcional, dashboard ou relatório, vale R-02: hierarquia por tamanho e peso, sem cor.
Paleta de cor
Cinco neutros mais um acento. Mais que isso é ruído. Clique em qualquer cor para copiar o hex.
Tipografia
Manrope (prosa, 7 níveis) + JetBrains Mono (dados). Hierarquia se constrói com escala e peso, nunca com cor.
−0.035em
−0.025em
−0.02em
−0.01em
1.55
1.55
1.5
+0.14em
tabular
tabular
tabular
+0.02em
| Nível | UI web | Carrossel 1080×1350 | Pitch 1920×1080 |
|---|---|---|---|
| Display | 56 / 800 / −0.035em / lh 1.0 | 220 / 800 / −0.04em / lh 0.88 | 160 / 800 / −0.035em / lh 0.92 |
| Big-text (H0) | — | 76 / 800 / −0.025em / lh 1.02 | 64 / 800 / −0.025em / lh 1.05 |
| H1 | 36 / 800 / −0.025em / lh 1.05 | 120 / 800 / −0.025em / lh 1.0 | 96 / 800 / −0.025em / lh 1.05 |
| H2 | 24 / 700 / −0.02em / lh 1.15 | 64 / 700 / −0.02em / lh 1.1 | 48 / 700 / −0.02em / lh 1.15 |
| Body LG | 17 / 400 / lh 1.55 | 40 / 400 / lh 1.4 | 32 / 400 / lh 1.45 |
| Body | 15 / 400 / lh 1.55 | 32 / 400 / lh 1.4 | 24 / 400 / lh 1.45 |
| Body SM | 13 / 400 / lh 1.5 | 24 / 400 / lh 1.45 | 20 / 400 / lh 1.5 |
| Kicker | 11 / 600 / +0.14em UC | 22 / 600 / +0.14em UC | 18 / 600 / +0.14em UC |
| Wordmark Zen Dots | 22 (footer LP) | 48 (footer slide) | 40 (footer slide) |
| Mono LG | 14 / 500 | 28 / 500 | 22 / 500 |
| Mono | 12 / 500 | 22 / 500 | 18 / 500 |
| Mono SM | 11 / 500 / +0.02em | 18 / 500 / +0.02em | 14 / 500 / +0.02em |
Escalas Carrossel e Pitch derivam da UI por proporção (~3,5× e ~2,6× respectivamente). Em formatos não listados, escalar mantendo as proporções de peso e tracking. Tracking pode receber ajuste óptico de até −0.005em em Display acima de 200px.
Iconografia
Set oficial: Lucide. Linha fina, traço consistente, cobertura ampla e licença MIT.
<!-- 1. carregar Lucide via CDN no fim do <body> -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- 2. marcar os ícones em qualquer lugar -->
<i data-lucide="check"></i>
<i data-lucide="phone"></i>
<i data-lucide="arrow-right"></i>
<!-- 3. inicializar com os padrões do Pilaris -->
<script>
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
</script>
- Stroke-width 1.5 sempre
- Tamanho base 20px na UI; 16–18px em chips/badges; 24–28px em hero
- Cor herda do
currentColor. Em ícones de acento, aplicarcolor: var(--pilaris)no wrapper
- Emoji: banido em qualquer aplicação
→em rodapé de slides e CTAs faz parte da estrutura fixa do template e não conta como acento Pilaris. Pode aparecer junto com CTA primary, highlight em headline ou número de destaque. Outras setas→fora dessa estrutura (ex: inline em copy, em diagramas) seguem a regra de acento único e consomem o slot.- SVG inline custom: único caso aceitável é quando Lucide não cobre. Manter stroke 1.5, fill none, currentColor
Tom de voz
Direto, técnico, sem floreio. A Pilaris fala como quem está montando uma máquina, não vendendo um sonho.
"você" / "a gente". Nada de "nós da Pilaris", nada de "transforme seu negócio".
Indicativo, presente. "Atende em 25 minutos", não "transformamos vidas".
Curtas. Ponto, vírgula, ponto e vírgula. Em-dash (—) banido como separador de ideias no copy.
Sentence case em tudo que é título, label, botão. Kickers UPPERCASE com tracking +0.14em. Wordmark sempre "Agência Pilaris", nunca "AGÊNCIA PILARIS".
Sempre em JetBrains Mono com tabular-nums.
- Moeda BR: R$ 1.200,00
- Porcentagem: 12,4%
- Telefone: (48) 99999-9999
- CNPJ: 28.521.095/0001-08
Banido. Em copy, UI ou slides. Se precisa sinalizar, use kicker, pill ou cor semântica.
- Chaveiro na hora, em até 25 minutos.
- Resposta no WhatsApp em até 90 segundos.
- Custo por lead caiu 11,4% pelo ajuste de horário das campanhas noturnas.
- Transforme seu negócio com nossas soluções de marketing digital.
- Vamos juntos alcançar o próximo nível
- Especialistas em performance — resultado garantido!
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.
- Sem gradientes, sem texturas, sem patterns. O sistema é monocromático plano.
- Modo claro: Bone como base; superfícies elevadas em branco puro
#FFFFFFou Stone. - Modo escuro: Carbon como base; superfícies elevadas em Ink.
- Imagens, quando entram: nunca filtradas em laranja. Preto e branco com leve grão é aceitável; cor saturada não.
- Watermarks Pilaris: opacity entre 6% e 15%, nunca mais.
- Sem bounces, sem spring. Transições limpas: 150–200ms ease.
- Hover botão primary: troca para Pilaris-dim (
#C26800). Botão escuro: opacity 0.92. - Hover card: apenas a borda fica mais forte (
border-strong). Nada de elevação, nada de sombra. - Pressed: sem shrink, sem scale. Pode usar Pilaris-dim.
- Focus: ring sutil de 3px em
rgba(10,10,10,0.06). Em escuro,rgba(250,250,247,0.10).
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.
Pitch deck comercial
Formato 1920×1080. 8 slides padrão. Navegação por teclado (← →) e export print-to-PDF em 1 clique.
| # | Slide | Função |
|---|---|---|
| 01 | Capa | Wordmark + tagline + nome do prospect |
| 02 | Problema | O contexto que o cliente vive hoje (sem solução ainda) |
| 03 | Método 3C | Clique, Conversa, Cliente — com 1 frase por etapa |
| 04 | Stack | Google Ads, GBP, landing pages, automação |
| 05 | Cases | 2–3 cases reais com KPI principal em mono LG |
| 06 | Pacotes | Tabela de pacotes ativos com preço e escopo |
| 07 | Próximos passos | Como começamos. Cronograma de implantação |
| 08 | CTA | Próximo passo + contato |
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
- JetBrains Mono para dados, IDs e métricas
- 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
- JetBrains Mono em headings, body ou kickers narrativos
Exceções autorizadas
Casos pontuais onde uma cor fora do sistema é permitida por convenção universal.
Verde WhatsApp é permitido exclusivamente em CTAs de mensageria direta para WhatsApp, por convenção universal de UX. Reconhecimento da cor pelo usuário > consistência cromática do sistema.
- Botão "Falar no WhatsApp" em página de obrigado pós-form
- Botões de fallback de contato quando WhatsApp é a única intenção do CTA
- Ícones decorativos, badges, divisores, hover de link
- Botões genéricos de "Entre em contato"
- Texto, ilustração, gráficos, qualquer contexto fora de CTA
A regra de acento único (Pilaris #FB8500) continua valendo pra todo o resto do sistema.