Sobre este template
Rocket Pricing resolve o problema de seção de preços para um produto de IA ou SaaS com um único briefing capturado. O título diz “Clear pricing plans that scale with you”, e o resto da seção de preços se organiza em volta disso. A paleta é preto #0E0D0E por baixo, com tipografia Inter. A stack é React e Tailwind CSS, então dá para levar seção de preços para um projeto sem handoff de design. É a referência certa para seção de preços para um produto de IA ou SaaS que precisa parecer intencional já na primeira tela.
Feito para
- Cite uma moldura em 640x472 na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Times que constroem seção de preços para um produto de IA ou SaaS e querem o detalhe medido (passos de espaçamento de 11px) em vez de uma captura de tela para copiar.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta seção de preços como o padrão que todas as outras páginas copiam.
O que está incluído
- Passos de espaçamento citados. O briefing declara os tamanhos na captura (passos de espaçamento de 11px), então dá para conferir uma reconstrução em vez de estimá-la. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição. Onde o briefing se cala, ele se cala de propósito.
- Selo acima da dobra. Um selo, uma mensagem: a pílula fica acima do título em Inter no menor passo da escala, e nada mais disputa esse lugar. Existe um único anúncio, e é isso que faz o selo parecer notícia.
- A composição é o conteúdo. A composição de seção de preços é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 640x472 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 640x472, e é por isso que ela se sustenta quando o texto muda. Mantenha a moldura; troque o assunto.
- O briefing nomeia os passos. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 11px), não como uma escala que cresce sozinha.
Movimento e interação
A interação está nos controles
O feedback se limita a estados de hover nos botões e links, não em todos os cards, e é isso que impede uma primeira tela densa de parecer carregada. Os estados estão nomeados no briefing, então a página não depende de uma biblioteca de efeitos de hover.
Estático por decisão
O briefing deixa a animação de fora e deixa o layout em 640x472 conduzir a página, com estados de hover e de clique como únicas mudanças. O movimento é tratado como feedback, não como decoração.
A seção de preços com a sua cara
Enquanto um tema entrega componentes, este briefing entrega uma composição: passos de espaçamento de 11px e uma moldura de mídia, com o assunto por sua conta. Reescreva o texto e a mídia antes de repintar qualquer coisa.
O argumento que esta seção de preços faz
Rocket Pricing funciona porque a hierarquia dela é decidida, não decorada. O briefing fixa passos de espaçamento de 11px, então um texto novo cai dentro da moldura em vez de reabri-la. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
A ordem por trás da seção de preços
Uma tela, uma ação e o selo de anúncio, a linha de estatísticas, a grade de cards e a lista de recursos entre as duas. O briefing fixa essa ordem em vez de entregar a primeira tela a uma pilha de seções. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
O que posso fazer com o briefing de Rocket Pricing depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 8.841 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 Rocket Pricing?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 640x472, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Rocket Pricing 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.
