Sobre este template
Email Marketing entrega a um produto de IA ou SaaS uma primeira tela pronta e os números que a produziram. O título diz “Design Rocket Certificates”, e o resto da hero se organiza em volta disso. A paleta se reduz a preto #0A0A0A por baixo, amarelo vivo #DCFF00 para a tipografia e amarelo vivo #D8F90A carregando os destaques, e a tipografia é Instrument Serif. A entrega é React e Tailwind CSS, capturada em 800x702 para a moldura estar fixada antes de qualquer linha de código. Deixe aberto enquanto escreve: o briefing de 7.972 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se três pessoas vão editar esta hero, dê a quem cuida do conteúdo tipografia de 12px a 58px e passos de espaçamento de 18px em vez de uma captura de tela.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Email Marketing.
- Líderes de design que comparam referências de SaaS vão usar preto #0A0A0A e amarelo vivo #D8F90A como critério de desempate.
O que está incluído
- Números, não impressões. O layout é resolvido sobre valores fixos (tipografia de 12px a 58px e passos de espaçamento de 18px), e é isso que mantém a primeira tela composta em qualquer largura. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído. Meça antes de ajustar.
- Rótulos embaixo dos números. Uma fileira de estatísticas fica acima da dobra, composta em Instrument Serif no topo da escala, com #D8F90A reservado aos números que carregam uma afirmação. Os números carregam o destaque #D8F90A enquanto tudo em volta fica na cor do texto. Mantenha a fileira em uma linha.
- Uma escala para tipo e moldura. O espaçamento é declarado do mesmo jeito (tipografia de 12px a 58px e passos de espaçamento de 18px), não como uma escala que cresce sozinha.
- Números onde a prova deve ficar. Os números usam a mesma família da interface, então pertencem à página em vez de interrompê-la.
Movimento e interação
Hover, mas com parcimônia
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação. Menos estados, todos especificados.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 800x702 conduzir a página, com estados de hover e de clique como únicas mudanças. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta. Mantenha o movimento nos controles.
O que esta hero acerta
Há uma única promessa nesta página, e tipografia de 12px a 58px e passos de espaçamento de 18px a sustentam no lugar. A página diz isso em voz alta: “Design Rocket Certificates”. Nada abaixo da dobra precisa carregar a oferta também. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Como a hero se reorganiza
Uma escala fluida custa menos controle sobre os tamanhos exatos. O que você ganha é uma linha de display que se mantém proporcional, e é por isso que um clamp entre 12px e 58px está no briefing. A ordem é a última coisa a mudar.
A ordem por trás da hero
Leia na ordem: o título, o selo de anúncio, a linha de estatísticas, a grade de cards e o clipe de fundo. Cada elemento tem uma função, e o destaque amarelo vivo #D8F90A é gasto só no elemento que você deve pressionar. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Email Marketing?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x702, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Email Marketing?
Email Marketing foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
De onde veio o design de Email Marketing?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x702.
