# Artes para Cyber Monday: um visual para a promoção só online

[Canonical HTML page](https://gradiently.design/pt-br/guide/cyber-monday-graphics)

A Cyber Monday acontece quase toda em telas, caixas de entrada e páginas de checkout. As artes dela têm uma função diferente das da Black Friday e merecem um visual próprio, mais frio.

## The short version

- Artes de Cyber Monday funcionam melhor com uma paleta fria e digital, claramente ligada ao seu visual de Black Friday, mas visivelmente diferente dele.
- Como a Cyber Monday é uma promoção online, o banner do site e o cabeçalho do e-mail importam tanto quanto os posts nas redes.
- Toda arte de Cyber Monday deve levar a uma única ação, geralmente um link, e dizer com clareza quando a oferta termina.
- Um banner estreito no site precisa de uma única linha curta, porque é lido em menos de um segundo no caminho para outra coisa.
- Azuis elétricos, cianos e violetas sobre um fundo quase preto parecem digitais sem precisar de padrões de circuito ou efeitos glitch.

As melhores **artes para Cyber Monday** parecem inconfundivelmente digitais e apontam para algum lugar: uma paleta fria e elétrica sobre um fundo escuro, uma linha curta e um link. A Cyber Monday é a promoção online, então o trabalho não se resume a posts. É o banner no topo do seu site, o cabeçalho do e-mail que chega naquela manhã e a prévia do link que as pessoas veem quando compartilham. Faça tudo a partir de um só visual e o dia parece um evento, não uma repetição da sexta-feira.

## Como a Cyber Monday se diferencia da Black Friday

A Black Friday começou como um dia de lojas físicas, e o visual dela ainda pega emprestado das vitrines: cores quentes, placas grandes. A Cyber Monday ganhou o nome por causa das compras online, e a maior parte das artes dela é vista num celular um segundo antes de alguém tocar. Isso muda três coisas.

### Black Friday

- Fundos quentes, dourado e brasa
- Construída em torno do anúncio
- Posts no feed e stories na frente
- Pode durar vários dias

### Cyber Monday

- Fundos frios, azul elétrico e ciano
- Construída em torno do clique
- E-mail, banner do site e prévias de link na frente
- Geralmente um dia, então a urgência é real

Se você fez uma sequência de Black Friday, mantenha a tipografia, o layout e o tom de voz e mude a temperatura. As pessoas devem reconhecer você na hora e ainda perceber que algo novo começou. [Posts de Black Friday para redes sociais](https://gradiently.design/pt-br/guide/black-friday-post-ideas) prepara essa primeira metade.

## Cores e paletas para Cyber Monday

Digital não precisa de placas de circuito, efeitos glitch ou código binário no fundo. A cor resolve sozinha. Uma luz que parece vir de uma tela, em azul, ciano ou violeta, contra um fundo cor de tinta profundo, parece online na hora. Mantenha um único destaque e deixe o resto escuro.

- Azul de tela: `radial-gradient(circle at 70% 25%, #38bdf8 0%, #0c4a6e 38%, #050b14 78%)`
- Brilho ciano: `radial-gradient(circle at 25% 70%, #22d3ee 0%, #164e63 40%, #04101a 80%)`
- Índigo a ciano: `linear-gradient(135deg, #0b1026 0%, #3730a3 50%, #22d3ee 100%)`
- Violeta elétrico: `radial-gradient(circle at 80% 80%, #a855f7 0%, #3b0764 40%, #0a0614 80%)`

Quatro fundos de Cyber Monday. Cada um combina uma base quase preta com uma cor de luz de tela.

- Tinta: #050b14
- Azul profundo: #0c4a6e
- Azul de tela: #38bdf8
- Texto gelo: #e0f2fe
- Dourado de sexta: #d4a24c

Uma paleta que dá continuidade à Black Friday: o destaque dourado fica, usado pequeno, enquanto o fundo vira azul.

O neon fica empolgante num celular escuro e horrível quando vibra contra si mesmo. [Gradientes neon](https://gradiently.design/pt-br/guide/neon-gradients) mostra como manter cores vivas limpas, e [paletas de cores cyberpunk](https://gradiently.design/pt-br/guide/cyberpunk-colors) vai além, se a sua marca aguentar.

## Banner de Cyber Monday para o seu site

Um banner de site é lido no caminho para outra coisa, então ganha uma linha curta e um prazo. A faixa fina acima da navegação é a versão menos invasiva e funciona em todas as páginas. Aqui está uma em CSS puro, com uma cor de reserva caso o gradiente não carregue e um texto que continua claro sobre todas as partes dele.

```html
<div class="cm-banner" role="region" aria-label="Cyber Monday sale">
  <a href="/sale">Cyber Monday: 25% off everything, today only</a>
</div>

<style>
  .cm-banner {
    background-color: #050b14;
    background-image: linear-gradient(90deg, #050b14 0%, #0c4a6e 50%, #050b14 100%);
    text-align: center;
    padding: 10px 16px;
  }
  .cm-banner a {
    color: #e0f2fe;
    font: 600 15px/1.4 system-ui, sans-serif;
    text-decoration: none;
  }
</style>
```

Uma faixa de aviso fina. A cor mais escura fica nas duas pontas e a luz só no meio, então o texto claro mantém o contraste.

Para um hero inteiro em vez de uma faixa, crie em 1920×1080 e mantenha as palavras no terço esquerdo ou central, onde sobrevivem ao recorte em telas menores. [Fundos para hero de site](https://gradiently.design/pt-br/guide/website-hero-background) trata de tamanhos e desempenho.

## Design de e-mail para Cyber Monday

Para muitas lojas, o e-mail da Cyber Monday é a arte mais importante do dia. O cabeçalho tem 1200×600, e num celular a primeira tela de um e-mail muitas vezes mostra pouco mais que isso, então a oferta pertence à metade de cima. Mantenha as palavras como texto no e-mail sempre que puder e use a imagem do cabeçalho para o clima e o título.

Um cabeçalho de e-mail largo de Cyber Monday com gradiente azul e as palavras Só hoje, 25% de desconto

Um cabeçalho de e-mail em 1200×600: a oferta na metade de cima, onde toda caixa de entrada a mostra.

- O assunto e o cabeçalho devem dizer a mesma coisa, com as mesmas palavras.
- Coloque um botão sob o cabeçalho, não cinco.
- Escreva o prazo com fuso horário, principalmente se você vende para outros países.
- Confira o cabeçalho no modo escuro, em que algumas caixas de entrada mudam as cores em volta dele.

[Design de cabeçalho de e-mail](https://gradiently.design/pt-br/guide/email-header-design) traz mais sobre tamanhos e as manias do modo escuro.

## Posts e stories de Cyber Monday

Nas redes, a Cyber Monday é curta, então dois ou três posts bastam: um lançamento de manhã, um lembrete em story ao meio-dia e uma última chamada à noite. Cada um deve levar as pessoas ao link, então deixe espaço nos stories para a figurinha de link.

Um post vertical de promoção de Cyber Monday com gradiente azul elétrico e a oferta em letras grandes

O post da manhã: ocasião, oferta e prazo.

Um story vertical em contagem regressiva das últimas seis horas de uma promoção de Cyber Monday

O story da noite, com espaço embaixo para a figurinha de link.

| Arte | Tamanho | Observação |
| --- | --- | --- |
| Post no Instagram | 1080×1350 | Lançamento de manhã |
| Story | 1080×1920 | Lembretes com figurinha de link |
| Cabeçalho de e-mail | 1200×600 | Oferta na metade de cima |
| Hero do site | 1920×1080 | Palavras no terço central |
| Prévia de link | 1200×630 | Aparece quando a página da promoção é compartilhada |

Tudo o que uma promoção online de um dia precisa, num só visual.

Faça todas essas artes na semana anterior, não na segunda de manhã. No dia, você vai querer acompanhar pedidos e responder mensagens, e a única mudança de design que deve sobrar é trocar “Faltam seis horas” por “Falta uma hora” no último story.

> **Tire do ar na hora certa** Quando a promoção terminar, remova o banner, volte a prévia do link ao normal e arquive os stories. Um banner de Cyber Monday ainda no ar na quarta-feira faz o prazo parecer que nunca foi real, e o do ano que vem vai ganhar um pouco menos de crédito.

A prévia do link é a que as pessoas esquecem. Quando alguém compartilha a página da sua promoção, essa imagem é a arte que os amigos dela veem, então ajuste-a para o dia. [Tamanho da imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-image-size) mostra como. Com o Pro, o Gradiently adapta um design pronto a todos esses formatos num passo só, e o fundo mantém a sua área mais calma atrás das palavras em cada tamanho.

## FAQ

### Quando é a Cyber Monday?

A Cyber Monday é a segunda-feira depois do Dia de Ação de Graças nos Estados Unidos, então sempre vem logo após o fim de semana da Black Friday. Muitas lojas fazem uma oferta de sexta a segunda e mudam o visual no último dia.

### Quais cores são boas para artes de Cyber Monday?

Cores frias, de tela, como azul elétrico, ciano e violeta sobre um fundo quase preto, parecem digitais e separam o dia da Black Friday.

### Qual é o tamanho de um cabeçalho de e-mail para Cyber Monday?

1200×600 pixels é um tamanho confiável. Mantenha a oferta na metade de cima, porque é a parte que as pessoas veem primeiro no celular.

### As artes de Cyber Monday devem combinar com as da Black Friday?

Mantenha a mesma tipografia, o layout e o tom de voz para que as pessoas reconheçam você, e mude a temperatura das cores para o novo dia parecer novo.

### O que um banner de Cyber Monday no site deve dizer?

Uma linha curta com a oferta e o prazo, com link para a página da promoção. Um banner é olhado de relance, não lido.
