Títulos, números grandes e chamadas. Pesos 300 a 800.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ÁÃÇÉÍÕÚ R$ %A espiral já estava no nome.
Ao desenhar a marca, a espiral não foi colocada ao lado do nome: o nome gira em volta dela. “Escritório” em cima, “Conttábil Econômico” embaixo, e no centro o movimento que a contabilidade faz todo mês. Por cima das voltas, três losangos de traço fino marcam o eixo do desenho.
Cada volta, um ciclo fechado.
- i.O centroOnde a empresa começa: a abertura, o CNPJ, o primeiro balanço.
- ii.As voltasCada mês fechado com imposto pago e prazo cumprido. São seis, e nenhuma se interrompe.
- iii.A ponta abertaA espiral não fecha: o próximo ciclo é sempre um pouco maior.
Uma linha, seis voltas, o mesmo passo.
A espiral foi vetorizada sobre o arquivo original, acompanhando o traço ponto a ponto. As medidas abaixo saem do vetor e servem de régua para qualquer reprodução.
- 1Centro
A espiral nasce de um ponto e cresce no sentido anti-horário, de dentro para fora.
- 2Passo constante
Cada volta se afasta da anterior pela mesma distância. É o ritmo do mês contábil, sempre igual.
- 3Traço em três camadas
Núcleo amarelo entre dois filetes vermelhos.
- 4Acabamento
Pontas arredondadas nas duas extremidades e seis voltas completas, sem emendas.
- 5Três losangos
Três losangos com o mesmo centro e a mesma proporção cruzam as voltas, por cima delas, em traço fino.
x-height
baseline
- Light
- Regular
- SemiBold
- ExtraBold
League Spartan
A fonte dos títulos dá voz à marca em placas, apresentações, relatórios e redes.
Por que ela funciona: é geométrica como a espiral, construída sobre círculo e reta, firme sem ser fria. Em tamanho grande ela tem presença; em tamanho pequeno ela continua clara.
- 01EstruturaBojo circular e haste reta, como a espiral e o traço.
- 02Junções limpasO encontro do bojo com a haste sem enfeite, legível em qualquer tamanho.
- 03Quatro pesosLight, Regular, SemiBold e ExtraBold, em uma família variável.
Três vozes, uma só conversa.
Títulos em League Spartan, subtítulos em Manrope e texto corrido em Cooper Hewitt. As três são gratuitas, de licença aberta.
Subtítulos e rótulos em caixa alta, com espaçamento largo. Pesos 600 a 800.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ÁÃÇÉÍÕÚ R$ % Substitui a Articulat · a confirmarTexto corrido, contratos, relatórios e formulários. Pesos 400 a 700.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ÁÃÇÉÍÕÚ R$ %Sua empresa em dia.
Contabilidade, fiscal e pessoal em um só lugar
Departamento pessoal
Cuidamos da folha, dos impostos e das obrigações para você cuidar do que faz a empresa crescer. Cada cliente tem um contador responsável, que conhece o negócio pelo nome.
Guia DAS de outubro · vencimento em 20/10
Novo
Econômico não é barato. É bem cuidado.
O Conttábil vende outra coisa: tranquilidade, prazo cumprido e alguém que explica antes de cobrar.
Quem procura um escritório contábil não está atrás do mais barato. É dono de pequena ou média empresa, com funcionários e impostos para pagar. A grande emoção não é economizar. É o medo de errar uma guia, perder um prazo e descobrir tarde demais.
Organizar sem complicar o que já é difícil.
- i.próxima
e não distante ou burocrática - ii.clara
e não cheia de jargão - iii.sólida
e não engessada - iv.econômica
e não apenas barata
E precisava evitar os códigos visuais gastos do segmento:
calculadorasgráficos de pizzacifrõesmaletascolunas gregasapertos de mão
Preto de base, amarelo de energia.
O segmento vive de azul-marinho e cinza. A marca mantém o marinho como cor de confiança, mas assume o preto como base e um amarelo vivo como ponto de energia. O vermelho entra em pequenas doses, sempre ao lado do amarelo, como no símbolo.
Passe o mouse para ver cada cor · clique para copiar o hexToque em uma cor para ver os detalhes
Base firme, destaque pontual.
O peso da marca não vem de muitas cores. Vem da contenção: poucas cores, bem usadas, com espaço para respirar.
Preto e cinza claro são o chão: fundos, páginas e grandes áreas.
Marinho e cinza organizam: seções institucionais, títulos e textos de apoio.
Amarelo e vermelho são o movimento: chamadas, destaques e a linha da espiral. Pouco e no lugar certo.
Contraste que se lê.
Combinações medidas pela norma de acessibilidade WCAG. A partir de 4,5:1 vale para qualquer texto; entre 3 e 4,5 só para títulos grandes.
Valores CMYK são conversões de referência: valide sempre em prova de gráfica.
Uma marca para qualquer fundo.
O logo foi vetorizado sobre o arquivo original, sem mudar o desenho: letras, espiral e losangos seguem o original. Assim ele ganha versões positiva, negativa e monocromáticas em todas as cores da paleta.
Positiva é o arquivo original. Use sobre branco, cinza claro e fundos claros.
Negativa vale para preto e marinho: “Escritório” passa a branco, porque o índigo original quase some no escuro, com contraste de 1,3:1. Os losangos também ficam claros, porque o preto desaparece no fundo escuro.
Monocromática sobre amarelo, vermelho e fotos: branca, preta ou marinho, conforme o fundo. Preto 100% só em impressão de uma cor, carimbo e gravação.
Espaço para respirar, tamanho para ler.
Três regras que protegem a marca em qualquer peça: a área livre em volta, o menor tamanho que ainda se lê e o que nunca fazer com o desenho.
x = o passo entre duas voltas da espiral. Nenhum texto, foto, borda ou outro logo entra nessa faixa em volta da marca. Em anúncios e redes sociais, use o dobro sempre que houver espaço.
Redução mínima · tamanho real na tela
Logo completo40 mm · 200 px de largura
Símbolo30 mm · 140 px de largura
Os traços do original são finos: a linha dos losangos tem menos de um terço da espessura do anel. Abaixo de 200 px ela some e o nome perde leitura: use só o símbolo. Abaixo de 140 px, use o símbolo reduzido: o mesmo desenho, com as seis voltas e os três losangos em traço mais grosso. Abaixo de 32 px, a versão de uma cor. Medidas propostas, a validar em prova de impressão.
O que nunca fazer.
Os erros mais comuns ao aplicar a marca. Na dúvida, use o arquivo original sem alterar nada.
Não distorça nem estique.
Não gire nem incline.
Não troque as cores.
Não use só o contorno.
Não aplique sombra, brilho ou degradê.
Não mude a posição ou o tamanho das partes.
Não use a versão colorida sobre cor de destaque.
Não use a versão positiva em fundo escuro.
A espiral também é desenho.
Três recursos gráficos tirados do próprio símbolo. Eles dão unidade às peças sem repetir o logo inteiro em todo lugar.
Superespiral. O símbolo ampliado e sangrando pela borda, sobre preto ou marinho. Deixe no máximo duas voltas inteiras à vista.
Trama de voltas. O símbolo reduzido em grade, com muito vazio. Fundo de papelaria, envelopes, embalagem e redes.
Filete. O traço da espiral em linha reta, com 15% de vermelho, 70% de amarelo e 15% de vermelho. Rodapés, fitas, divisórias e arremates.
O dia a dia visto através da espiral.
Na comunicação, a marca funciona como janela: dentro das letras e da espiral aparecem a cidade, o escritório e os livros de cada cliente. Ela não é o número. É a forma de chegar até ele.
- Fotografias em preto e branco, com luz natural e grão, para manter a sobriedade.
- Cor aplicada pela paleta da marca, nunca pela foto.
- Gente e lugares de trabalho de verdade, e não banco de imagem com aperto de mão.
Quem cuida da sua empresa sabe o seu nome.Escritório Conttábil Econômico
Escritório Conttábil Econômico
Contabilidade · Fiscal · Pessoal
Contabilidade · Fiscal · Pessoal
20 de outubro de 2026
Prezada cliente,
Seguem o balancete de setembro e as guias de outubro. O DAS vence no dia 20. Qualquer dúvida, fale direto com a sua contadora.
conttabileconomico.com.br(00) 0000-0000
Nome da contadoraContadora responsável
Do avatar ao papel timbrado, o Conttábil mantém a mesma presença: clara, firme e reconhecível.
Fotografias de arquivo em domínio público ou CC0, convertidas para preto e branco: livro-razão da Patterson's General Store, 1910; vista aérea do Navy Yard, Brooklyn, 1918, restauração de Adam Cuerden; escadaria em espiral dos Museus do Vaticano, por Wilfredor, CC0. Todas via Wikimedia Commons. A foto da equipe é do escritório, convertida para preto e branco. Nomes, datas e contatos das peças são ilustrativos.
Assim pode ficar o site.
Uma prévia navegável que mostra o sistema visual em uso: tipografia, cores, botões e blocos. A estrutura segue o que os sites de referência ensinam, e o site final ganha movimento e efeitos próprios na próxima etapa.
Clique em “Serviços” no menu, use o simulador e abra as perguntas. No celular, toque no menu.
É uma referência de estilo, não o site pronto. Textos, números, avaliações e endereço são ilustrativos. Cidade e bairro entram quando o cliente confirmar.
As peças do site.
Cada parte da prévia, separada e com os seus estados. É a régua para quem for desenhar e programar o site.
Botões e seus estados.
Um botão principal por tela. Amarelo para a ação mais importante, marinho para a segunda e contorno para as demais.
Fundo claro
Passe o mouse e use o teclado para ver os estados reais. Os exemplos fixos mostram cada estado lado a lado.
PadrãoMouse em cimaFoco do tecladoPressionadoDesativadoCarregando
Principal
Secundário
Contorno
TextoVer serviçoVer serviçoVer serviçoVer serviço
Fundo escuro
No escuro, o foco do teclado passa a amarelo e o contorno fica branco.
Tamanhos, ícone e botão flutuante
Pequeno com 36 px, médio com 46 px e grande com 56 px. O alvo de toque nunca fica abaixo de 44 px no celular.
Campos e formulários.
Poucos campos, com rótulo sempre visível e mensagem clara. O formulário já separa o pedido por tipo de empresa.
Como você quer ser chamada.
Usamos só para enviar a proposta.
Faltam dígitos. O CNPJ tem 14 números.
Número confirmado.
Número de funcionários
Cabeçalhos e menus.
Menu no topo no computador e gaveta no celular. O telefone e o WhatsApp ficam sempre a um toque, e o portal do cliente é um botão que abre o sistema que o escritório já usa.
Topo claro com barra de contato e menu de serviços aberto
Cada item do menu leva a uma página própria de serviço. Clique em “Serviços” para abrir e fechar.
Topo sobre a foto da primeira dobra
Transparente no início da página, com texto branco.
Contabilidade com quem sabe o seu nome.
Falar no WhatsAppTopo depois de rolar
Fica fixo, mais baixo e com fundo sólido, para o menu nunca sumir.
Menu no celular · fechado e aberto
Fechado, o celular mostra a barra fixa com WhatsApp e Ligar. Aberto, a gaveta entra pela direita com os caminhos principais.
Fechado
Aberto
Trilha de navegação
Nas páginas internas, mostra onde a pessoa está e ajuda o Google a entender o site.
Abas segmentadas
Para filtrar sem sair da página. Clique para trocar.
Cartões, selos e respostas.
Os blocos que se repetem no site. Cartão só quando a informação é uma unidade própria, como um serviço, um plano ou um relato.
Abrir empresa
CNPJ, inscrições e alvará em até 10 dias úteis.
Ver serviçoMais escolhido
Crescer
Para empresas do Simples Nacional.
- Impostos e contabilidade
- Folha de até 5 pessoas
“Eles explicam antes de cobrar.”
Simples ou Presumido: qual paga menos?
ALNome da contadoraContadora responsável · CRC/UF 000000
Cada empresa tem uma contadora com nome, foto e WhatsApp direto.
Falar com ela2
Transição
Semanas 2 a 4Pedimos documentos e saldos à contabilidade anterior.
Selos
Sempre com texto, nunca só com cor.
NovoSimples NacionalSemana 1Mais escolhidoMEI6 min de leitura
Mensagem rápida
Proposta enviada. Respondemos em até um dia útil.
Perguntas frequentes
Abrem e fecham. Marcadas para o Google mostrar a resposta na busca.
Quanto custa um contador para pequena empresa?
Para saber mais sobre os planos, fale com a gente pelo WhatsApp. A proposta sai em até um dia útil.
Como funciona a troca de contador?
Pedimos documentos e saldos à contabilidade anterior. Leva de duas a quatro semanas.
Aviso de cookies
Discreto, no canto, com Recusar e Aceitar do mesmo tamanho. Não cobre metade da tela como acontece nos sites de referência.
Usamos cookies essenciais e, com a sua permissão, cookies de medição. Saiba mais.
Ícones de linha.
Um conjunto próprio, com traço de 1,75 px e pontas arredondadas, como a espiral. Sem calculadora, cifrão ou aperto de mão.
Rodapés e chamada final.
O rodapé completo repete endereço, telefone e CRC em todas as páginas, o que ajuda na busca local. O compacto fica nas páginas internas.
Chamada antes do rodapé
Rodapé completo
Rodapé compacto
Assinatura do site. No cabeçalho e no rodapé, o símbolo aparece ao lado do nome em League Spartan. É uma proposta, porque o logo circular não lê bem abaixo de 100 px. Precisa da aprovação do cliente.
Arquivos da marca.
Cada versão sai em vetor e em imagem. Os arquivos acompanham esta apresentação, em pasta separada.
| Arquivo | O que é | Onde usar |
|---|---|---|
| conttabil-logo-positiva | O logo original, colorido | Documentos, papelaria e site sobre fundo claro |
| conttabil-logo-negativa | “Escritório” e losangos em branco | Fundos pretos e marinho, apresentações, redes |
| conttabil-logo-mono-branco | Uma cor, branca | Sobre fotos, marinho e vermelho |
| conttabil-logo-mono-preto | Preto 100% | Carimbo, gravação e impressão de uma cor |
| conttabil-logo-mono-marinho | Uma cor, marinho | Sobre amarelo e cinza claro |
| conttabil-simbolo | A espiral e os três losangos | Avatar, selos e marca-d’água |
| conttabil-simbolo-reduzido | O mesmo símbolo, com traço mais grosso | Favicon e tamanhos de 32 a 139 px |
| conttabil-icone-app | Símbolo reduzido em quadrado preto | Ícone de aplicativo e atalho |
Formatos
SVG é o arquivo vetorial de trabalho. Abre direto no Illustrator, Figma, Inkscape e CorelDRAW, com o texto já convertido em curvas.
PNG tem fundo transparente e 3000 px de largura. Use em apresentações, redes sociais e sistemas que não aceitam vetor.
Para gráfica, envie sempre o SVG ou um PDF vetorial exportado dele. Nunca amplie o PNG além do tamanho original.