Sobre este template
Liquid Glass CTA é a referência de bloco de CTA para um produto de IA ou SaaS, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. A paleta se reduz a preto #111111 por baixo e índigo suave #9A83AB carregando os destaques, e a tipografia é Instrument Serif. A stack é React e Tailwind CSS, então dá para levar bloco de CTA para um projeto sem handoff de design. Tome emprestada a estrutura, não o assunto: a bloco de CTA e os números dela passam para a sua marca sem alteração.
Feito para
- Pegue a moldura em 640x466 e passos de espaçamento de 200px desta bloco de CTA antes de pegar qualquer outra coisa.
- Feito para product managers que precisam da bloco de CTA limitada a uma sprint e sem novos assets.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta bloco de CTA como o padrão que todas as outras páginas copiam.
O que está incluído
- Toda medida está escrita. O briefing fixa passos de espaçamento de 200px e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- Faixa de números, não tabela. A fileira de números é a prova: três ou quatro valores em uma linha, rótulos pequenos embaixo de cada um, na mesma Instrument Serif da interface para ler como dado e não como decoração. Os números carregam o destaque #9A83AB enquanto tudo em volta fica na cor do texto.
- Medido contra a viewport. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 200px), não como uma escala que cresce sozinha.
- Números no tamanho de display. Os números são compostos em Instrument Serif em um tamanho mais próximo do título do que do corpo de texto.
Movimento e interação
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x466 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. Nenhuma linha do tempo de scroll é necessária.
Movimento que sai da frente
Esta é entregue como composição estática em 640x466, então a hierarquia precisa funcionar sem movimento, e funciona.
Ler Liquid Glass CTA como especificação
Quando uma reconstrução desanda, o espaçamento é o primeiro a ir. Liquid Glass CTA evita isso publicando passos de espaçamento de 200px junto com a composição. Nada nesta bloco de CTA depende de um padrão.
A bloco de CTA com a sua cara
Quando você colocar a sua própria mídia, mantenha o recorte e a ordem das camadas. A mídia é um frame estático em 640x466. É esse posicionamento que mantém o texto legível. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Como a bloco de CTA se reorganiza
Uma escala fluida custa menos controle sobre os tamanhos exatos. O que você ganha é uma linha de display que se mantém proporcional, e é por isso que um clamp entre 50px e 200px está no briefing. Nada importante é descartado em larguras estreitas.
Perguntas frequentes
O que posso fazer com o briefing de Liquid Glass CTA depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 10.077 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Qual é o tamanho do prompt por trás de Liquid Glass CTA?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 640x466, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir bloco de CTA do Liquid Glass CTA em outra stack?
Liquid Glass CTA 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.
