Sobre este template
Aurelion Blog é uma seção de blog de SaaS construída a partir de um único briefing escrito, e esta página documenta esse briefing. A paleta é branco #F3F4F4 por baixo, preto #1A1A1A para a tipografia e amarelo #F3DE58 carregando os destaques. A stack é React e Tailwind CSS, então dá para levar seção de blog para um projeto sem handoff de design. O movimento se resume a transições de 700ms e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Trate como o briefing de uma seção de blog para um produto de IA ou SaaS que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Engenheiros que precisam que a seção de blog sobreviva a uma conexão lenta vão usar 1400x1080 e a escala tipográfica como orçamento de peso.
- Profissionais de marketing de produto que precisam que seção de blog continue legível com 6,5s de vídeo em loop atrás do texto.
- Times de produto que escrevem o texto da Seção de blog e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Navegação sem fundo próprio. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #F3DE58, tudo no menor passo tipográfico do briefing. Os links são compostos abaixo da marca em tamanho, e a ação #F3DE58 é o único elemento da barra com peso.
- Nada aqui é herdado. Os valores são a especificação: passos de espaçamento de 30px e transições de 700ms, capturados em 1400x1080 em vez de inferidos de um print. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha. Mude o assunto, não os passos.
- Os cards fazem a estrutura. O meio da página é uma grade de cards, não um bloco de texto: cada painel carrega uma ideia com um ícone e uma linha curta, o que mantém o caminho de leitura horizontal e curto. O destaque dentro da grade marca no máximo um elemento, então os painéis não competem entre si. Deixe a contagem de painéis seguir o texto.
- A barra segue a grade. Cada link traz estados de foco e de hover próprios, não os do navegador. Mantenha a linha de cima em uma só.
Movimento e interação
O loop faz o trabalho ambiente
O movimento ambiente é um clipe de 6,5s em 1400x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
Uma superfície interativa pequena
A camada interativa é deliberadamente pequena: estados de hover nos botões e links, não em todos os cards e um carrossel que pagina o conteúdo sob demanda. Os estados de pressão estão especificados junto com o hover, então tocar confirma o mesmo que clicar.
O tempo por trás da seção de blog
Dá para jogar uma biblioteca de presets sobre esta composição e ela ficaria mais ocupada, não melhor. O briefing mantém transições de 700ms, um loop de mídia de 6,5s e um título palavra por palavra e gasta o orçamento ali. Nada anima por si nesta seção de blog.
A seção de blog com a sua cara
Quando você colocar a sua própria mídia, mantenha o recorte e a ordem das camadas. A mídia é um loop de 6,5s em 1400x1080. É esse posicionamento que mantém o texto legível. Uma marca diferente pode reaproveitar a moldura inteira.
Como a seção de blog se reorganiza
Uma escala fixa de desktop teria sido mais fácil. O briefing acrescenta um clamp entre 56px e 30px, que é o que mantém a linha de display proporcional entre larguras. Os controles continuam grandes o bastante para o toque e o texto mantém a ordem de leitura em qualquer largura.
Perguntas frequentes
O que posso fazer com o briefing de Aurelion Blog depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 5.024 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Aurelion Blog contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1400x1080, 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 Aurelion Blog?
Aurelion Blog 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.
