Academia de Contadores
Nossa marca,
em cada detalhe.
Um guia para expressar quem somos. Os fundamentos, as escolhas e os recursos que dão consistência à nossa identidade.
Conheça a essência
A identidade
Logotipo, assinaturas e regras para aplicar a marca.
Do conceito à interface
Componentes e recomendações para o ambiente digital.
Pronto para criar
Os arquivos originais, organizados em um só lugar.
Os nossos fundamentos
Explore o sistemaEducação.
Método. Evolução.
Uma identidade que acompanha a transformação da contadora em líder e empresária.
A nossa essência
A Academia de Contadores reúne educação, método, ferramentas e acompanhamento para apoiar profissionais e escritórios contábeis em diferentes momentos de desenvolvimento.
Gestão, processos, pessoas, posicionamento, comercial, finanças e tecnologia aplicada fazem parte dessa visão: conduzir o escritório como negócio, com responsabilidade.
Educação e novos patamares.
“Formar contadoras mais preparadas para pensar como empresárias, agir como líderes e construir escritórios mais estruturados, conscientes e autogerenciáveis.”
O significado do símbolo
O capelo estilizado sugere educação, método e evolução. Seus elementos dinâmicos remetem aos diferentes pilares de desenvolvimento do negócio. As curvas limpas e a textura reforçam sofisticação, solidez e excelência.
Um símbolo.
Uma assinatura.
Escolha a versão adequada, preserve as proporções e dê à marca o espaço de que ela precisa.
Explore as versões
As assinaturas da marca
O manual apresenta a assinatura horizontal, a versão tipográfica e o símbolo. O kit recebido inclui arquivos da assinatura horizontal e do símbolo, com variações de cor.
Ver as assinaturas no manual
Espaço para respirar
Resguarde uma área livre ao redor do logotipo. O manual representa essa área como 1x em seu diagrama. Outros textos e elementos gráficos devem permanecer fora dessa área.
Área de proteção · referência original
O documento não explicita em texto a equivalência da unidade x. O diagrama é preservado como referência, sem acrescentar uma medida oficial em pixels.
Integridade em toda aplicação
- Preserve cores e proporçõesNão altere as cores, não estique e não comprima o logotipo.
- Mantenha a composição originalNão mude a tipografia, a posição ou a distância entre os elementos.
- Garanta leitura sobre o fundoUse as versões positiva ou negativa quando houver limitações de reprodução. Evite fundos com contraste insuficiente.
Ver os exemplos de usos incorretos
Cores com presença.
Uma paleta de contrastes: a profundidade do vinho, a energia do vermelho e os tons do dourado, apoiados por preto e branco.
Paleta institucional
Selecione o formato e copie a cor.
Valores do manual, página 11. Os nomes dos tokens organizam o uso digital.
Contraste também é identidade.
Uma combinação bonita precisa continuar legível.
Conteúdo que pode ser lido, compreendido e usado.
Referência para a interface: 4,5:1 para texto comum; 3:1 para texto grande e elementos essenciais. A relação é calculada a partir das cores selecionadas.
:root {
--ac-black: #0D0D0D;
--ac-white: #F3F3F3;
--ac-wine: #310C0C;
--ac-red: #FF0805;
--ac-gold: #AB792A;
--ac-light-gold: #FFDEAA;
}A nossa voz,
em forma de letra.
Duas famílias, funções complementares. Personalidade nos títulos e clareza para o conteúdo.
Playfair Display
A família indicada para títulos. Use o contraste de seus traços para destacar ideias e construir hierarquia.
Baixar a fonteMontserrat
A família de apoio para textos. Nesta interface, também organiza navegação, rótulos e controles.
Baixar a fonteExperimente a tipografia
Hierarquia digital
Recomendação digital| Papel | Família | Tamanho | Token |
|---|---|---|---|
| Título de página | Playfair Display | 40–56 px | --text-3xl / --text-4xl |
| Título de seção | Playfair Display | 32 px | --text-2xl |
| Destaque | Montserrat | 18–24 px | --text-md / --text-xl |
| Texto corrido | Montserrat | 16 px | --text-sm |
| Metadados | Montserrat | 14 px | --text-xs |
Textos corridos usam entrelinha de 1,6 e largura de leitura de até 75 caracteres. Títulos usam entrelinha de 1,2. Evite usar pesos muito leves em textos pequenos.
Espaço para
o que importa.
Uma estrutura consistente aproxima conteúdo e intenção. Estas recomendações ampliam a identidade para interfaces.
Um ritmo compartilhado
A escala parte de múltiplos de quatro. Use espaços menores dentro de um grupo e intervalos maiores para separar assuntos.
space-14 pxspace-28 pxspace-312 pxspace-416 pxspace-624 pxspace-832 pxspace-1248 pxspace-1664 pxContornos com propósito
Cantos discretos mantêm a linguagem sóbria. Bordas separam conteúdo e tornam os controles reconhecíveis.
4 pxControles e campos8 pxPainéis e grupos12 pxExibições da marcaA composição acompanha a tela
- Leitura antes de densidadeOrganize a interface com colunas fluidas. Em telas pequenas, preserve a ordem e reduza o número de colunas.
- Interação confortávelControles com alvos de pelo menos 44 px e espaço entre ações. O foco do teclado permanece visível.
- Movimento que informaEntradas de 200 ms e saídas de 150 ms, restritas a mudanças de estado. Respeite a preferência por movimento reduzido.
.grupo-de-conteudo {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}Consistência
em cada interação.
Componentes que traduzem a identidade para a interface. Experimente os estados e use os exemplos como ponto de partida.
Clareza para preencher
Rótulos sempre visíveis e orientações próximas do campo. Este exemplo funciona localmente, sem enviar dados.
<div class="field od-field">
<label for="email">E-mail</label>
<input id="email" type="email"
aria-describedby="email-help" required>
<span id="email-help" class="field-help">
Use o formato [email protected].
</span>
</div>O próximo passo fica claro.
Uma mensagem informa o que aconteceu e como continuar. Texto e símbolos carregam o significado junto da cor.
<div class="feedback-message" role="status">
<div class="od-field">
<strong>Alterações salvas</strong>
<span>Você já pode continuar.</span>
</div>
</div>Tudo para
começar a criar.
Logos originais, referências e ferramentas de implementação. Escolha o formato e leve a identidade para o próximo projeto.
As versões V2 e as variações foram mantidas conforme o kit recebido. Alguns SVGs incluem textura rasterizada incorporada; os downloads preservam esses originais.
Documentação da marca
Para implementar
Recomendação digitalO CSS referencia as fontes em assets/fonts/. Ao reutilizá-lo, mantenha essa estrutura ou ajuste os caminhos.
Famílias tipográficas
Material complementar
Peça da comunidade
Arquivo “COMUNIDADE WPP.png”, preservado como material recebido. Suas escolhas de composição não substituem as regras do manual.
Baixar PNGUse o comando Copiar do seu dispositivo. Em computadores, Control+C ou Command+C.