Sobre esta plantilla
Liquid Glass CTA es una referencia de trabajo para un producto de IA o SaaS: el desglose de bloque de CTA, con la maquetación medida y lista para recrear. El color se limita a negro #111111 de base y índigo apagado #9A83AB para los acentos y la página se compone en Instrument Serif. Se entrega como React y Tailwind CSS, así que el conjunto de bloque de CTA se puede trasladar a un proyecto sin traspaso de diseño. Úsalo cuando tu bloque de CTA necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Equipos externos que se hacen cargo de su bloque de CTA y necesitan fijar un marco de 640x466 en el repositorio antes del primer commit.
- Este diseño de bloque de CTA responde a quien construye y quiere saber qué controlan realmente pasos de espaciado de 200px en la maquetación.
- Equipos de producto que escriben los textos de CTA y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- Medido, no estimado a ojo. En la maquetación nada queda a la intuición: el brief cita pasos de espaciado de 200px y el montaje tiene que dar esos valores. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Prueba en una sola fila. La fila se sitúa arriba en bloque de CTA como prueba y no como adorno. Las cifras llevan el acento #9A83AB mientras todo lo que las rodea se queda en el color del texto.
- El tipo hace el estilo. El tipo es Instrument Serif en lo alto de la escala, con el texto de apoyo muy por debajo, así la jerarquía no necesita color para leerse. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor.
- Valores que puedes comprobar. El espaciado se cita igual (pasos de espaciado de 200px), no como una escala que crece sola.
Movimiento e interacción
Casi nada de movimiento
Esta se entrega como composición estática en 640x466, así que la jerarquía tiene que funcionar sin movimiento, y funciona. Solo se mueven los elementos que responden al puntero. Deja el movimiento en los controles.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 640x466 sostenga la página, con el hover y la pulsación como únicos cambios. No hacen falta líneas de tiempo de scroll.
Leer Liquid Glass CTA como especificación
En este tipo de bloque de CTA no se mide a ojo. Las cifras vienen del brief (pasos de espaciado de 200px) y la maquetación se ordena según esos pasos en lugar de ajustarse a empujones. Nada de este tipo de bloque de CTA depende de un valor por defecto.
Hacer tuyo este tipo de bloque de CTA
Cambia primero el texto y el material, después el color y por último la maquetación. El marco de 640x466 y la escala de Instrument Serif son lo que sostiene la página, así que sustituye alrededor de ellos y no a través de ellos. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
El reflujo de bloque de CTA
El coste de una escala fluida es menos control sobre los tamaños exactos. A cambio, la línea de display se mantiene proporcionada, y por eso un clamp entre 50px y 200px está en el brief. El reflujo mantiene la acción al alcance en cualquier ancho.
Preguntas frecuentes
¿Cómo está organizada esta ficha de Liquid Glass CTA?
Todo lo que se cita en la página procede del brief capturado de 10.077 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué me llevo cuando copio el brief de Liquid Glass CTA?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 640x466. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de bloque de CTA de Liquid Glass CTA con otro stack?
Liquid Glass CTA se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
