Sobre esta plantilla
Palomar Labs da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. El esquema de color es blanco #F5F3EF de base y verde intenso #2D3A2E para la tipografía, y la página está compuesta en Montserrat. Se entrega como React y Tailwind CSS, y la captura se fija a 1920x1422 antes de escribir código. El movimiento se queda en transiciones de 240ms, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 7.574 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 6,7s de vídeo en bucle detrás del texto.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Palomar Labs.
- Copia la entrada de 240ms y la curva cubic-bezier(0.16, 1, 0.3, 1) tal cual si quieres la misma implementación a la misma velocidad.
Qué incluye
- Los enlaces colapsan a un ancho. Una barra fina ocupa la parte superior de landing page, con la marca a la izquierda y los enlaces compuestos en Montserrat, de modo que la composición se lee antes como contenido que como interfaz. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto. Diseña el estado colapsado antes de añadir un sexto enlace.
- Valores que puedes comprobar. La lista se mantiene corta (pasos de espaciado de 20px, transiciones de 240ms y easing cubic-bezier(0.16, 1, 0.3, 1)), y por eso todo el sistema se puede comprobar a mano. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Un solo medio lleva el tono. Los medios son un solo clip de 6,7s recortado para cubrir el marco de 1920x1422, así que nunca aparecen bandas negras en ningún ancho. Un fotograma de póster a 1920x1422 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- El pie de página es una composición completa. Los enlaces se agrupan en columnas y la marca ocupa su propio bloque, lo que mantiene legible un pie de página largo en lugar de convertirlo en una lista. Los tamaños bajan de los encabezados de columna a los enlaces, así la jerarquía sobrevive a un pie de página denso. Dale a la marca su propia columna.
Movimiento e interacción
La interacción está en los controles
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, así que el resto de la maquetación es una composición fija. Cada estado cambia una sola propiedad, lo que mantiene legible la respuesta. Unos pocos estados fiables valen más que una lista larga de efectos.
Todo el presupuesto de animación
Las transiciones están fijadas en 240ms usando cubic-bezier(0.16, 1, 0.3, 1), y ese es el tiempo que deben cumplir los controles. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento.
Leer Palomar Labs como especificación
Desmonta este tipo de landing page y los valores siguen describiéndolo: pasos de espaciado de 20px y transiciones de 240ms para el marco y el ritmo de debajo. Nada de este tipo de landing page depende de un valor por defecto.
Los tiempos detrás de landing page
Compara el movimiento de aquí con una página guiada por scroll. En ambas hay movimiento; esta lo hace donde dice el brief (transiciones de 240ms, un bucle de 6,7s y estados hover y pulsados), así que el texto sigue delante. Nada se anima por gusto en este tipo de landing page.
Qué gana un producto de IA o SaaS aquí
La contrapartida es la densidad: este tipo de landing page dice menos en la primera pantalla de lo que diría una maquetación centrada en funciones. Lo que conserva es el orden de lectura, y navegación, el titular, la insignia de anuncio, la fila de clientes y la lista de funciones hacen el trabajo que una página más larga repartiría. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Palomar Labs?
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 1920x1422. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de landing page de Palomar Labs con otro stack?
Palomar Labs 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.
¿De dónde sale el diseño de Palomar Labs?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1920x1422.
