Design system de e-mail

O design system guarda a aparência padrão dos elementos dos seus e-mails: fontes, cores, tamanho dos títulos, estilo dos botões, divisores e imagens. Todo bloco do builder que não tem estilo próprio segue esses valores. Quando a marca muda, você altera o design system e a OctaSend reaplica a nova aparência nos e-mails que o usam. Fica em Configurações → Design System. Qualquer usuário da conta com acesso ao painel pode criar, editar, importar e excluir design systems.

O design system vale só para o canal E-mail, e só para o corpo montado no Builder e para os cabeçalhos e rodapés. E-mails escritos em Texto simples não são afetados.

De onde vem a aparência de cada bloco

Cada valor de estilo é decidido na ordem abaixo. Vale o primeiro que estiver definido:

O estilo do próprio bloco, definido no painel do builder.
As Configurações do e-mail do template (fonte, cor do texto, largura, as duas cores de fundo e cor dos links), no painel do builder.
O design system do template: primeiro o valor do elemento (Texto, Títulos, Botão…), depois o da seção E-mail.
O padrão da OctaSend.

Por isso, um campo em branco no design system significa “usar o padrão da OctaSend”. Na tela, o valor que está valendo aparece no próprio campo vazio, indicado como (herdado) ou (herdada). No peso da fonte, ele aparece como a opção Herdado (Negrito) ou Herdado (Normal); no divisor, numa linha abaixo dos campos. O mesmo vale nas Configurações do e-mail do builder: largura, fundos e cor dos links mostram o valor herdado e, se você limpar o campo, o template volta a seguir o design system.

Para que um bloco acompanhe o design system, deixe o estilo dele em branco no builder. Se você definir uma cor ou fonte direto no bloco, ela vence o design system.

Os modelos prontos do editor de e-mail entram no template com as Configurações do e-mail em branco: a fonte, a cor do texto, a largura, os fundos e a cor dos links vêm do design system do template.

Criar e gerenciar design systems

A sua conta pode ter vários design systems, por exemplo um por marca ou um por linha de produto.

Dê um nome

Em Configurações → Design System, digite o nome no campo Novo design system (ex.: “Marca principal”).

Clique em Criar

O design system é criado e o editor abre em seguida. O nome precisa ser único na conta. Se já existir um com o mesmo nome, a tela avisa “Não foi possível criar. Verifique se já existe um com esse nome.”

Defina os valores e salve

Preencha só o que quiser mudar e clique em Salvar. Veja Editar um design system.

Na lista, cada design system mostra o nome, o selo Padrão (quando for o padrão da conta) e a data da Última importação (ou ”—”, se nunca foi importado). As ações de cada linha são:

Ação	O que faz
Estrela (Definir como padrão)	Torna esse design system o padrão da conta. Só aparece nos que ainda não são o padrão
Lápis (Editar)	Abre o editor
Lixeira (Excluir)	Exclui depois de uma confirmação

O design system padrão da conta

A conta tem no máximo um design system padrão. O primeiro que você cria já nasce como padrão. O padrão é usado:

pelos cabeçalhos e rodapés criados em Configurações → Templates de Email, que sempre seguem o padrão da conta;
por todo template de e-mail em que o campo Design system está como Padrão do tenant.

Ao trocar o padrão, a OctaSend reaplica o novo design system nesses e-mails e mostra quantos foram atualizados.

Excluir um design system

A confirmação avisa: “Os templates que o usavam voltam ao padrão do tenant.” Depois de confirmar, a OctaSend reaplica a aparência nos e-mails afetados, sem você precisar abrir e salvar cada um:

os templates que tinham escolhido esse design system passam a seguir o design system padrão da conta e são repintados com a marca dele;
se o excluído era o padrão e existem outros, o primeiro em ordem alfabética vira o novo padrão, e a tela avisa qual foi (ex.: “Design system excluído. “Marca B” agora é o padrão.”). Os cabeçalhos, os rodapés e os templates em Padrão do tenant também são repintados com o novo padrão;
se o excluído era o único, a conta fica sem design system, e os templates que o usavam, os templates em Padrão do tenant e os cabeçalhos e rodapés passam para a aparência padrão da OctaSend;
os elementos importados que pertenciam a ele continuam disponíveis em Meus elementos no builder.

A mensagem de sucesso traz o mesmo resumo do salvar: quantos e-mails foram atualizados e quais falharam. Como no salvar, ficam de fora os templates em Texto simples e os e-mails num formato antigo do editor. Se a exclusão falhar no meio, a OctaSend desfaz o que já tinha mudado: o design system continua existindo, volta a ser o padrão (se era) e os e-mails voltam à aparência dele. A tela avisa que nada foi excluído. Se nem isso for possível, o aviso pede que você confira qual é o padrão e salve o design system para repintar os e-mails.

Editar um design system

O editor tem, no topo, o nome do design system (clique para renomear) e os botões Voltar, Importar do Claude Design e Salvar. Ao lado dos campos fica a Pré-visualização, com um título, um parágrafo, um botão e um divisor de exemplo. Ela muda na hora, antes de salvar. As alterações só valem depois de Salvar. O botão fica desabilitado enquanto o nome estiver vazio.

Campos e valores padrão

Seção	Campo	Se ficar em branco
Texto	Fonte	Fonte da seção E-mail (Inter)
	Tamanho	14 px
	Altura da linha	1,5
	Cor do texto	Cor do texto da seção E-mail (#262626)
Títulos	Fonte	Fonte da seção E-mail (Inter)
	Cor	Cor do texto da seção E-mail (#262626)
	Peso da fonte	Negrito
	Nível 1 (H1) / Nível 2 (H2) / Nível 3 (H3)	32 px / 24 px / 18 px
Botão	Cor de fundo	#465FFF
	Cor do texto	#FFFFFF
	Fonte	Fonte da seção E-mail (Inter)
	Tamanho	14 px
	Raio	6 px
	Peso da fonte	Normal
Divisor	Espessura, Estilo (Sólida ou Tracejada) e Cor	1 px, sólida, #E5E7EB
Imagem	Raio da borda	Sem arredondamento
E-mail	Largura	600 px
	Cor de fundo do e-mail	#F5F5F5
	Cor de fundo do conteúdo	#FFFFFF
	Fonte	Inter
	Cor do texto	#262626
	Cor dos links	#465FFF

Regras dos campos:

Fonte: a lista traz fontes do Google Fonts, agrupadas em Sem serifa, Com serifa, Monoespaçada e Display, com busca pelo nome.
Divisor: estilo e cor só são aceitos com espessura maior que zero. Deixe a espessura em 0 para voltar a herdar o padrão.
Botão → Cor do texto nunca herda a cor do texto nem a cor dos links do e-mail, para não ficar ilegível sobre o fundo do botão.

Na seção E-mail, a Fonte e a Cor do texto servem de base para textos, títulos e (só a fonte) botões. A Largura, as duas cores de fundo e a Cor dos links valem no corpo dos templates montados no builder, a não ser que as Configurações do e-mail do template definam outro valor. A cor dos links vale para os links do texto e dos títulos; um link com cor própria continua com a sua.Templates que já existiam guardam os valores que tinham e continuam com a mesma aparência. Os cabeçalhos e rodapés não herdam o fundo do conteúdo: sem fundo próprio, ficam transparentes.

O que acontece ao salvar

Ao clicar em Salvar, o design system é gravado e a OctaSend reaplica a aparência nos e-mails que o usam. O botão mostra Repintando… enquanto isso acontece. São atualizados:

os templates em modo Builder que escolheram esse design system;
se ele for o padrão da conta, também os templates em modo Builder com Padrão do tenant e todos os cabeçalhos e rodapés;
o rascunho dos templates, além da versão publicada, seguindo o design system escolhido no próprio rascunho. Assim, publicar um rascunho depois não traz de volta a aparência antiga. Um rascunho salvo no editor enquanto a reaplicação rodava não é sobrescrito.

Ficam de fora os templates em Texto simples, os templates com Nenhum no campo Design system e os e-mails num formato antigo do editor, que são mantidos como estavam. No fim, uma mensagem resume o resultado, por exemplo “3 e-mail(s) atualizado(s) · 1 em formato antigo, mantido(s) como estava(m)”. Se algum e-mail falhar, ele aparece listado no fim da mensagem (ex.: Template (pt-BR), Rodapé "Institucional"), e a falha de um não impede os demais. Se a reaplicação inteira falhar, a tela avisa “Os tokens foram salvos, mas não foi possível repintar os e-mails.”

Escolher o design system de um template

Cada template de e-mail escolhe qual design system seguir. No editor do template (Comunicações → Templates, a comunicação, o canal E-mail e o idioma), com o corpo em Builder e nenhum bloco selecionado, o painel lateral mostra Configurações do e-mail e, abaixo, Header e rodapé. No modo Texto simples, os mesmos campos ficam num quadro abaixo do editor.

Opção do campo Design system	Comportamento
Padrão do tenant	Segue o padrão da conta e acompanha quando você troca o padrão. É a opção de todo template novo
Nenhum	Não usa design system. Os blocos sem estilo próprio seguem as Configurações do e-mail do template e, na falta delas, o padrão da OctaSend
Escolher design system…	Usa um design system específico. Na lista, o padrão aparece com “(padrão)”

A escolha vale depois de salvar o template. Veja também Comunicações.

Importar do Claude Design

Se a identidade visual foi criada no Claude Design (ou em outra ferramenta que exporte design tokens), você pode trazê-la de uma vez em vez de preencher campo a campo. No editor do design system, clique em Importar do Claude Design.

A importação substitui o design system inteiro. Todo campo que não vier no arquivo volta a herdar o padrão. O nome do design system não muda.

Escolha a origem

Envie um arquivo, cole o conteúdo de um tokens.json ou cole um link. Os formatos aceitos estão logo abaixo.

Confira a prévia

Antes de gravar qualquer coisa, a tela mostra uma tabela com Campo, Atual e Novo, só com o que muda (“herda do padrão” indica campo vazio). Se nada mudar, aparece “O arquivo é idêntico ao design system atual. Nada muda.” Quando os valores foram extraídos automaticamente de HTML ou convertidos de um arquivo de tokens, um aviso pede para conferir com atenção antes de confirmar.

Clique em Importar

O design system é gravado, a data de Última importação é atualizada e a aparência é reaplicada nos e-mails, como em O que acontece ao salvar. Para escolher outro arquivo, use Voltar; para desistir sem gravar nada, use Cancelar.

tokens.json (colado ou enviado)

Cole o conteúdo no campo de texto, ou envie o arquivo .json, e clique em Validar. O arquivo precisa seguir exatamente o formato abaixo. Todas as seções e quase todos os campos são opcionais, mas nomes de campo desconhecidos são recusados. A exceção é divider.border: se você informar o divisor, envie width, style e color juntos.

tokens.json

{
  "text": { "fontFamily": "Poppins", "fontSize": 15, "lineHeight": 1.6, "color": "#1F2937" },
  "heading": {
    "fontFamily": "Poppins",
    "color": "#111827",
    "fontWeight": "bold",
    "sizes": { "1": 32, "2": 24, "3": 18 }
  },
  "button": {
    "backgroundColor": "#E11D48",
    "color": "#FFFFFF",
    "fontFamily": "Poppins",
    "fontSize": 14,
    "fontWeight": "bold",
    "borderRadius": 8
  },
  "divider": { "border": { "width": 1, "style": "solid", "color": "#E5E7EB" } },
  "image": { "borderRadius": 8 },
  "email": {
    "width": 600,
    "backgroundColor": "#F5F5F5",
    "contentBackgroundColor": "#FFFFFF",
    "fontFamily": "Poppins",
    "textColor": "#1F2937",
    "linkColor": "#E11D48"
  }
}

Tamanhos, larguras e raios são números em pixels, sem unidade.
fontWeight aceita normal ou bold.
divider.border.style aceita solid ou dashed.

Se o conteúdo não for JSON, a tela avisa “O conteúdo não é um JSON válido.” Se algum campo estiver errado, cada problema aparece com o caminho do campo (ex.: button.fontWeight: ...).

Arquivo .html exportado

Envie o .html exportado do Claude Design (ex.: design.dc.html). A OctaSend lê as regras de CSS da página e tenta reconhecer os valores de cada elemento. É uma extração de melhor esforço: confira a prévia antes de confirmar. Se nada for reconhecido, a tela avisa “Não foi possível reconhecer nenhum valor de design no HTML ou CSS exportado.”

Arquivo .zip (Project archive)

Envie o .zip exportado do Claude Design. A OctaSend procura, nesta ordem:

um arquivo tokens.json, em qualquer pasta do zip. Se existir, ele é a fonte e precisa estar no formato acima;
um arquivo de design tokens no padrão DTCG (nome terminado em .tokens.json), que é convertido automaticamente;
os arquivos .html e .css do zip, com a mesma extração de melhor esforço do arquivo .html.

Se o tokens.json ou o arquivo DTCG tiver problema, a importação para ali e mostra o erro, sem tentar o passo seguinte. Um zip que não abre mostra “Não foi possível abrir o arquivo. Confira se o .zip não ficou incompleto no download.” Um zip sem nada aproveitável mostra “O zip não contém um tokens.json nem arquivos HTML/CSS reconhecíveis.”

Link

Em Cole um Link do Claude Design, informe o endereço e clique em Salvar e Importar. A OctaSend lê a página e extrai os valores do HTML, como no arquivo .html. O link fica salvo no design system quando você confirma a importação.Com um link salvo, o diálogo mostra Link salvo e os botões Atualizar Layout (lê a página de novo) e Trocar Link. As regras da leitura estão em Leitura por link.

Elementos do design system

Além dos valores de estilo, um design system pode guardar elementos: trechos de e-mail prontos (um cartão de pedido, uma assinatura, um bloco de destaque) que você insere no builder com um clique.

Gerar elementos a partir do export do Claude Design

Logo depois de importar um export do Claude Design em .dc.html, aparece o botão Identificar elementos no editor. Vale para o arquivo enviado direto (reconhecido pelo conteúdo, mesmo que tenha sido renomeado, como design.html), para o que vem dentro do .zip e também para a importação por link, quando a página lida é um export .dc.html.

O botão aparece só depois que a importação é gravada e segue sempre a última importação que deu certo: se a importação seguinte não trouxer um export .dc.html, ele some. Se você sair do editor ou recarregar a página, ele também some: para gerar os elementos depois, importe o arquivo ou o link de novo.

Revise a lista

A tela mostra os elementos encontrados no arquivo, com código e descrição, todos marcados. Desmarque os que não quiser. Se o arquivo não tiver elementos reconhecíveis, a lista vem vazia.

Gere os selecionados

Clique em Gerar N elemento(s) selecionado(s). Um a um, a IA limpa o HTML, troca o conteúdo de exemplo por texto genérico (ex.: “Nome do cliente”, “R$ 0,00”) e preserva a estrutura, as cores e as fontes. A falha de um elemento não interrompe os demais.

Confira o resultado

No fim, a tela lista o que foi gerado e o que falhou, com o motivo. Os gerados aparecem na hora em Elementos Importados deste design system e em Meus elementos, no builder de e-mail, sem precisar recarregar a página.

A geração usa IA e entra no consumo de IA da sua conta. Se o limite de uso de IA for atingido, o elemento falha com “Limite de tokens de IA atingido. Contate o administrador para aumentar o limite.”

Gerenciar os elementos

A seção Elementos Importados do editor lista os elementos deste design system. Em cada um você pode:

editar o conteúdo direto na lista. A alteração é salva quando você sai do campo;
Exportar, que baixa um .json com o nome e o HTML do elemento;
Deletar, depois de uma confirmação.

Para trazer elementos de outro design system, ou de outra conta, use Importar Elementos e envie um .json exportado. O arquivo pode ter um elemento ou uma lista:

elementos.json

[
  { "name": "Cartão de pedido", "html": "<table role=\"presentation\">...</table>" },
  { "name": "Assinatura", "html": "<p>Equipe <strong>Sua Marca</strong></p>" }
]

Cada item precisa de name (não vazio) e html. Se algum não tiver, nada é importado e a tela diz quantos itens são inválidos.
O elemento é sempre ligado ao design system que está aberto, mesmo que o arquivo indique outro.
Um elemento com o mesmo nome de um que já existe neste design system substitui o existente. A prévia marca esses casos com já existe antes de você confirmar.

Usar um elemento no e-mail

No builder, a seção Meus elementos do painel da esquerda lista os elementos de todos os design systems da conta. Clique em um para adicioná-lo ao fim do e-mail, numa linha nova.

Elementos e layouts importados entram no e-mail como bloco HTML, que mantém o próprio estilo. O design system não reestiliza o conteúdo de um bloco HTML.

Leitura por link

A mesma leitura por link serve para importar um design system e para importar o layout do corpo de um template (veja Comunicações). As regras são:

O endereço precisa começar com http:// ou https:// e ser público. Endereços de rede interna são recusados com “Informe um link http(s) público válido”.
Serve qualquer página pública, não só o Claude Design.
A página precisa responder em até 10 segundos. Passado esse tempo, aparece “Timeout ao buscar (demorou mais de 10s)”.
A resposta precisa ser uma página HTML. Caso contrário, aparece “Arquivo deve ser HTML”.
Páginas montadas por JavaScript no navegador (sites em React, Vue e similares) respondem sem o conteúdo e são recusadas. Nesse caso, abra a página, copie o HTML já renderizado e envie como arquivo ou, no template, cole no campo Ou cole o HTML.
Designs privados do Claude Design são lidos quando a sua conta tem um sessionKey salvo em Configurações → Claude Design (veja Configurações). Use o link https://. Sem sessionKey, ou com um sessionKey vencido, o acesso é recusado com “O Claude Design recusou o acesso (sessionKey ausente, invalido ou expirado)”. Nesse caso, peça a um usuário MASTER para salvar um sessionKey novo, ou exporte o arquivo no Claude Design e use o upload.
Outras páginas que exigem login continuam recusando o acesso: exporte ou salve o HTML e use o upload.

Para saber se um link pode ser lido antes de importar, use o quadro Testar a conexão em Configurações → Claude Design: cole o link (do Claude Design ou de qualquer site) e clique em Testar conexão. Se a leitura funcionar, aparece “Conexão funcionando: o layout foi lido (N caracteres).”; se não, aparece o mesmo erro que a importação mostraria. O teste só lê a página: não importa nem grava nada.

Comunicações

Editor de e-mail, builder, importação de layout e status da integração

Guia de e-mail

Remetente, cabeçalho e rodapé dos e-mails

Primeiros Passos

Mensageria

Guias de Canais

Atendimento e IA

Site e engajamento

E-commerce

Integrações

Conta e ferramentas

API Reference

Design system de e-mail

De onde vem a aparência de cada bloco

Criar e gerenciar design systems

O design system padrão da conta

Excluir um design system

Editar um design system

Campos e valores padrão

O que acontece ao salvar

Escolher o design system de um template

Importar do Claude Design

Elementos do design system

Gerar elementos a partir do export do Claude Design

Gerenciar os elementos

Usar um elemento no e-mail

Leitura por link

Comunicações

Guia de e-mail

​De onde vem a aparência de cada bloco

​Criar e gerenciar design systems

​O design system padrão da conta

​Excluir um design system

​Editar um design system

​Campos e valores padrão

​O que acontece ao salvar

​Escolher o design system de um template

​Importar do Claude Design

​Elementos do design system

​Gerar elementos a partir do export do Claude Design

​Gerenciar os elementos

​Usar um elemento no e-mail

​Leitura por link

Comunicações

Guia de e-mail

De onde vem a aparência de cada bloco

Criar e gerenciar design systems

O design system padrão da conta

Excluir um design system

Editar um design system

Campos e valores padrão

O que acontece ao salvar

Escolher o design system de um template

Importar do Claude Design

Elementos do design system

Gerar elementos a partir do export do Claude Design

Gerenciar os elementos

Usar um elemento no e-mail

Leitura por link