Sobre este template
Modern Agency entrega a uma agência ou estúdio uma primeira tela pronta e os números que a produziram. O título da própria página é “We craft digital experiences for brands ready to dominate their category online”, e a composição é construída em volta exatamente dessas palavras. A página inteira é construída sobre branco #FFFFFF por baixo e laranja vivo #F26522 carregando os destaques. A entrega é React e Tailwind CSS, capturada em 364x640 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em cubic-bezier(0.25,0.1,0.25,1). Esta referência é para uma agência ou estúdio que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Modern Agency.
- Quem briefa um modelo para uma landing page vai usar o prompt de 10.347 caracteres como ponto de partida.
- Feito para um fundador solo lançando uma landing page para uma agência ou estúdio, sem nenhum design system atrás.
O que está incluído
- Topo com uma única ação. Os links ficam em uma linha só, em um único tamanho, e a ação #F26522 fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #F26522 é o único elemento da barra com peso. Se a sua página tiver mais seções, agrupe em vez de alargar a barra.
- Tamanhos fixados no briefing. Nada aqui é feito no olho. A especificação fixa passos de espaçamento de 13px e curva de aceleração cubic-bezier(0.25,0.1,0.25,1), e o resto do layout deriva desses valores. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- Cards sem bordas. O meio da página é uma grade de cards, não um bloco de texto: cada painel carrega uma ideia com um ícone e uma linha curta, o que mantém o caminho de leitura horizontal e curto. Em uma coluna só, a grade mantém a ordem dos painéis.
- A composição é o conteúdo. A composição de landing page é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 364x640 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 364x640, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
O tempo definido no briefing
O briefing fixa o valor da transição em 0, então uma reconstrução não pode cair em um padrão mais lento. Toda mudança de estado nomeia um valor, então o padrão do navegador nunca é usado.
Uma cena ao vivo na primeira tela
A primeira tela é construída pelo navegador, não entregue como imagem: um canvas WebGL. A renderização carrega a própria cor, então a paleta em volta fica discreta.
A landing page com a sua cara
Você não precisa reconstruir a landing page para deixá-la com a sua cara. Substitua o título e a mídia, mantenha a escala (passos de espaçamento de 13px e curva de aceleração cubic-bezier(0.25,0.1,0.25,1)), e o layout continua lendo como foi desenhado. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Como Modern Agency ordena a primeira leitura
A atenção é conduzida, não espalhada. “We craft digital experiences for brands ready to dominate their category online” já faz esse trabalho desde o primeiro frame. O olho cai primeiro na linha de display, depois no texto de apoio, depois na ação. A prova, onde aparece, fica como faixa ou linha, e não como parede de depoimentos. Essa sequência é o design. O leitor de agência recebe a oferta antes das opções.
Ler Modern Agency como especificação
Assumir passos de espaçamento de 13px e curva de aceleração cubic-bezier(0.25,0.1,0.25,1) troca flexibilidade por repetibilidade. É esse o ponto da referência: a mesma página em outra marca, sem um novo conjunto de suposições. Nada nesta landing page depende de um padrão.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Modern Agency?
O briefing capturado tem 10.347 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.
Preciso de React e Tailwind CSS para reconstruir Modern Agency?
Modern Agency 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 Modern Agency 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 364x640.
