Sobre este template
AI Workflow Agents é uma referência prática para um produto de IA ou SaaS: portfólio com layout definido, medidas tiradas e tudo pronto para reconstruir. O título da própria página é “Axon — Digital Workers for Mundane Workflows”, e a composição é construída em volta exatamente dessas palavras. A cor se limita a branco #E8E6F1 por baixo, índigo profundo #1B133C para a tipografia e magenta #7A4064 carregando os destaques, composta em Instrument Serif. A entrega é um único componente: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento cabe todo em um loop de vídeo ao fundo. Use quando a portfólio precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Esta portfólio é feita para agências que precisam da moldura em 1444x1080 sobrevivendo a três rodadas de edições do cliente.
- Feito para um designer entrando em um projeto que já entrega um único componente e só precisa do texto substituído.
- Desenvolvedores front-end que precisam entregar isso normalmente vão usar um único componente como implementação de referência.
O que está incluído
- Navegação sem fundo próprio. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #7A4064, tudo no menor passo tipográfico do briefing. Os links são compostos abaixo da marca em tamanho, e a ação #7A4064 é o único elemento da barra com peso.
- Uma escala para tipo e moldura. O briefing declara os tamanhos na captura (seções de 100vh), então dá para conferir uma reconstrução em vez de estimá-la. O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- Mídia atrás da tipografia. Um único clipe mudo em loop preenche a moldura em 1444x1080 e 6,9s, com object-fit cover e o texto empilhado acima. O briefing mantém sobreposições fora do vídeo para nada acinzentar a imagem. O loop é curto o bastante (6,9s) para o olho ler como textura e não como linha do tempo.
- Cada família com uma função. Os passos de tamanho e o tracking do briefing são o que dá o tom: Instrument Serif em um tamanho de display apertado, depois uma queda clara para o texto de apoio. O passo de legenda é pequeno o bastante para ficar sob um número sem mudar o ritmo da página. Não acrescente um tamanho sem função.
Movimento e interação
Uma superfície interativa pequena
Os estados são tratados por componente (estados de hover nos botões e links, não em todos os cards), não por uma camada global de animação. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento.
Um loop, não uma linha do tempo
O movimento ambiente vem do loop de 6,9s em 1444x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O clipe é mudo e inline, então o primeiro frame está disponível sem interação. Grave ou exporte em 1444x1080 ou mais largo.
Como a portfólio se reorganiza
Não dá para resolver uma tela estreita encolhendo-a. Este briefing trata a mudança na tipografia e na navegação: a seção fica presa a 100vh. A escala muda com a viewport; a sequência, não.
O que se move em AI Workflow Agents
Um pacote de animações prontas teria sido mais rápido de publicar. O briefing especifica estados de hover e de clique e um loop de mídia de 6,9s, e é por isso que a página lê como autoral, não como montada. Nada anima por si nesta portfólio.
O que mudar primeiro em AI Workflow Agents
Comece pela promessa, não pela decoração. Reescreva “Axon — Digital Workers for Mundane Workflows” como uma frase que diga o que você faz, depois componha essa frase em Instrument Serif no tamanho de display que o briefing usa. Troque magenta #7A4064 pelo seu próprio destaque e confira o contraste contra branco #E8E6F1 antes de mexer em qualquer outra coisa. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
Perguntas frequentes
Por que a entrada cita um único componente?
AI Workflow Agents 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 AI Workflow Agents está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 3.215 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 AI Workflow Agents contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1444x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
