Sobre este template
Antes de reconstruir uma página sobre para um produto de IA ou SaaS, leia Axion About: a composição e a especificação por trás dela estão as duas aqui. Ela abre com “Through research, creative thinking and iteration we help growing brands realize their digital full potential” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A página inteira é construída sobre branco #EDEDEE por baixo, vermelho profundo #3E3133 para a tipografia e laranja vivo #F26522 carregando os destaques. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. O movimento se resume a cubic-bezier(0.25,0.1,0.25,1), mantido discreto o bastante para o texto continuar conduzindo. É mais útil quando a página sobre de IA e SaaS precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Engenheiros que precisam que a página sobre sobreviva a uma conexão lenta vão usar 640x468 e a escala tipográfica como orçamento de peso.
- Agências que apresentam um produto de IA ou SaaS página sobre e querem tipografia de 12px a 18px e passos de espaçamento de 12px citado no deck, para o orçamento ainda valer depois do kickoff.
- Feito para product managers que precisam da página sobre limitada a uma sprint e sem novos assets.
O que está incluído
- Nada aqui é herdado. Os tamanhos são declarados, não herdados: tipografia de 12px a 18px, passos de espaçamento de 12px e curva de aceleração cubic-bezier(0.25,0.1,0.25,1). Troque a família tipográfica ou o texto e essas relações continuam valendo. A lista é curta o bastante para um revisor conferir elemento por elemento.
- Selo acima da dobra. O anúncio é uma pílula #F26522 acima do título, com tamanho menor que o texto de apoio, para ler como etiqueta e não como um segundo título. O selo carrega #F26522, enquanto o título fica na cor do texto.
- Texto primeiro, decoração depois. A composição está completa em 640x468: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 640x468, e é por isso que ela se sustenta quando o texto muda.
- Valores que dá para conferir. O espaçamento é declarado do mesmo jeito (tipografia de 12px a 18px, passos de espaçamento de 12px e curva de aceleração cubic-bezier(0.25,0.1,0.25,1)), não como uma escala que cresce sozinha.
Movimento e interação
Mudanças de estado, cronometradas
O movimento aqui é medido em milissegundos: 0 usando cubic-bezier(0.25,0.1,0.25,1). Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback.
Quase nenhum movimento
Esta é entregue como composição estática em 640x468, então a hierarquia precisa funcionar sem movimento, e funciona. O movimento é tratado como feedback, não como decoração.
A ordem por trás da página sobre
Aqui, a ordem é o projeto em si. o selo de anúncio e a linha de estatísticas estão posicionados para a oferta chegar antes da prova, e tipografia de 12px a 18px e passos de espaçamento de 12px definem a distância entre os dois. O leitor de SaaS recebe a oferta antes das opções.
O que um produto de IA ou SaaS ganha aqui
4.393 caracteres de briefing produzem uma tela sem enchimento. Os valores nele são explícitos (tipografia de 12px a 18px e passos de espaçamento de 12px), e é por isso que a composição continua legível quando as palavras mudam. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
O que mudar primeiro em Axion About
A parte reaproveitável é a composição; o assunto é seu. Troque o título, mantenha a escala tipográfica (tipografia de 12px a 18px) e teste de novo o destaque #F26522 sobre a sua própria mídia. Se um elemento novo não ajuda a explicar a oferta ou o próximo passo, ele pertence abaixo da dobra. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Axion About?
O briefing capturado tem 4.393 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.
O briefing de Axion About é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 4.393 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Posso reconstruir página sobre do Axion About em outra stack?
Axion About 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.
