Sobre este template
VaultShield foi capturada em 640x468 e guardada como especificação, não como imagem de galeria. A paleta é cinza #CFC8C5 por baixo, tom escuro #192837 para a tipografia e tom escuro #7342E2 carregando os destaques, com tipografia Helvetica Now Display. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. Tudo o que se move cabe em transições de 0.45s. Use como referência quando estiver construindo hero para um produto fintech e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Feito para estúdios que precisam explicar o comportamento em 560px a um cliente sem antes construir um protótipo.
- Quem briefa um modelo para uma hero vai usar o prompt de 4.734 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da VaultShield.
O que está incluído
- Navegação em uma só linha. Os links ficam em uma linha só, em um único tamanho, e a ação #7342E2 fecha a fileira à direita, então o olho termina onde a navegação termina. Os rótulos são curtos o bastante para caber em uma linha a 560px, e o item ativo é marcado por peso, não por uma pílula.
- A escala é clampada, não escalonada. O topo da escala é fluido (um clamp entre 72px e 24px) e o resto é fixo, então a moldura continua composta conforme a viewport estreita. O menu mobile faz parte do mesmo briefing, então o estado colapsado também foi desenhado. Confira a primeira tela no celular.
- Linhas numeradas fazem o trabalho. Os recursos são compostos como lista em Helvetica Now Display, não como uma parede de cards. Cada linha se mantém em uma só quando o texto permite. Linhas, não cards.
- Uma linha, sem gaveta. Se a sua página tiver mais seções, agrupe em vez de alargar a barra. A referência tem captura em 640x468.
Movimento e interação
Tempos curtos e combinados
As transições estão especificadas em 0.45s, e é esse o tempo ao qual os controles obedecem. A curva de aceleração é especificada junto com a duração (0.45s), então uma reconstrução não pode trocar a sensação sem aviso.
Feedback nos controles
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. O feedback se limita aos controles, então a composição fica parada em volta deles.
O que mudar primeiro em VaultShield
Um template pede que você aceite o layout dele; esta referência pede que você o mantenha e mude tudo por dentro. A diferença é que seções de 100vh, passos de espaçamento de 24px, transições de 0.45s e um breakpoint de 560px ficam fixas enquanto o assunto se move. A moldura e a escala são o que deixar em paz.
Os números por trás da hero
Enquanto um moodboard deixa a escala em aberto, este briefing a fecha: seções de 100vh e passos de espaçamento de 24px, com os valores ao redor derivados dessa decisão. Nada nesta hero depende de um padrão.
A ordem por trás da hero
A atenção é conduzida, não deixada ao acaso. A sequência corre por a navegação, a linha de estatísticas, a lista de recursos e o clipe de fundo, e cada parada é dimensionada contra seções de 100vh e passos de espaçamento de 24px para que nada chegue fora de ordem. O leitor de fintech recebe a oferta antes das opções.
Perguntas frequentes
O prompt de VaultShield é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 4.734 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.
Quanto de VaultShield depende de React e Tailwind CSS?
VaultShield 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.
Como se comportam as transições de 0.45s em VaultShield?
As entradas e as mudanças de estado ficam na faixa de 0.45s. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
