Sobre este template
Convix Software mostra uma forma de construir hero para um produto de IA ou SaaS e publica as instruções que produziram o resultado. O esquema de cores é branco #EDEDED por baixo, azul profundo #0B0F1A para a tipografia e vermelho vivo #EF4D23 carregando os destaques, e a página é composta em Inter. A referência é construída com React e Lucide icons, e as decisões de layout estão declaradas independentemente dela. Deixe aberto enquanto escreve: o briefing de 5.587 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Fundadores que briefam uma agência vão usar a moldura em 800x578 como teste de aceite da primeira rodada.
- Profissionais de marketing que herdam esta hero vão usar um tamanho de display fixo de 22px e seções de 100vh para conferir se uma reescrita manteve a escala.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Convix Software.
O que está incluído
- Uma barra sem excesso. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #EF4D23, tudo no menor passo tipográfico do briefing. Os links são compostos abaixo da marca em tamanho, e a ação #EF4D23 é o único elemento da barra com peso. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Tamanhos fixados no briefing. O briefing fixa um tamanho de display fixo de 22px, seções de 100vh e passos de espaçamento de 13px e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
- Navegação sem fundo próprio. A barra carrega a marca, os links de seção e um botão #EF4D23, tudo medido em um tamanho de display fixo de 22px e seções de 100vh para nunca virar um segundo cabeçalho.
- Números levados para a construção. O espaçamento é declarado do mesmo jeito (um tamanho de display fixo de 22px, seções de 100vh e passos de espaçamento de 13px), não como uma escala que cresce sozinha.
Movimento e interação
Quase nenhum movimento
Esta é entregue como composição estática em 800x578, então a hierarquia precisa funcionar sem movimento, e funciona. Só se movem os elementos que respondem ao ponteiro.
Estático por decisão
O briefing deixa a animação de fora e deixa o layout em 800x578 conduzir a página, com estados de hover e de clique como únicas mudanças. Mantenha o movimento nos controles.
O tempo por trás da hero
O movimento é uma lista curta, não um sistema. O briefing nomeia estados de hover e de clique, e o resto da página fica parado. Nada anima por si nesta hero.
A hero com a sua cara
Você não precisa reconstruir a hero para deixá-la com a sua cara. Substitua o título e a mídia, mantenha a escala (um tamanho de display fixo de 22px e seções de 100vh), e o layout continua lendo como foi desenhado. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
Os números por trás da hero
Compare com um template que trata o espaçamento como preferência. Aqui os mesmos valores são nomeados (um tamanho de display fixo de 22px, seções de 100vh e passos de espaçamento de 13px), então uma edição ou os mantém, ou quebra a composição de forma visível. Nada nesta hero depende de um padrão.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Convix Software?
O briefing capturado tem 5.587 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Preciso de React e Lucide icons para reconstruir Convix Software?
A referência foi construída em React e Lucide icons por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
De onde veio o design de Convix Software?
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 800x578.
