Digital AI

Identidade Visual

v1 12 de junho de 2026
↓ Download Ver Assets
01 / Logo System

Variantes do Logo

Todas as variantes aprovadas para uso em diferentes contextos e fundos. Clique para baixar ou copiar a URL CDN.

Como usar cada variante

Logo Primary

Primária

Use em fundos brancos e tons claros. É a versão padrão para materiais impressos, apresentações e interfaces digitais com fundo claro.

  • Documentos e apresentações
  • Fundos brancos e cinzas claros
  • Email marketing
  • Interface de produto (light mode)
Logo White

Negativa / Branca

Use em fundos escuros, fotografias com fundo escuro e materiais onde a versão primária não teria contraste suficiente.

  • Fundos escuros e dark mode
  • Sobre fotografias escuras
  • Rodapé de sites
  • Brindes e merchandising escuro
Logo Profundidade

Profundidade

Versão especial com elemento visual de profundidade. Use em contextos de destaque onde a marca deve ter impacto visual máximo.

  • Capas de apresentações
  • Materiais de alto impacto
  • Fundos com gradiente
  • Conteúdo premium e editorial
Logo Symbol

Símbolo / Ícone

Use quando o espaço é restrito ou a marca já é conhecida no contexto. Ideal para avatares, favicons e espaços quadrados.

  • Foto de perfil e avatares
  • Favicon do site
  • App icon
  • Espaços muito pequenos (<120px)

❌ Não faça

🔄Rotacionar a logo
↔️Distorcer proporções
🎨Alterar as cores
🌫️Usar com opacidade reduzida
📦Adicionar sombras ou efeitos
✏️Redigitar o texto manualmente
02 / Paleta de Cores

Cores da Marca

Cada cor com seus valores exatos. Clique em qualquer swatch para copiar o valor hexadecimal.

⚡ Verificador de Contraste WCAG

— Calculando...
Texto Grande (18pt / 14pt bold)Texto normal — exemplo de leitura com este par de cores.
03 / Tipografia

Sistema Tipografico

Fontes selecionadas para titulos e texto corrido. Carregadas via Google Fonts para garantir consistencia cross-platform.

Heading Plus Jakarta Sans
O crescimento tem metodo.
Body DM Sans
A identidade visual e o primeiro contato entre a marca e seu publico. Cada detalhe — das cores a tipografia, do espacamento ao contraste — comunica valores, posicionamento e profissionalismo. Uma identidade consistente constroi confianca e diferenciacao no mercado.
04 / Social Kit

Templates Sociais

Covers prontas para uso nas principais plataformas. Dimensoes otimizadas conforme especificacao de cada rede.

05 / Design Tokens

Tokens de Design

Variaveis de design exportaveis para CSS e JSON. Integre diretamente no seu codigo.

tokens.css
Download 
/* Loading tokens... */
tokens.json
Download 
/* Loading tokens... */
06 / Documentacao

Documentos da Marca

Manuais e apresentacoes com todas as regras de uso da identidade visual.

Brand Manual

Guia completo com regras de uso do logo, paleta, tipografia e aplicacoes.

Download

Apresentacao

Deck interativo apresentando a identidade visual completa da marca.

Download
07 / Assinatura de Email

Assinatura de Email

Template HTML para assinatura de email corporativo. Compatível com Gmail, Outlook, Apple Mail. Copie o código e configure no seu cliente de email.

Edite os campos acima — o preview atualiza em tempo real ↓
Preview — Assinatura corporativa

— Corpo do email aqui —

Preview renderizado com dados de exemplo. Edite o código HTML para personalizar nome, cargo e contatos.

email-signature.html
Download 
Carregando código...
Guia de instalação

Gmail

  1. Abra Gmail → ⚙️ → Ver todas as configurações
  2. Aba Geral → role até Assinatura
  3. Clique em Criar nova
  4. No editor, clique em <> (código-fonte)
  5. Cole o HTML copiado da aba "Código HTML"
  6. Clique em Ok → Salvar alterações

Outlook

  1. Arquivo → Opções → Email → Assinaturas
  2. Clique em Novo e nomeie a assinatura
  3. No editor, clique em Editar no HTML
  4. Cole o código HTML da aba "Código HTML"
  5. Clique em OK e salve
  6. Selecione a assinatura padrão para novos emails

Apple Mail

  1. Salve o HTML como arquivo .html
  2. Abra o Terminal: open ~/Library/Mail/V10/MailData/Signatures/
  3. Copie o arquivo .html para a pasta
  4. Em Mail → Preferências → Assinaturas
  5. Crie nova assinatura e cole o HTML no campo

⚡ Personalizar a assinatura

No código HTML, substitua os seguintes campos:

  • SEU NOME COMPLETO → seu nome
  • Seu Cargo → seu cargo
  • +55 (64) 9XXXX-XXXX → seu telefone
  • [email protected] → seu email
08 / Design System

Design System

Tokens W3C DTCG, biblioteca de componentes, tipografia, espaçamento, motion e acessibilidade — sistema completo aplicado com a identidade visual da Digital AI.

Identidade Visual
Tipografia Principal Plus Jakarta Sans
Tipografia Secundária DM Sans
Marca Digital AI

Component Library

Todos os componentes com variantes, estados (hover, active, disabled, loading), dark mode e acessibilidade WCAG 2.2. Botões, inputs, badges, alertas, cards, tabelas e mais.

Explorar Componentes →

Design Tokens

Tokens primitivos, semânticos e por componente no formato W3C DTCG. Referência completa de cores, tipografia, espaçamento, sombras, z-index, opacidade e border-radius.

Ver Tokens →

Visão Geral Interativa

Explorador interativo com paleta de cores, escala tipográfica, espaçamento, componentes base, sistema de motion e tokens CSS — tudo em uma tela.

Abrir Visão Geral →

⬇ Exportar Tokens

CSS Variables JSON Primitivo (W3C DTCG) JSON Semântico JSON Componentes Dark Mode High Contrast
Motion Sistema de Animação
Download
Layout Grid & Tipografia Fluida
Grid CSS Typography CSS
Acessibilidade Relatório WCAG 2.2
Conteúdo Guia de Voz & Tom
09 / Download Center

Todos os Arquivos

Acesso direto a todos os assets da identidade visual. Baixe individualmente ou o pacote completo.

↓ Download ZIP Completo
ArquivoCategoriaTipoAcoes