Sobre esta plantilla
Guardnet Benefits es un caso de sección de funciones de fintech: nace de un único brief escrito y esta página lo documenta. Toda la página se construye sobre negro #0E0E0F de base y azul #1E3A8A para los acentos. Se entrega como React y Tailwind CSS, y la captura se fija a 640x466 antes de escribir código. Sirve de referencia cuando construyas este tipo de sección de funciones para un producto fintech y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Los responsables de marketing que hereden un diseño de sección de funciones usarán tipografía de 13px a 14px y pasos de espaciado de 13px para comprobar que una reescritura mantuvo la escala.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de sección de funciones como patrón que copian las demás páginas.
- Pensado para un fundador en solitario que saca un único diseño de sección de funciones para un producto fintech y no tiene ningún sistema de diseño detrás.
Qué incluye
- Medido, no estimado a ojo. Los tamaños se citan, no se heredan: tipografía de 13px a 14px y pasos de espaciado de 13px. Cambia la tipografía o el texto y esas relaciones se mantienen. Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Cifras donde va la prueba. La fila se sitúa arriba en sección de funciones como prueba y no como adorno. Las cifras llevan el acento #1E3A8A mientras todo lo que las rodea se queda en el color del texto.
- La composición es el contenido. La composición está completa en 640x466: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 640x466, y por eso se sostiene cuando cambia el texto.
- Los pasos de espaciado van cifrados. El espaciado se cita igual (tipografía de 13px a 14px y pasos de espaciado de 13px), no como una escala que crece sola.
Movimiento e interacción
Casi nada de movimiento
Aquí no hay librería de scroll: la composición de 640x466 se queda quieta y solo se mueven los elementos que responden a ti. Solo se mueven los elementos que responden al puntero.
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.
Qué se sostiene para Fintech
Cuenta las decisiones de este tipo de sección de funciones y todas remiten a un único documento: 4.108 caracteres que nombran el marco en 640x466, el tipo y el ritmo. Guardnet Benefits enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Las cifras detrás de sección de funciones
4.108 caracteres de brief producen una especificación completa. La parte que sostiene todo es corta: tipografía de 13px a 14px y pasos de espaciado de 13px. Nada de este tipo de sección de funciones depende de un valor por defecto.
El orden detrás de sección de funciones
Si tu página abre hoy con funciones, este es el orden que hay que copiar: la fila de cifras, la cuadrícula de tarjetas y el clip de fondo delante, el detalle de apoyo después y tipografía de 13px a 14px y pasos de espaciado de 13px marcando la distancia. Quien busca fintech recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Guardnet Benefits es una especificación cerrada o un punto de partida?
El brief capturado ocupa 4.108 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Cómo está organizada esta ficha de Guardnet Benefits?
Todo lo que se cita en la página procede del brief capturado de 4.108 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Por qué la ficha nombra React y Tailwind CSS?
Guardnet Benefits 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.
