Pular para o conteúdo
PTEN

Tema e design padrão

As cores, o fundo e as fontes de todos os seus links, e o design com que seus orçamentos são enviados.

Este recurso é novo e pode ainda não estar habilitado na sua conta. Se você não o vir, fale com a gente.

O que é

A tela Design do orçamento reúne duas decisões da empresa:

  • O tema: como fica o link de todos os seus orçamentos. Parte da sua marca de Identidade (logo, cores e tipografia) e permite ir além: layout da página, fundo, fontes de um catálogo de 20 famílias, cantos, sombra e movimento.
  • O design padrão: com qual design saem os orçamentos que não têm um próprio nem outro escolhido no editor deles.

Requisitos

  • A permissão Configurações na sua função.
  • O Cord Studio habilitado na sua conta.

Abrir o design do orçamento

  1. Abra Configurações › Marca e aparência › Identidade.
  2. No fim da página, clique em Criar o design do orçamento: página web, documento ou cartão.
  3. Ajuste o tema à esquerda. A prévia da direita, Como seu cliente vê, é o seu orçamento com cada mudança, em Desktop ou Celular.
  4. Clique em Salvar alterações (ou ⌘S / Ctrl+S). Até você salvar, seus links não mudam.

Temas prontos

Um ponto de partida; depois ajuste o que quiser. Escolher um muda de uma vez o layout da página, as cores, o fundo, as fontes e a forma.

Tema Como fica
Editorial Documento de largura ampla sobre fundo creme, títulos em Fraunces e texto em Lora.
Estúdio Página web de largura ampla com degradê lilás, Plus Jakarta Sans e botões arredondados.
Boutique Cartão de largura média com degradê radial, títulos em Cormorant Garamond e texto em DM Sans.
Minimal Cartão branco sem sombra nem movimento, tudo em Inter.
Técnico Documento sobre cinza-azulado, títulos em Space Grotesk e texto em IBM Plex Mono.
Floresta Página web com degradê verde, títulos em Instrument Serif e texto em Figtree.
Sua marca Volta à sua marca de Identidade, sem nada do que está acima.

Layout da página e largura

  • Cartão: o orçamento em um cartão centralizado, como sempre.
  • Documento: uma folha com margens de página e cantos quase retos, com o cabeçalho em toda a largura sobre a sua cor principal.
  • Página web: sem cartão. O cabeçalho é uma capa em toda a largura sobre a sua cor principal e cada seção é um painel sobre o fundo da página.

Em Documento e Página web, sobre a cor vai o seu logo para fundo escuro. Se você enviou um logo, mas não o de fundo escuro, o cabeçalho é pintado com um tom claro da sua marca para que o seu logo fique legível. A Largura pode ser Estreita, Média, Ampla ou Total.

Cores e fundo

  • Cores: Principal, Destaque, Superfície (o fundo do orçamento) e Texto.
  • Fundo da página: Sólido, com uma cor; Degradê, com as cores De e Até, forma Linear ou Radial e o seu Ângulo, ou Imagem ou Vídeo, com Escolher na sua biblioteca.

O total é pintado com a sua cor principal. Se essa cor não fica legível sobre a superfície, o Cord o pinta com a cor do texto.

Fundo com imagem ou vídeo

A imagem ou o vídeo vêm da sua biblioteca de mídia, que você enche pelo editor visual ou pelo próprio seletor. Com um escolhido, você ajusta:

  • Posição: o centro, em cima, embaixo, à esquerda, à direita ou um dos quatro cantos.
  • Tom e Intensidade do tom: uma cor sobre a imagem.
  • Opacidade e Desfoque (até 40 px).
  • O texto por cima fica sobre um cartão.

O que o Cord cuida:

  • O texto sempre fica legível. O texto que vai direto sobre a imagem fica branco ou preto conforme o tom, com contraste de pelo menos 4,5 para 1 medido contra o pixel menos favorável de qualquer foto. Se o tom não basta, o editor visual marca isso para revisar e, no link, o Cord coloca esse texto sobre um cartão.
  • Os blocos do Cord nunca ficam sobre a foto. O total, os itens, a aprovação e os demais são sempre lidos sobre a sua superfície sólida.
  • O vídeo toca sem som e em loop, e começa quando aparece na tela. Se quem lê pediu ao sistema menos movimento ou ativou a economia de dados, ele fica parado na capa. Na impressão, o vídeo não aparece.
  • Um design pode ter o próprio fundo, pela aba Tema do editor: é o fundo do link inteiro e substitui o do tema.

Tipografia

Escolha uma família para Títulos e valores e outra para Texto, e o Peso dos títulos (de 400 a 800). O catálogo tem 20 famílias, agrupadas em Sem serifa, Com serifa e Monoespaçada:

  • Sem serifa: Inter, Manrope, DM Sans, Plus Jakarta Sans, Space Grotesk, Sora, Outfit, Figtree, Bricolage Grotesque e Archivo.
  • Com serifa: Fraunces, Playfair Display, Cormorant Garamond, Lora, EB Garamond, Instrument Serif, DM Serif Display e Young Serif.
  • Monoespaçada: JetBrains Mono e IBM Plex Mono.

O Cord serve essas fontes a partir dos próprios servidores: seu cliente não baixa nada de terceiros.

Forma e movimento

  • Cantos (de 0 a 40 px) e Botões (de 0 a 48 px): quão arredondados eles são.
  • Espaçamento: Compacto, Confortável ou Amplo.
  • Sombra: Sem sombra, Suave, Média ou Marcada.
  • Movimento: Nenhum, Sutil ou Expressivo. Quem pediu ao sistema menos movimento vê o orçamento parado.

Design padrão

No topo da tela, Design padrão escolhe com qual design saem os orçamentos que não têm um próprio nem outro escolhido no editor deles:

  • Cartão da Cord: o design de sempre, sem blocos próprios.
  • Um dos seus designs: a lista mostra os que você criou em Seus designs.

A mudança é salva na hora e diz Salvo; não precisa de Salvar alterações. Ver seus designs abre Orçamentos › Designs.

  • O tema se aplica a todos os seus links de orçamento, também aos já enviados, assim que você o salva. Um design pode mudá-lo só para ele pela aba Tema do editor.
  • O design padrão se aplica aos orçamentos que você enviar a partir de agora. Os que você já enviou mantêm o design com que saíram. Com o plano Profissional, um orçamento pode sair com outro design, escolhido no editor dele ou próprio: veja Crie o design de um único orçamento.
  • O tema também chega à sua página de pagamento, às suas faturas, ao portal do cliente, aos documentos incorporados no seu site, aos e-mails e aos PDFs. A próxima seção explica como.

Onde mais o tema aparece

O tema também veste o que o seu cliente recebe depois do orçamento. Ali se aplicam as suas cores, o fundo, as fontes e a forma, mas não o layout da página nem os blocos: cada documento mantém a sua ordem.

Onde O que usa do tema
Página de pagamento do orçamento Tipografia, cantos e cores, também no formulário do cartão.
Fatura e portal do cliente Cores, fundo da página, fontes, cantos, espaçamento, largura e movimento.
Gerador de orçamentos e fatura incorporados no seu site Cores, fontes e forma. O que o seu site definir com a aparência do Cord Elements prevalece sobre o tema.
E-mail do orçamento e da fatura Cores e a fonte de e-mail mais próxima da sua, porque os programas de e-mail não carregam fontes próprias.
PDF da fatura e orçamento impresso Cores sobre folha branca e a fonte padrão mais próxima: sem serifa, com serifa ou monoespaçada.
  • A parte fiscal não muda de lugar. O número, os impostos, os selos, o aviso de fatura pró-forma e os dados do emitente e do destinatário ficam onde estão. Se uma cor de texto não fica legível sobre a sua superfície, o Cord a escurece ou clareia o necessário.
  • Ao imprimir, a folha sai clara mesmo que o seu tema seja escuro.
  • Na fatura eletrônica Factur-X, uma fonte monoespaçada sai sem serifa.

Mensagens das suas faturas

No fim da tela, Faturas e portal guarda dois textos de até 280 caracteres:

  • Mensagem de cabeçalho: aparece abaixo da sua marca na fatura e no portal.
  • Mensagem de agradecimento: aparece no rodapé da fatura e do portal.

São salvos com Salvar alterações. Se você deixar um vazio, nada é exibido.

Problemas comuns

  • Não vejo o link Criar o design do orçamento. O Cord Studio ainda não está habilitado na sua conta, ou a sua função não tem a permissão Configurações.
  • “Não foi possível salvar o design: revise os valores e tente de novo.” Um valor ficou fora do permitido. Escolha-o de novo e salve outra vez.
  • Mudei o tema e um orçamento não mudou. O design dele mudou o tema só para ele. Abra-o no editor, aba Tema.
  • O total não sai com a minha cor. Sua cor principal não fica legível sobre a superfície. Escureça-a ou mude a superfície.
  • O texto da minha fatura não tem a cor que escolhi. O Cord ajusta essa cor para que o número, os impostos e os dados fiscais fiquem legíveis sobre a sua superfície. Escolha uma cor de texto com mais contraste.

Páginas relacionadas