Sobre este template
Antes de reconstruir uma seção de preços para um produto fintech, leia Price Calculator: a composição e a especificação por trás dela estão as duas aqui. O título da própria página é “Get premium website within your budget”, e a composição é construída em volta exatamente dessas palavras. A página inteira é construída sobre preto #000000 por baixo e vermelho #FF5656 carregando os destaques. A stack é um único componente, então dá para levar seção de preços para um projeto sem handoff de design. Use como referência quando estiver construindo seção de preços para um produto fintech e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Agências que apresentam um produto fintech seção de preços e querem passos de espaçamento de 98px citado no deck, para o orçamento ainda valer depois do kickoff.
- Times de growth que redesenham um produto fintech seção de preços e querem a moldura em 800x648 mantida enquanto o texto da oferta muda.
- A seção de preços foi pensada para product managers que precisam reaproveitar #FF5656 na reconstrução em vez de inventar uma paleta.
O que está incluído
- Os tamanhos estão no briefing, não em uma escala. Os tamanhos foram lidos do render em 800x648: passos de espaçamento de 98px. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha. Verifique uma reconstrução contra os mesmos números.
- Cor racionada às ações. Tudo o que não é #FF5656 fica sobre preto #000000, e é isso que faz o destaque ler como sinal e não como decoração. Todo o resto fica sobre preto #000000, e é isso que mantém uma paleta saturada legível.
- Cards sem bordas. A grade de cards é o recurso de organização: painéis iguais, uma ideia cada, sem hierarquia entre eles. A grade colapsa para uma coluna só sem mudar a ordem dos painéis. Um painel, uma ideia.
- Passos de espaçamento citados. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 98px), não como uma escala que cresce sozinha.
Movimento e interação
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 800x648 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.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 800x648 fica parada e só se movem os elementos que respondem a você.
A ordem por trás da seção de preços
A atenção é conduzida, não espalhada. “Get premium website within your budget” já faz esse trabalho desde o primeiro frame. O olho cai primeiro na linha de display, depois no texto de apoio, depois na ação. Essa sequência é o design. O leitor de fintech recebe a oferta antes das opções.
Os números por trás da seção de preços
É isso que torna a referência reaproveitável: passos de espaçamento de 98px. Nada fica a cargo do padrão, então uma substituição que mantém esses números mantém a composição. Nada nesta seção de preços depende de um padrão.
A seção de preços com a sua cara
A substituição direta tem um limite: se o seu produto precisa de outra hierarquia, passos de espaçamento de 98px vão brigar com ela. Nesse caso, mude a ordem primeiro e os valores depois. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Price Calculator?
O briefing capturado tem 3.168 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 um único componente para reconstruir Price Calculator?
A referência foi construída em um único componente 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.
Posso usar Price Calculator em um projeto de cliente?
A referência foi coletada em motionsites.ai, e a mídia pertence a eles. Reconstrua a composição com texto, imagens e paleta próprios, e verifique as condições de uso do site de origem antes de publicar qualquer arquivo retirado de lá.
