Sobre este template
Tech-Noir About é uma referência prática para um produto de IA ou SaaS: página sobre com layout definido, medidas tiradas e tudo pronto para reconstruir. O esquema de cores é vermelho #C40010 por baixo e vermelho vivo #FF0000 carregando os destaques, e a página é composta em Manrope. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. Parta do briefing capturado e depois edite a página sobre em vez de reconstruí-la do zero.
Feito para
- Tome a estrutura da página sobre inteira e substitua o texto linha por linha contra uma moldura em 640x470.
- Designers que precisam dos números antes de tudo: tipografia de 16px a 120px e passos de espaçamento de 100px, tudo citado do briefing.
- Feito para um fundador solo lançando uma página sobre para um produto de IA ou SaaS, sem nenhum design system atrás.
O que está incluído
- Os tamanhos estão no briefing, não em uma escala. A lista é curta (tipografia de 16px a 120px e passos de espaçamento de 100px), e é por isso que o sistema inteiro pode ser conferido à mão. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- Nada decorativo na cor. A paleta é uma base e um sinal (vermelho #C40010 e vermelho vivo #FF0000), com a segunda cor reservada às ações. O contraste entre #FF0000 e vermelho #C40010 é o que torna o destaque legível em tamanhos pequenos. Um destaque só, aplicado apenas nas ações.
- Toda medida está escrita. O espaçamento é declarado do mesmo jeito (tipografia de 16px a 120px e passos de espaçamento de 100px), não como uma escala que cresce sozinha.
- Pesos nomeados por papel. As famílias recebem papéis em vez de serem misturadas: Manrope carrega o display e a interface juntos. O tracking aperta conforme o tamanho cresce, e é por isso que a linha de display se sustenta ao longo de 16–120px.
Movimento e interação
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x470 fica parada e só se movem os elementos que respondem a você. Só se movem os elementos que respondem ao ponteiro. Nenhuma linha do tempo de scroll é necessária.
Movimento que sai da frente
Esta é entregue como composição estática em 640x470, então a hierarquia precisa funcionar sem movimento, e funciona. A quietude é uma escolha válida.
Como Tech-Noir About ordena a primeira leitura
Se a sua página hoje abre com recursos, esta é a ordem a copiar: o clipe de fundo na frente, o detalhe de apoio depois, e tipografia de 16px a 120px e passos de espaçamento de 100px marcando a distância. O leitor de SaaS recebe a oferta antes das opções.
Como a página sobre se reorganiza
A tipografia é clampada, não escalonada (um clamp entre 16px e 120px), então a linha de display não dá saltos entre larguras. A largura muda as medidas, não a rota de leitura.
Ler Tech-Noir About como especificação
Toda relação nesta página é um valor que dá para conferir: tipografia de 16px a 120px e passos de espaçamento de 100px. É isso que torna Tech-Noir About reconstruível, e não apenas reproduzível. Nada nesta página sobre depende de um padrão.
Perguntas frequentes
O prompt de Tech-Noir About é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 3.555 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.
O que posso fazer com o briefing de Tech-Noir About depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 3.555 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Posso reconstruir página sobre do Tech-Noir About em outra stack?
Tech-Noir About 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.
