Sobre este template
Esta é a hero da Bold Studio, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “FSP DEMO - PODIUM Sharp 4.11” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta se reduz a vermelho #A60D29 por baixo e branco #F6E9EB para a tipografia, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 640x474 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 100ms. Deixe aberto enquanto escreve: o briefing de 6.067 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Bold Studio.
- Mantenha Inter e reconstrua a hero em torno dela, em vez de abrir uma escala tipográfica nova para a sua marca.
- A composição serve times de conteúdo que vão trocar o título e precisam dos pesos de Inter para manter o mesmo ritmo.
O que está incluído
- Linha de cima: marca, links, uma ação. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. Uma sobreposição mobile assume abaixo do breakpoint de tablet. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa.
- Tamanhos fixados no briefing. Toda medida do briefing é um número que dá para medir de volta: passos de espaçamento de 30px e transições de 100ms. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- A composição é o conteúdo. A composição de hero é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 640x474 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 640x474, e é por isso que ela se sustenta quando o texto muda. Nada decorativo pertence à região acima da dobra.
- Links colapsam em uma largura. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a passos de espaçamento de 30px e transições de 100ms, para a barra nunca competir com a composição atrás dela.
Movimento e interação
Tempos curtos e combinados
Os controles resolvem em 100ms, rápido o bastante para a página responder ao toque, e não depois dele. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada.
Hover onde faz sentido
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. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação. Mantenha a camada interativa pequena.
O que se move em Bold Studio
O briefing amarra cada transição a um valor (transições de 100ms e estados de hover e de clique). É isso que impede a página de parecer um template com um preset de animação jogado por cima. Nada anima por si nesta hero.
O que uma agência ou estúdio ganha aqui
Dá para reconstruir isso como uma pilha de cards separados e perder só o argumento. A hero lê como uma decisão única: a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo em uma sequência só. Bold Studio 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 hero
O briefing é uma especificação. Ele declara passos de espaçamento de 30px e transições de 100ms e nomeia a moldura da mídia em 640x474 antes de qualquer coisa ser desenhada em volta dela. Nada nesta hero depende de um padrão.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Bold Studio?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 640x474, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Bold Studio depende de React e Tailwind CSS?
Bold Studio 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 publicar uma página reconstruída a partir de Bold Studio sem dar os créditos?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 640x474.
