Sobre este template
Cognitra Feature é uma referência prática para um produto de IA ou SaaS: seção de recursos com layout definido, medidas tiradas e tudo pronto para reconstruir. “We provide all-in-one AI automation services in one place” é a linha que o layout foi construído para sustentar. O esquema de cores é laranja suave #877A73 por baixo e cinza #D2CDC5 para a tipografia, e a página é composta em Helvetica, Arial. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento cabe todo em transições de 0.08s. Trate como o briefing de uma seção de recursos para um produto de IA ou SaaS que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter um breakpoint de 260px e reconstruir o resto da seção de recursos.
- Times terceirizados que assumem esta seção de recursos e precisam de uma moldura em 640x470 fixado no repositório antes do primeiro commit.
- Quem briefa um modelo para uma seção de recursos vai usar o prompt de 3.241 caracteres como ponto de partida.
O que está incluído
- Uma barra de navegação que sai do caminho. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Helvetica, Arial, para a barra pertencer à página abaixo e não a um sistema separado. Os rótulos são curtos o bastante para caber em uma linha a 260px, e o item ativo é marcado por peso, não por uma pílula. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Fluido onde precisa ser. A tipografia é dimensionada com um clamp entre 26px e 32px em vez de passos fixos, então a linha de display mantém a proporção entre breakpoints em vez de dar saltos. Como a escala é clampada, a linha de display nunca dá saltos entre breakpoints.
- A composição é o conteúdo. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 640x470 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 640x470, e é por isso que ela se sustenta quando o texto muda. Mantenha a moldura; troque o assunto.
- Uma linha, sem gaveta. Uma ação por barra. A referência tem captura em 640x470.
Movimento e interação
Tempos em milissegundos
As mudanças de estado estão especificadas em 0.08s, então o feedback dos controles é um valor projetado, não o padrão do navegador. A curva de aceleração é especificada junto com a duração (0.08s), então uma reconstrução não pode trocar a sensação sem aviso.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 640x470 conduzir a página, com estados de hover e de clique como únicas mudanças. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
O argumento que esta seção de recursos faz
A contrapartida é a densidade: esta seção de recursos diz menos na primeira tela do que um layout guiado por recursos diria. O que ela mantém é a ordem de leitura, e a navegação, a linha de estatísticas e o clipe de fundo fazem o trabalho que uma página mais longa espalharia. Cognitra Feature 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 seção de recursos
Quase toda decisão aqui é um valor que dá para conferir: um tamanho de display fixo de 14px, seções de 100vh, passos de espaçamento de 32px, transições de 0.08s e um breakpoint de 260px. A mídia é um frame estático em 640x470. A tipografia segue em Helvetica, Arial, então qualquer substituição precisa manter as mesmas proporções. Nada nesta seção de recursos depende de um padrão.
O que mudar primeiro em Cognitra Feature
Comece pelo texto, não pela cor. Reescreva “We provide all-in-one AI automation services in one place” como uma frase sobre o seu produto e componha em Helvetica, Arial no tamanho que o briefing usa. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Perguntas frequentes
O que o briefing por trás de Cognitra Feature contém de fato?
O briefing capturado tem 3.241 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.
Por que a entrada cita React e Tailwind CSS?
Cognitra Feature 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 manter as transições de Cognitra Feature e mudar os tempos?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.08s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
