Sobre este template
Build With Us é uma página sobre de SaaS construída a partir de um único briefing escrito, e esta página documenta esse briefing. A paleta é branco #FFFFFF por baixo, amarelo profundo #434437 para a tipografia e azul #337EC8 carregando os destaques, com tipografia Inter. A stack é React e Tailwind CSS, então dá para levar página sobre para um projeto sem handoff de design. Tome emprestada a estrutura, não o assunto: a página sobre e os números dela passam para a sua marca sem alteração.
Feito para
- Times de estúdio que estão briefando uma construção e procuram uma moldura em 640x472 para reagir.
- Designers que precisam dos números antes de tudo: seções de 100vh e passos de espaçamento de 48px, tudo citado do briefing.
- Times de produto que escrevem o texto da Página sobre e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Links antes da ação. A fileira gasta o contraste em um lugar só: a ação #337EC8, com a marca e os links recuados na cor do texto. Os links são compostos abaixo da marca em tamanho, e a ação #337EC8 é o único elemento da barra com peso. Uma ação por barra.
- Os tamanhos estão no briefing, não em uma escala. O layout trabalha com valores absolutos, não com proporções: seções de 100vh e passos de espaçamento de 48px. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha. Mude o assunto, não os passos.
- Pesos nomeados por papel. A linha de display é composta em Inter em um tamanho que o briefing fixa, o que faz do título um elemento de composição e não um parágrafo. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema.
- A composição é o conteúdo. A composição de página sobre é 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.
Movimento e interação
Hover, mas com parcimônia
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards. Todo o resto fica parado, e isso mantém a ênfase na composição. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x472 fica parada e só se movem os elementos que respondem a você. Só se movem os elementos que respondem ao ponteiro.
O que se sustenta para IA e SaaS
Há uma única promessa nesta página, e seções de 100vh e passos de espaçamento de 48px a sustentam no lugar. Nada abaixo da dobra precisa carregar a oferta também. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
A página sobre com a sua cara
Uma linha, uma fonte, um destaque: essas três substituições são as que mais mudam o design. seções de 100vh e passos de espaçamento de 48px são os valores que não devem se mover. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Como a página sobre se reorganiza
O layout estreito é desenhado, não herdado. a seção fica presa a 100vh em cada largura, para a hierarquia sobreviver à reorganização. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
Perguntas frequentes
O prompt de Build With Us é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.252 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.
Por que o prompt do Build With Us não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 6.252 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Por que a entrada cita React e Tailwind CSS?
Build With Us 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.
