Sobre este template
Taskly é a referência de hero para uma agência ou estúdio, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. Ela abre com “Work smarter, achieve faster” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. O esquema de cores é azul #60B1FF por baixo, azul profundo #041320 para a tipografia e laranja vivo #FF801E carregando os destaques, e a página é composta em Inter. A entrada nomeia a stack que produziu a página (um único componente) em vez de escondê-la. Tome emprestada a estrutura, não o assunto: a hero e os números dela passam para a sua marca sem alteração.
Feito para
- A página serve desenvolvedores front-end que reconstroem uma agência ou estúdio hero em um único componente e procuram os números por trás da aparência.
- Entregue um único componente ao engenheiro com o recorte em 800x592 anexado e deixe que ele reconstrua.
- Escreva o seu próprio título e depois reconstrua esta hero em um único componente com as medidas intactas.
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 #FF801E 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 #FF801E é o único elemento da barra com peso.
- Os tamanhos estão no briefing, não em uma escala. A lista é curta (passos de espaçamento de 16px), e é por isso que o sistema inteiro pode ser conferido à mão. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo. Meça antes de ajustar.
- Pesos nomeados por papel. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema.
- Linha de cima: marca, links, uma ação. Cada link traz estados de foco e de hover próprios, não os do navegador. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
Movimento e interação
Interação mantida local
A página responde só onde dá para agir: estados de hover nos botões e links, não em todos os cards e um elemento sticky que segura a posição enquanto o conteúdo passa por baixo. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 800x592 fica parada e só se movem os elementos que respondem a você. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta.
Ler Taskly como especificação
O briefing é uma especificação, não um moodboard. Ele fixa passos de espaçamento de 16px e diz qual é a mídia: 800x592. Esse nível de detalhe é o que faz o design sobreviver a uma reconstrução: mude o texto e as relações continuam de pé. Nada nesta hero depende de um padrão.
Como Taskly ordena a primeira leitura
Um layout guiado por recursos lista o que o produto faz; este encaminha o leitor para uma única decisão. A rota é visível em a navegação, o título, o selo de anúncio, a linha de estatísticas e a faixa de clientes e em como passos de espaçamento de 16px os espaçam. O leitor de agência recebe a oferta antes das opções.
Por que esta composição funciona para agência
O design defende o argumento em uma única tela. A mídia é um frame estático em 800x592. A mídia carrega a atmosfera, o texto carrega a oferta, e passos de espaçamento de 16px mantêm os dois separados. Dá ao leitor de agência a rota honesta mais curta até a oferta.
Perguntas frequentes
Posso reconstruir hero do Taskly em outra stack?
Taskly foi construído em um único componente, 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.
Como esta entrada de Taskly está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 2.465 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Taskly contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x592, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
