Sobre esta plantilla
ADHD Planner da a un producto de salud o bienestar una primera pantalla terminada y las cifras que la produjeron. El esquema de color es naranja apagado #F6E4CF de base, naranja intenso #321C04 para la tipografía y naranja apagado #D9C4AA para los acentos, y la página está compuesta en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1458x1080 antes de escribir código. Todo el movimiento cabe en transiciones de 300ms, cubic-bezier(0.77,0,0.175,1) y un vídeo en bucle de fondo. Úsalo cuando tu sección de precios necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Diseñadores que necesitan los números antes que nada: tipografía de 42px a 96px y pasos de espaciado de 25px, todo citado del brief.
- Pensado para responsables de producto que necesitan acotar el diseño de sección de precios a un sprint y no añadir material nuevo.
- Este diseño de sección de precios sirve a fundadores que necesitan una pantalla de prueba de que los textos de salud aguantan 7,3s de vídeo en bucle.
Qué incluye
- La barra sigue la cuadrícula. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #D9C4AA, todo al paso de tipo más pequeño del brief. Los enlaces se componen a un tamaño menor que la marca, y la acción en #D9C4AA es el único elemento de la barra con peso. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Una escala para tipo y marco. La lista se mantiene corta (tipografía de 42px a 96px, pasos de espaciado de 25px, transiciones de 300ms y easing cubic-bezier(0.77,0,0.175,1)), y por eso todo el sistema se puede comprobar a mano. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo.
- Medios detrás del texto. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 7,3s a 1458x1080 detrás de todo lo demás. Un fotograma de póster a 1458x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Los paneles sostienen el centro. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Inter, dispuestos para que el ojo avance en horizontal y no en vertical. La altura de los paneles la marca el texto, así una línea más larga no rompe la alineación de la fila. Deja que el número de paneles lo marque el texto.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 7,3s en 1458x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Tiempos cortos y parejos
Los tiempos son cortos y coherentes (300ms con la curva cubic-bezier(0.77,0,0.175,1)), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. Si cambia el easing, la duración tiene que revisarse con él.
Cómo ordena ADHD Planner la primera lectura
Comprometerse con un solo recorrido de lectura cierra los demás. El brief lo acepta, fija navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas en su sitio y gasta tipografía de 42px a 96px y pasos de espaciado de 25px en hacer obvio el camino. Quien busca salud recibe la oferta antes que las opciones.
Los tiempos detrás de sección de precios
Cuenta los elementos animados y la lista es corta: transiciones de 300ms, un bucle de 7,3s y una aparición al hacer scroll. Nada se anima por gusto en este tipo de sección de precios.
Hacer tuyo este tipo de sección de precios
No hace falta rehacer este tipo de sección de precios para que sea tuyo. Sustituye el titular y el material, conserva la escala (tipografía de 42px a 96px y pasos de espaciado de 25px) y la maquetación seguirá leyéndose como fue diseñada. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Preguntas frecuentes
¿Qué puedo hacer con el brief de ADHD Planner una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 8.810 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de ADHD Planner?
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 1458x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
ADHD Planner 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.
