v1.2
Manuais/Email Marketing
03.09 — Manual · Email Marketing

EMAIL MARKETING.

E-mail tem constraints únicos: sem web fonts, sem CSS externo, sem JavaScript. A identidade Dark n' Black se mantém via cores, estrutura e uso estratégico de atributos HTML inline.

Especificações técnicas: Largura máxima 600px · HTML com CSS inline · Sem web fonts (fallback Arial/sans-serif) · Todas as imagens com alt text · Testado em Gmail, Outlook, Apple Mail

Estrutura do Template
#
Bloco
Altura
Conteúdo
Regra crítica
01
Preheader
—
Texto invisível no template (aparece no preview do cliente de e-mail). Complementa o assunto. Máx. 90 caracteres.
Não deixar vazio — clientes de e-mail preenchem com texto aleatório do corpo.
02
Header
80–100px
Logo centralizado ou alinhado à esquerda. Fundo preto. Altura fixa.
Logo máx. 200px de largura. Sempre com alt text.
03
Hero
200–280px
Imagem ou bloco de cor com título principal. Fundo preto, título Bebas Neue, destaque gold.
Toda imagem com alt text. Considerar que 50%+ abre com imagens bloqueadas.
04
Corpo
Variável
Texto principal em Arial/sans-serif 16px. Parágrafos curtos, máx. 3 linhas por bloco.
Web fonts NÃO são confiáveis em e-mail — use Arial como fallback principal.
05
CTA
48px
Botão com bgcolor="#c8a44e" (não apenas CSS). Texto em negrito, cor #000000.
Sempre usar atributo bgcolor no <td> — CSS background falha em Gmail.
06
Footer
120–160px
Endereço físico (obrigatório por lei), link de descadastro, redes sociais.
Link de unsubscribe obrigatório (CAN-SPAM / LGPD). Texto muted em 12px.
Cores — Valores Inline
Uso
Valor hex
Observação
Background externo
#000000
Área fora do e-mail em clientes dark
Background do e-mail
#0a0a0a
Corpo do e-mail (--black-rich)
Background de seção
#111111
Alternância de blocos
Texto principal
#f0ece4
Atenção: fallback para #ffffff em clientes problemáticos
Texto secundário
#b0b0b0
Descrições, subtítulos
Acento gold
#c8a44e
Botões, links, destaques — via bgcolor attr
Bordas
#222222
Separadores entre blocos
Código — Estrutura Base
Estrutura HTML base — 600px, dark mode
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Dark n' Black</title>
  <!-- Preheader invisível -->
  <div style="display:none;max-height:0;overflow:hidden;">
    Texto de preview aqui — complementa o assunto. Máx. 90 chars.
  </div>
</head>
<body style="margin:0;padding:0;background-color:#000000;">
  <table width="100%" cellpadding="0" cellspacing="0" border="0"
         style="background-color:#000000;">
    <tr>
      <td align="center" style="padding:24px 16px;">
        <!-- Container principal 600px -->
        <table width="600" cellpadding="0" cellspacing="0" border="0"
               style="background-color:#0a0a0a;border:1px solid #222222;">
          <!-- Header -->
          <tr>
            <td style="padding:24px;border-bottom:1px solid #222222;">
              <img src="logo.png" alt="Dark n' Black" width="160"
                   style="display:block;">
            </td>
          </tr>
          <!-- Corpo -->
          <tr>
            <td style="padding:32px 40px;">
              <h1 style="font-family:Arial,sans-serif;font-size:32px;
                          font-weight:700;color:#f0ece4;margin:0 0 16px;
                          text-transform:uppercase;letter-spacing:2px;">
                TÍTULO DO EMAIL
              </h1>
              <p style="font-family:Arial,sans-serif;font-size:16px;
                         color:#b0b0b0;line-height:1.7;margin:0 0 24px;">
                Corpo do email aqui.
              </p>
              <!-- Botão CTA — bgcolor obrigatório (Gmail ignora CSS background) -->
              <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td bgcolor="#c8a44e" style="padding:12px 28px;">
                    <a href="https://seusite.com.br"
                       style="font-family:Arial,sans-serif;font-size:14px;
                               font-weight:700;color:#000000;
                               text-decoration:none;
                               text-transform:uppercase;letter-spacing:2px;">
                      ACESSAR AGORA
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td style="padding:24px 40px;border-top:1px solid #222222;
                        background-color:#111111;">
              <p style="font-family:Arial,sans-serif;font-size:12px;
                         color:#444444;line-height:1.6;margin:0;">
                Dark n' Black · Rua Exemplo, 123 · São Paulo, SP<br>
                <a href="#" style="color:#c8a44e;text-decoration:none;">
                  Descadastrar
                </a>
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
Tipografia em e-mail — stacks seguras
/* Bebas Neue não carrega em e-mail — use estas stacks */

/* Display / Título — peso visual máximo disponível */
font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;

/* Corpo de texto */
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;

/* Mono / Labels */
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;

Sempre bgcolor no botão CTA. Gmail ignora background via CSS em elementos inline. Use bgcolor="#c8a44e" no atributo HTML da tabela que envolve o botão.

Sem CSS externo nem web fonts. Tudo inline — style="..." em cada elemento. Google Fonts não carrega em clientes de e-mail. Use Arial como substituto de DM Sans.

Teste no Litmus ou Mail Tester. O que funciona no Chrome não funciona no Outlook 2019. Teste em ao menos 3 clientes antes de disparar: Gmail, Outlook, Apple Mail.

Nunca esqueça o unsubscribe. LGPD exige link de descadastro em todo disparo comercial. Coloque no footer em texto legível — não em branco sobre branco.

← AnteriorLinkedInPróximo →YouTube Thumbnails