Marca
Produto
Escala
O sistema de design da Agência Pilaris. Uma família tipográfica, um acento, e o preto fazendo todo o trabalho de ação.
1
família tipográfica
1
cor de acento
128px
respiro por seção
1152
largura do container
Preto age.
Laranja marca.
A separação de função é rígida: o laranja identifica a marca, o preto move o usuário e o cinza informa. Por isso nenhum botão de ação é laranja — se fosse, o acento perderia o poder de assinar.
Seções inteiras invertem para preto em vez de empilhar cards sombreados. É essa alternância branco → preto → branco que dá ritmo à página.
Cor
Preto, branco, uma escala de cinza sem customização e um só laranja. A ausência de uma segunda cor decorativa é a decisão.
Laranja
#FF5733
Marca, palavra destacada em título, ícone e anel de foco. Nunca preenche CTA.
Preto
#000000
Todo CTA e fundo de seção imersiva.
Gray 800
#1F2937
Hover do CTA, superfície e divisor dentro do preto.
Gray 900
#111827
Texto e título sobre branco.
Gray 600
#4B5563
Subtítulo e texto de apoio sobre claro.
Gray 400
#9CA3AF
Corpo de texto dentro das seções pretas.
Gray 200
#E5E7EB
Hairline: divisores e borda de campo.
Gray 50
#F9FAFB
Superfície recuada: tile de ícone.
Branco
#FFFFFF
Fundo da página e dos cartões.
Tipografia
Clash Display em quatro pesos, para tudo. Peso 700 em todo título, 500 exclusivo de botão, tracking sempre neutro — mesmo em 128px.
display-hero · 128 / 700 / 0.9
Marca Produto
display-large · 72 / 700 / 1
Abertura de seção
section-heading · 48 / 700 / 1
Título de seção
subheading-large · 36 / 700
100+ projetos
subheading · 24 / 700
Título de cartão e wordmark
body-large · 20 / 400
Subtítulo do hero, com respiro e medida curta.
body · 16 / 400 / 1.5
Texto corrido padrão do sistema, herdado do body sem utilidade de tamanho.
body-small · 14 / 400
Texto de cartão, rótulo de formulário e legenda.
Nota de idioma
A entrelinha 0,9 do display é a assinatura do sistema e foi mantida. Em português, isso exige escolher a quebra de linha: evite cedilha ou descendente na linha de cima quando a de baixo começa com til ou acento — em títulos assim, use 1,0.
Componentes
Pílula preta
Existe uma classe de botão. A variação é por largura, nunca por cor. Padding 16/32, raio 9999, peso 500, hover #1F2937.
Extrapolação para um secundário coerente, se o sistema precisar: fundo transparente, borda #E5E7EB, texto #111827.
Campos
Raio 8, borda #E5E7EB, padding 12/16. No foco a borda desaparece e entra o anel laranja de 2px.
Seu nome
Sua mensagem
Cartão interativo
Raio 16, padding 32, sem borda. Sombra ambiente que salta para elevada no hover em 300ms — o único feedback de "isto é clicável" do sistema. Tile de ícone: #F9FAFB, raio 12, padding 16, glifo laranja.
Marca
Posicionamento, identidade e sistemas visuais que aguentam escala.
Digital
Sites, e-commerce e produtos desenhados para converter sem ruído.
Crescimento
Otimização contínua, manutenção e escala depois do lançamento.
Os glifos acima são placeholders: em produção, ícone SVG de traço em #FF5733 dentro do tile.
Lista de processo
01
Descoberta e estratégia
Imersão em marca, mercado e objetivo para desenhar a rota certa.
02
Design e protótipo
Interfaces intuitivas alinhadas à identidade, testadas antes do código.
03
Desenvolvimento
Construção robusta e escalável, com atenção obsessiva a detalhe.
04
Lançamento e crescimento
Otimização e suporte contínuos para resultado de longo prazo.
Não há badge, tag, chip nem pílula de status neste sistema. As únicas formas circulares são o CTA e o botão de ícone.
Layout, raio e profundidade
1152
Container
max-width central, 16px de padding lateral no mobile, 32px no desktop.
128
Seção
Padding vertical padrão. Dentro dos blocos, o espaçamento fica entre 8 e 32px.
8·12·16
Raio
Campo 8, tile de ícone 12, cartão 16. Faixa de seção nunca é arredondada.
9999
Pílula
Botões e botões de ícone, sem exceção.
768
Breakpoint
Tudo gira aqui: nav aparece, display salta de 80 para 128px, grade vira 2 colunas.
300ms
Transição
all 300ms cubic-bezier(.4,0,.2,1). Único movimento extra: a seta desliza 4px.
Plano
O padrão: seções e faixas, sem sombra nem borda.
Hairline
1px #E5E7EB no claro, #1F2937 no escuro.
Padrão
Só o cartão de formulário.
Elevado
Hover de cartão clicável e nada mais.
Movimento
Transição de estado em 300ms e entrada por fade-up. Nada quica, nada gira, nada escala. Quem pede reduced-motion recebe a página estática.
300ms
Transição padrão
all 300ms cubic-bezier(.4,0,.2,1) em todo estado: hover, foco e sombra.
500ms
Entrada de bloco
Fade-up de 20px ao entrar na viewport, ease-out, uma vez só.
800ms
Entrada de título
Mesmo fade-up, mais lento, para display e abertura de seção.
100ms
Escalonamento
Cada item de uma grade entra 100ms depois do anterior.
4px
Seta do CTA
O → desliza no hover. É o único movimento além de transição de estado.
Experimente
Passe o cursor: o CTA troca preto por #1F2937 e a seta desliza 4px; o cartão clicável salta de sombra ambiente para elevada; o campo perde a borda e ganha o anel laranja.
Regras de ouro
Faça
Entrelinha 0,9 no display de 128px — a compressão é a identidade.
Todo CTA em pílula preta, inclusive o submit do formulário.
Laranja em palavra isolada dentro do título, ícone, marca e foco.
Peso 700 em todo título; 500 reservado ao botão.
Alternar faixas branco → preto → branco para dar ritmo.
128px de respiro por seção e blocos internos apertados.
Não faça
Não preencher CTA com laranja — o laranja marca, o preto age.
Não aplicar tracking negativo, nem nos 128px do hero.
Não usar peso 600 em título: 600 é texto de apoio.
Não introduzir uma segunda família tipográfica.
Não espalhar sombra: superfície é plana com hairline.
Sem gradiente, sem dark mode automático, sem faixa arredondada.
Sistema de design · v3 · agosto 2026