> ## Documentation Index > Fetch the complete documentation index at: https://docs.octasend.com.br/llms.txt > Use this file to discover all available pages before exploring further. # Design system de e-mail > Defina a aparência padrão dos seus e-mails, importe a identidade visual do Claude Design e reaproveite elementos prontos no builder 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. > [!NOTE] > > 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: 1. **O estilo do próprio bloco**, definido no painel do builder. 2. **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. 3. **O design system do template**: primeiro o valor do elemento (Texto, Títulos, Botão...), depois o da seção **E-mail**. 4. **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. > [!TIP] > > 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. **1. Dê um nome** Em **Configurações → Design System**, digite o nome no campo **Novo design system** (ex.: "Marca principal"). **2. 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." **3. Defina os valores e salve** Preencha só o que quiser mudar e clique em **Salvar**. Veja [Editar um design system](#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. > [!NOTE] > > 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](https://docs.octasend.com.br/plataforma/comunicacoes.md). ## 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**. > [!WARNING] > > 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. **1. 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. **2. 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. **3. 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](#o-que-acontece-ao-salvar). Para escolher outro arquivo, use **Voltar**; para desistir sem gravar nada, use **Cancelar**. > [accordion] 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. > > ```json tokens.json theme={null} > { > "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: ...`). > [accordion] 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." > [accordion] Arquivo .zip (Project archive) > > Envie o `.zip` exportado do Claude Design. A OctaSend procura, nesta ordem: > > 1. um arquivo `tokens.json`, em qualquer pasta do zip. Se existir, ele é a fonte e precisa estar no formato acima; > 2. um arquivo de design tokens no padrão DTCG (nome terminado em `.tokens.json`), que é convertido automaticamente; > 3. 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." > [accordion] 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](#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`. > [!NOTE] > > 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. **1. 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. **2. 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. **3. 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. > [!NOTE] > > 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: ```json elementos.json theme={null} [ { "name": "Cartão de pedido", "html": "...
" }, { "name": "Assinatura", "html": "

Equipe Sua Marca

" } ] ``` * 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. > [!NOTE] > > 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](https://docs.octasend.com.br/plataforma/comunicacoes.md)). 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](https://docs.octasend.com.br/plataforma/configuracoes.md)). 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. > [!TIP] > > 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. > [card] [Comunicações](https://docs.octasend.com.br/plataforma/comunicacoes.md) > > Editor de e-mail, builder, importação de layout e status da integração > [card] [Guia de e-mail](https://docs.octasend.com.br/guias/email.md) > > Remetente, cabeçalho e rodapé dos e-mails This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.