Logo para fundo claro
Revisão da seçãoAguardando revisão4 atendidos · 0 a ajustar · 4 a revisar
O que já existe, o que precisa melhorar e o que ainda merece uma avaliação. Cada estado se refere apenas ao critério abaixo; não é aprovação da seção inteira.
- Atende ao critérioLogos oficiais estão disponíveis para fundos claros e escuros.
As três versões do logo, três ícones quadrados e o símbolo isolado têm downloads SVG, PNG e WebP sem perdas, com URLs diretas em brand.json. Logos e símbolo isolado preservam transparência.
Ver material relacionado ↗ - Aguardando revisãoO logo expressa o negócio e faz sentido para seu público.
Revisar a marca com seu responsável, considerando posicionamento e público.
- Aguardando revisãoA marca é reconhecível sem detalhes desnecessários.
Comparar silhueta e aplicações monocromáticas; identificar detalhes que dificultam o reconhecimento.
- Aguardando revisãoO logo permanece legível no menor tamanho previsto.
Tamanhos piloto documentados: 96 CSS px no digital e 20 mm no impresso. Revisar aplicações pequenas com o responsável da marca e fazer prova impressa em tamanho final.
- Aguardando revisãoTipografia e cores reforçam a mesma personalidade.
Revisar aplicações completas do logo, incluindo uma cor, sem depender apenas da cor.
- Atende ao critérioÁrea de proteção e tamanho proporcional têm especificação reproduzível.
O guia usa metade da altura do logo exportado por lado, com diagramas, prévia digital e medidas estruturadas.
Ler especificações do logo ↗ - Atende ao critérioO símbolo existente tem arquivos reutilizáveis e regras de uso.
Favicon original preservado; símbolo vetorial, recortes, área de proteção e exemplos de 16–128 px documentados. Aprovação da marca e prova impressa permanecem pendentes.
Ver símbolo da marca ↗ - Atende ao critérioRegras de aplicação incluem exemplos visuais e orientação legível por IA.
Guias de layout, comparações de contraste, diagramas físicos e seis exemplos de uso incorreto documentados. Aplicações específicas de produção ainda precisam de validação.
Ver guia de aplicação ↗
01 / Marca
Reconhecível em cada detalhe.
Use os arquivos existentes da marca e preserve suas proporções. A cor do logo faz parte do ativo; ela não muda automaticamente com a paleta da interface.
Baixe o SVG original, PNG transparente ou WebP sem perdas. Abra o arquivo ou copie sua URL direta para compartilhar com sua equipe ou IA.
Logo para fundo escuro
Logo para fundo lime · dois pontos brancos
Uma marca que se mantém inteira.
Use o arquivo para fundo claro sobre superfícies claras e a versão para fundo escuro onde ela continue legível. Não estique, recorte, adicione efeitos ou substitua as letras por uma fonte parecida.
Símbolo da marca
Dois pontos. Uma assinatura.
Os dois pontos deslocados já identificam a 6am no favicon. Eles são nossa assinatura compacta quando o nome completo não cabe e o contexto já deixa claro de quem estamos falando.
O mesmo símbolo, em cada formato.
Use o arquivo quadrado como base. O círculo e os cantos arredondados abaixo simulam os recortes de apps e redes sociais; não são versões diferentes do desenho. O verde original do símbolo é #C4E86B. No fundo lime, os dois pontos ficam brancos.
Verde original sobre preto
Preto sobre branco
Branco sobre lime
Espaço para reconhecer.
H é a altura total dos dois pontos. Reserve pelo menos ¼H em cada lado do símbolo isolado. Nos arquivos quadrados, a altura do símbolo ocupa metade do canvas; essa margem já protege o desenho nos recortes circulares.
Pequeno, sem perder a assinatura.
Os exemplos aparecem no tamanho indicado em pixels CSS. Use o arquivo vetorial para exportar a resolução pedida pela plataforma. 16 px é o mínimo proposto para o favicon quadrado; para o símbolo isolado, preserve pelo menos 16 px de altura, além da área livre.
Em 16 px, confira as duas barras separadas na tela de destino. Prefira 32 px ou mais quando houver espaço. Tamanhos de impressão ainda precisam de prova física.
Quando usar.
- Use em favicons, avatares e atalhos de apps quando houver contexto da marca.
- Use o logo completo em apresentações, propostas e primeiros contatos. O símbolo não substitui o nome onde ele precisa ser lido.
- Preserve as duas barras, o deslocamento e as proporções. Não gire, centralize uma barra sobre a outra ou redesenhe com pontuação de uma fonte.
- Envie o arquivo quadrado para plataformas que aplicam seu próprio recorte. Não exporte cantos arredondados sobre transparência antes de um segundo recorte.
- Em interfaces, forneça o nome acessível “6am”. O símbolo identifica a marca; não o use como ícone de uma ação.
Símbolo isolado
Documentação em piloto: o símbolo vem do favicon existente e dos dois pontos do logo. As aplicações vetoriais, margens e tamanhos desta seção aguardam revisão da marca; o favicon do site continua sendo o arquivo atual.
Dê espaço para reconhecer a marca.
A área de proteção afasta textos, imagens e bordas da marca. Redimensione o logo completo proporcionalmente, usando os SVGs originais.
Área de proteção
H é a altura do logo exportado. Preserve pelo menos ½ H livre nos quatro lados. Meça a partir do quadro do logo, não da borda de um contêiner com margens internas.
Um fundo tranquilo pode atravessar a área livre. Textos, ícones, bordas, outros logos e detalhes visuais intensos devem ficar fora dela. As bordas da peça também respeitam essa distância.
Cabe na peça. Continua legível.
São especificações iniciais deste piloto. Aumente o logo quando distância, contraste, reprodução ou condições de tela dificultarem o reconhecimento. O mínimo se refere ao logo, sem incluir a área de proteção.
Mínimo digital
96 CSS px de largura e cerca de 19,2 px de altura. Reserve cerca de 9,6 px livres por lado. Com zoom do navegador em 100%, o exemplo abaixo é exibido em 96 CSS px.
Mínimo impresso
20 mm de largura e cerca de 4 mm de altura, com 2 mm livres por lado. Faça prova em tamanho final no material previsto antes de aprovar.
O exemplo em tela está ampliado para explicar; não é uma régua física. Mínimos digital e impresso são especificações independentes.
Confira o tamanho digital.
Mova o controle e compare superfícies claras e escuras. O logo mantém proporção e área de proteção ao mudar de tamanho.
No mínimo do piloto ou acima dele. Revise a leitura no contexto final.
- Altura do logo
- 28,8 px
- Área livre por lado
- 14,4 px
- Largura total reservada
- 172,8 px
Escolha a posição. Preserve o espaço.
Comece pelo canto superior esquerdo em páginas, documentos e apresentações, alinhado ao grid do conteúdo. Peças sociais podem usar outro canto quando o modelo pedir. Preserve a posição ao longo de uma série.
Uma mensagem clara.
Uma ideia útil, pronta para compartilhar.
A distância entre o logo e a borda precisa ser pelo menos a maior entre a margem do layout e ½ H. A área de proteção é um mínimo, não substitui o grid da página.
Diagramas de posicionamento. Sobreposições da interface do canal e áreas seguras precisam de reserva própria, além da proteção do logo.
Uma marca. Muitos lugares.
Do post à fachada, a marca precisa continuar fácil de reconhecer. Escolha o arquivo certo, dê espaço ao logo e preserve sua leitura em cada formato.
A posição acompanha a mensagem.
Comece pelo canto superior esquerdo em páginas e documentos. Em campanhas, o canto superior direito ou o centro inferior podem organizar melhor a peça. Alinhe a assinatura ao conteúdo e mantenha a posição ao longo da série.
Seu próximo passo começa aqui.
A assinatura abre a leitura. Alinhe o início do título à mesma margem.
Uma ideia útil. Pronta para circular.
Uma composição central pede uma assinatura no mesmo eixo. Preserve a distância do título.
Clareza para o trabalho de todo dia.
Equilibre um título à esquerda com a assinatura à direita. Deixe o bloco de texto abaixo da faixa do logo.
As guias mostram alinhamento, não fazem parte da arte. Some a área de proteção do logo às margens e áreas seguras exigidas pelo canal.
Sobre fotos, procure um lugar tranquilo.
Escolha uma área com poucos detalhes e contraste suficiente para as letras e os dois pontos. Se a foto não oferecer esse espaço, mude o recorte ou coloque a assinatura numa faixa sólida. Não tente resolver a leitura com contorno ou sombra no logo.
Use assim
Use uma área escura e livre.
Evite
Evite luz e detalhes atrás da assinatura.
Demonstração com uma ilustração existente da 6am. A mesma regra vale para fotografia; este exemplo não é uma foto de cliente.
Fora da tela, o contexto muda. A marca permanece.
Fachadas, veículos e objetos precisam ser conferidos na distância e no material reais. Estes esquemas mostram posição e orientação; não são arquivos para fabricação.
Use o nome completo em uma área contínua. Respeite bordas, emendas e fixações. Defina o tamanho pela distância de leitura; o mínimo de impressão não é medida de fachada.
Mantenha 6am legível da esquerda para a direita em ambos os lados. Espelhe o desenho do veículo, nunca o logo. Posicione a assinatura longe de maçanetas, rodas e divisões de painéis.
Mantenha o logo horizontal em totens e banners. Se a área não comportar o nome com leitura suficiente, reorganize a peça ou use o símbolo onde houver contexto. Não empilhe letras nem gire o logo por conta própria.
Reconheça o que enfraquece a marca.
Os exemplos abaixo mostram erros de propósito. Para produzir uma peça, use os arquivos do catálogo sem essas alterações.
Não estique
Escalone largura e altura juntas. Uma caixa estreita não justifica deformar a marca.
Não gire nem espelhe
Preserve a leitura horizontal. O lado do veículo ou o formato da peça não muda a orientação da marca.
Não invente cores
Use uma das variantes fornecidas. No lime, o 6 e am são pretos e os dois pontos brancos.
Não adicione efeitos
Evite contornos, sombras, brilhos e texturas. Resolva o contraste escolhendo o fundo e o arquivo corretos.
Não corte a assinatura
Mantenha o desenho completo e sua área livre. Para espaços compactos, consulte a seção do símbolo.
Design. Build. Grow.Não invada a área livre
Separe textos, linhas e outras marcas do logo. O subtítulo não deve virar parte da assinatura.
Antes de entregar.
- Confira o logo completo e os dois pontos no tamanho final, com a variante apropriada ao fundo.
- Verifique margens, área de proteção, corte e sobreposições da interface em cada formato.
- Use SVG para escala livre; em PNG ou WebP, exporte pixels suficientes para o tamanho de uso.
- Para impressão, confirme cores e acabamento com o fornecedor e faça prova no material. Os arquivos do catálogo são RGB.
- Uma nova orientação, versão monocromática ou composição com parceiros precisa ser definida como um ativo próprio antes de entrar em produção.
Orientações em piloto. Aplicações físicas, acabamentos, versões verticais e lockups com parceiros ainda precisam de desenvolvimento e validação. Não há autorização para espelhar ou remontar o logo.
Clareza vem primeiro.
Escreva como quem conversa com o dono da empresa. Cada tela precisa deixar claro o que fazer e o que acontece depois.
O lime tem um papel.
Use a cor de assinatura para destacar ações e momentos importantes. Preto, branco e grafite dão estrutura ao restante.
Consistência que evolui.
Reutilize componentes e regras. Uma nova necessidade deve melhorar o sistema compartilhado, com uma versão identificável.