Sobre este template
Dot preserva o rastro das decisões: o briefing que produziu esta hero tem 3.871 caracteres. O esquema de cores é branco #DEF0FC por baixo, preto #1A1A1A para a tipografia e azul vivo #0871E7 carregando os destaques, e a página é composta em Instrument Serif. A entrega é React e Tailwind CSS, capturada em 800x588 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 100ms. Trate como o briefing de uma hero para uma marca de lifestyle que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Profissionais de marketing que herdam esta hero vão usar tipografia de 14px a 72px e passos de espaçamento de 14px para conferir se uma reescrita manteve a escala.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Dot.
- Líderes de design que comparam referências de lifestyle e procuram uma construída sobre branco #DEF0FC e azul vivo #0871E7.
O que está incluído
- Links colapsam em uma largura. A fileira gasta o contraste em um lugar só: a ação #0871E7, 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 #0871E7 é o único elemento da barra com peso. Não dê à marca mais espaço do que a tipografia dela precisa.
- Os tamanhos estão no briefing, não em uma escala. Os valores são a especificação: tipografia de 14px a 72px, passos de espaçamento de 14px e transições de 100ms, capturados em 800x588 em vez de inferidos de um print. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto.
- Links antes da ação. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #0871E7, tudo isso no topo de hero e sem fundo próprio.
- Números levados para a construção. O espaçamento é declarado do mesmo jeito (tipografia de 14px a 72px, passos de espaçamento de 14px e transições de 100ms), não como uma escala que cresce sozinha.
Movimento e interação
Rápido o bastante para parecer intencional
Hover, clique e foco resolvem todos em 100ms, e é isso que faz a interface parecer imediata. Os tempos curtos são o motivo de a página parecer autoral; um padrão lento desfaria a composição.
A interação está nos controles
O feedback se limita a estados de hover nos botões e links, não em todos os cards, então o resto do layout é uma composição fixa. O feedback se limita aos controles, então a composição fica parada em volta deles. Mantenha a camada interativa pequena.
Os números por trás da hero
Quando uma reconstrução desanda, o espaçamento é o primeiro a ir. Dot evita isso publicando tipografia de 14px a 72px, passos de espaçamento de 14px e transições de 100ms junto com a composição. Nada nesta hero depende de um padrão.
O que se sustenta para Lifestyle
Há uma única promessa nesta página, e tipografia de 14px a 72px e passos de espaçamento de 14px a sustentam no lugar. Nada abaixo da dobra precisa carregar a oferta também. Dá ao leitor de lifestyle a rota honesta mais curta até a oferta.
O que se move em Dot
O orçamento de animação está declarado: transições de 100ms e estados de hover e de clique. Nada na hero se move sem um valor associado. Nada anima por si nesta hero.
Perguntas frequentes
O prompt de Dot é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x588, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Dot?
Dot 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 usar Dot em um projeto de cliente?
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 800x588.
