Sobre este template
Esta é a portfólio da Digital Director, publicada com o briefing que a produziu em vez de apenas uma captura de tela. O título da própria página é “Adam Roberts - Design & Engineering”, e a composição é construída em volta exatamente dessas palavras. A paleta é preto #000000 por baixo e branco #FFFFFF para a tipografia, com tipografia Inter. A stack é React e Tailwind CSS, então dá para levar portfólio para um projeto sem handoff de design. O movimento se resume a transições de 400ms, cubic-bezier(0.16,1,0.3,1) e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Tome emprestada a estrutura, não o assunto: a portfólio e os números dela passam para a sua marca sem alteração.
Feito para
- Quem usa um builder de IA e quer um briefing que já traga uma moldura em 1472x1080 em vez de deixar isso para o modelo.
- Feito para product managers que precisam da portfólio limitada a uma sprint e sem novos assets.
- Times de produto que escrevem o texto da Portfólio e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Links colapsam em uma largura. A navegação é uma fileira só, sem um segundo nível embaixo dela. Uma sobreposição mobile assume abaixo do breakpoint de tablet. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa.
- Uma escala para tipo e moldura. O briefing nomeia os números: passos de espaçamento de 10px, transições de 400ms e curva de aceleração cubic-bezier(0.16,1,0.3,1). É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- Um clipe, não uma ilustração. O briefing especifica o vídeo em 1472x1080 com um loop de 7s, e cada elemento de texto é posicionado contra essa moldura. Exporte em 1472x1080 ou mais largo e o recorte cover continua funcionando.
- Duas famílias, funções claras. Com Inter fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. O tracking é definido por tamanho, então a linha de display e a legenda não compartilham um mesmo letter-spacing. A escala está declarada; use.
Movimento e interação
Tempos curtos e combinados
Os tempos são curtos e consistentes (400ms com cubic-bezier(0.16,1,0.3,1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada.
Um loop, não uma linha do tempo
Um único clipe de 7s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O clipe é mudo e inline, então o primeiro frame está disponível sem interação.
Como Digital Director ordena a primeira leitura
Uma tela, uma ação e a navegação, o título, a linha de estatísticas, a lista de recursos e o clipe de fundo entre as duas. O briefing fixa essa ordem em vez de entregar a primeira tela a uma pilha de seções. O leitor de agência recebe a oferta antes das opções.
A portfólio com a sua cara
Se a sua marca tem uma paleta mais pesada, teste contra a moldura antes de assumir. preto #000000 sustenta a página, então um destaque mais escuro precisa de mais contraste do que a referência usa. Uma marca diferente pode reaproveitar a moldura inteira.
Como a portfólio se reorganiza
Responsivo aqui significa que a escala muda, não a hierarquia: a navegação vira um menu compacto no celular. O texto fica acima da dobra, os controles continuam grandes o bastante para o toque e a preferência de movimento reduzido é respeitada. O layout estreito é uma decisão de projeto, não um espremer, e a hierarquia sobrevive a ele.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Digital Director?
O briefing capturado tem 8.947 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 briefing de Digital Director é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 8.947 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Quanto de Digital Director depende de React e Tailwind CSS?
Digital Director 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.
