Sobre este template
Bloom AI mostra uma forma de construir hero para um produto de IA ou SaaS e publica as instruções que produziram o resultado. O título da própria página é “Innovating the spirit of bloom AI”, e a composição é construída em volta exatamente dessas palavras. A paleta é azul profundo #030E1A por baixo, verde suave #AAD9C3 para a tipografia e verde #2E5648 carregando os destaques, com tipografia Poppins. A entrega é React e Lucide icons: uma página só, sem plugin e sem ferramenta de build entre você e o design. Se você está briefando uma hero de SaaS, parta desta composição e substitua o assunto.
Feito para
- Tome a estrutura da hero inteira e substitua o texto linha por linha contra uma moldura em 800x564.
- Se o seu time tiver de cortar o movimento, a hero continua legível, com passos de espaçamento de 50px fazendo o trabalho de hierarquia.
- Feito para um fundador solo lançando uma hero para um produto de IA ou SaaS, sem nenhum design system atrás.
O que está incluído
- Linha de cima: marca, links, uma ação. Os links ficam em uma linha só, em um único tamanho, e a ação #2E5648 fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #2E5648 é o único elemento da barra com peso.
- Toda medida está escrita. O layout é resolvido sobre valores fixos (passos de espaçamento de 50px), e é isso que mantém a primeira tela composta em qualquer largura. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- Painéis, não parágrafos. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Poppins em tamanho pequeno para a estrutura continuar visível. Os títulos dentro dos painéis ficam um passo acima do próprio texto, não um passo abaixo do título da página.
- Topo com uma única ação. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Interação mantida local
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. Confira os estados em um dispositivo de toque.
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 800x564 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. A quietude é uma escolha válida.
O argumento que esta hero faz
Um hero de estoque e esta hero usam as mesmas peças. Aqui elas são ordenadas por a navegação, o selo de anúncio, a linha de estatísticas, a grade de cards e o clipe de fundo e medidas com passos de espaçamento de 50px, então a tela lê como sequência, não como contêiner. Bloom AI enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Os números por trás da hero
O briefing é uma especificação, não um moodboard. Ele fixa passos de espaçamento de 50px e diz qual é a mídia: 800x564. Esse nível de detalhe é o que faz o design sobreviver a uma reconstrução: mude o texto e as relações continuam de pé. Nada nesta hero depende de um padrão.
O que mudar primeiro em Bloom AI
O briefing nomeia Poppins e a escala ao lado dela. Substitua por uma família com as mesmas proporções e a composição sobrevive. Uma marca diferente pode reaproveitar a moldura inteira.
Perguntas frequentes
O briefing de Bloom AI é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 3.900 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Bloom AI?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x564, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Lucide icons para reconstruir Bloom AI?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para React e Lucide icons, mas a mesma composição se reconstrói no que você já usa. A stack é nomeada para você saber como a referência foi feita.
