Sobre este template
DesignPro Academy entrega a uma marca de educação ou comunidade uma primeira tela pronta e os números que a produziram. A paleta se reduz a preto #000000 por baixo, branco #FFFFFF para a tipografia e verde-água #64CEFB carregando os destaques, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 800x569 para a moldura estar fixada antes de qualquer linha de código. Esta referência é para uma marca de educação ou comunidade que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Quem briefa um modelo para uma hero vai usar o prompt de 3.038 caracteres como ponto de partida.
- Feito para um fundador solo lançando uma hero para uma marca de educação ou comunidade, sem nenhum design system atrás.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da DesignPro Academy.
O que está incluído
- Uma linha, sem gaveta. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #64CEFB, tudo isso no topo de hero e sem fundo próprio. Os links são compostos abaixo da marca em tamanho, e a ação #64CEFB é o único elemento da barra com peso.
- A tipografia define a hierarquia. A tipografia é o sistema de estilo aqui: Inter no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. O tracking é definido por tamanho, então a linha de display e a legenda não compartilham um mesmo letter-spacing. Mantenha os passos de tamanho mesmo trocando a família.
- Uma barra de navegação que sai do caminho. Cada link traz estados de foco e de hover próprios, não os do navegador. Uma ação por barra.
- A tipografia carrega o tom. O texto de interface fica em uma família só, então a página nunca mistura duas vozes no mesmo tamanho.
Movimento e interação
Ponteiro só onde ajuda
O feedback se limita a estados de hover nos botões e links, não em todos os cards, então o resto do layout é uma composição fixa. Cada estado muda uma única propriedade, o que mantém o feedback legível. Mantenha a camada interativa pequena.
Quase nenhum movimento
Esta é entregue como composição estática em 800x569, então a hierarquia precisa funcionar sem movimento, e funciona. O movimento é tratado como feedback, não como decoração.
Por que o briefing de educação se sustenta
Suponha que a sua mídia seja mais alta que o seu texto. É para esse caso que esta composição foi construída. A mídia é um frame estático em 800x569. A moldura fica silenciosa e uma moldura em 800x569 mantêm o leitor no texto. DesignPro Academy enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A ordem por trás da hero
A página tem uma ordem deliberada. A navegação apresenta o produto e dá a quem volta um caminho familiar. O título ocupa o tamanho de display, a linha de apoio explica a oferta e o destaque verde-água #64CEFB marca a ação principal, então o próximo passo nunca fica em dúvida. Nada mais compete: não existe grade de cards antes da primeira decisão, e é isso que tira o peso de hero em trabalho de educação. O leitor de educação recebe a oferta antes das opções.
Ler DesignPro Academy como especificação
Quando uma reconstrução desanda, o espaçamento é o primeiro a ir. DesignPro Academy evita isso publicando uma moldura em 800x569 junto com a composição. Nada nesta hero depende de um padrão.
Perguntas frequentes
O que eu recebo ao copiar o briefing de DesignPro Academy?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x569, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de DesignPro Academy depende de React e Tailwind CSS?
DesignPro Academy 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.
Posso usar DesignPro Academy em um projeto de cliente?
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 800x569.
