Sobre esta plantilla
Dot muestra una forma de construir este tipo de sección hero para una marca de lifestyle y publica las instrucciones que lo generaron. El color se limita a blanco #DEF0FC de base, negro #1A1A1A para la tipografía y azul brillante #0871E7 para los acentos y la página se compone en Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 800x588 antes de escribir código. El movimiento se queda en transiciones de 100ms. Es más útil cuando cada sección hero de Lifestyle tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Si hay que renunciar al movimiento, el diseño de sección hero sigue leyéndose porque tipografía de 14px a 72px y pasos de espaciado de 14px se encargan de la jerarquía.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 3.871 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Dot.
Qué incluye
- Navegación sin fondo propio. La barra reúne la marca, los enlaces de la sección y un botón en #0871E7, medida en tipografía de 14px a 72px y pasos de espaciado de 14px, así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #0871E7 es el único elemento de la barra con peso. Una acción por barra.
- Primero el texto, después el adorno. La composición de sección hero está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 800x588 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 800x588, y por eso se sostiene cuando cambia el texto.
- Fila superior: marca, enlaces y acción. La fila gasta el contraste en un solo punto: la acción #0871E7, con la marca y los enlaces retenidos sobre el color del texto.
- Aquí nada se hereda. La maquetación trabaja con valores absolutos y no con proporciones: tipografía de 14px a 72px, pasos de espaciado de 14px y transiciones de 100ms. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
Movimiento e interacción
Tiempos cortos y parejos
El brief fija la transición en 100ms, así que una reconstrucción no puede colar un valor por defecto más lento. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca.
Respuesta en los controles
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe. Comprueba los estados en un dispositivo táctil.
Leer Dot como especificación
En este tipo de sección hero no se mide a ojo. Las cifras vienen del brief (tipografía de 14px a 72px y pasos de espaciado de 14px) y la maquetación se ordena según esos pasos en lugar de ajustarse a empujones. Nada de este tipo de sección hero depende de un valor por defecto.
El acierto de sección hero
La contrapartida es la densidad: este tipo de sección hero 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 cifras y el clip de fondo hacen el trabajo que una página más larga repartiría. Da a quien lee páginas de lifestyle el camino más corto y honesto hasta la oferta.
Qué se mueve en Dot
Cuando una página se siente inquieta, casi siempre sobran entradas. Esta mantiene la lista corta: transiciones de 100ms y estados hover y pulsados. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Dot?
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 800x588. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Dot depende de React y Tailwind CSS?
Dot 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.
¿Cómo trato los medios de Dot en un proyecto de cliente?
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 800x588.
