Sobre esta plantilla
Radial Diagram da a una agencia o un estudio una primera pantalla terminada y las cifras que la produjeron. El titular dice “Our Comprehensive Branding Approach”, y el orden de sección de funciones gira alrededor de esa línea. La paleta es negro #191919 de base y blanco #EAEAEA para la tipografía, con la tipografía DM Sans. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se limita a transiciones de 0.7s, lo bastante discreto para que el texto siga mandando. Sirve de referencia cuando construyas este tipo de sección de funciones para una agencia o un estudio y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Los responsables de producto que tengan que presupuestar la implementación leerán un marco de 640x476 como el alcance real del trabajo.
- Quien le pase el brief de sección de funciones a un modelo usará el prompt de 5.364 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección de funciones cuyo titular tiene que seguir siendo tan largo como el de Radial Diagram.
Qué incluye
- Una escala para tipo y marco. Los tamaños se leyeron del render en 640x476: pasos de espaciado de 60px y transiciones de 0.7s. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- La escala es el estilo. Los pasos de tamaño y el interletraje del brief son los que dan el tono: DM Sans a un tamaño display cerrado y una caída clara hasta el texto de apoyo. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor.
- Medido contra el viewport. El espaciado se cita igual (pasos de espaciado de 60px y transiciones de 0.7s), no como una escala que crece sola.
- El tipo fija la jerarquía. Compón la línea display al final. La captura de la referencia es de 640x476.
Movimiento e interacción
El tiempo va en el brief
Una sola duración cubre las interacciones (0.7s), y eso hace que hover y pulsación se lean como un mismo sistema. El easing se especifica junto a la duración (0.7s), así que una reconstrucción no puede colar otra sensación sin avisar.
Movimiento que no estorba
Esta se entrega como composición estática en 640x476, así que la jerarquía tiene que funcionar sin movimiento, y funciona. Solo se mueven los elementos que responden al puntero.
Las cifras detrás de sección de funciones
5.364 caracteres de brief producen una especificación completa. La parte que sostiene todo es corta: pasos de espaciado de 60px y transiciones de 0.7s. Nada de este tipo de sección de funciones depende de un valor por defecto.
El argumento de sección de funciones
Frente a un hero de plantilla, la diferencia está en lo que falta. No hay cuadrícula de tarjetas, ni carrusel, ni una segunda llamada a la acción: solo la fila de cifras, con pasos de espaciado de 60px y transiciones de 0.7s como referencia. Radial Diagram enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Qué se mueve en Radial Diagram
El movimiento ambicioso suele costarle la legibilidad a la primera pantalla. Este brief mantiene el movimiento lo bastante corto para que el tipo nunca tenga que esperar: transiciones de 0.7s y estados hover y pulsados. Nada se anima por gusto en este tipo de sección de funciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Radial Diagram?
El brief capturado ocupa 5.364 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.
¿Necesito React y Tailwind CSS para recrear Radial Diagram?
Radial Diagram 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.
¿Cuánto de Radial Diagram está animado?
Las entradas y los cambios de estado se quedan en 0.7s. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
