Sobre esta plantilla
Orbis Hello es la referencia de página sobre nosotros para una marca de lifestyle, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. La paleta es azul intenso #13142D de base, blanco #EFF4FF para la tipografía y lima brillante #6FFF00 para los acentos, con la tipografía Anton. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. Es más útil cuando cada página sobre nosotros de Lifestyle tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Este diseño de página sobre nosotros está pensado para agencias que necesitan que el marco de 640x470 sobreviva a tres rondas de cambios del cliente.
- Este diseño de página sobre nosotros responde a quien construye y quiere saber qué controlan realmente tipografía de 14px a 68px y pasos de espaciado de 20px en la maquetación.
- Pensado para un fundador en solitario que saca un único diseño de página sobre nosotros para una marca de lifestyle y no tiene ningún sistema de diseño detrás.
Qué incluye
- Aquí nada se hereda. El brief fija tipografía de 14px a 68px y pasos de espaciado de 20px y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
- Números en vez de una afirmación. Una fila de cifras se sitúa por encima del pliegue, compuesta en Anton en lo alto de la escala, con #6FFF00 reservado para las cifras que sostienen una afirmación. Las cifras llevan el acento #6FFF00 mientras todo lo que las rodea se queda en el color del texto.
- Números que llegan al montaje. El espaciado se cita igual (tipografía de 14px a 68px y pasos de espaciado de 20px), no como una escala que crece sola.
- Prueba por encima del pliegue. Las estadísticas se tratan como tipografía: cifras al tamaño display, etiquetas en el paso más pequeño del brief y todo en #6FFF00 o en el color del texto, nunca en una tarjeta de color.
Movimiento e interacción
Puntero solo donde ayuda
La capa interactiva es pequeña a propósito: estados hover en los botones y los enlaces y no en todas las tarjetas. Los estados están nombrados en el brief, así que la página no depende de ninguna librería de efectos hover. Unos pocos estados fiables valen más que una lista larga de efectos.
Movimiento que no estorba
El brief deja fuera la animación y deja que la maquetación de 640x470 sostenga la página, con el hover y la pulsación como únicos cambios. Solo se mueven los elementos que responden al puntero.
El acierto de página sobre nosotros
La razón de que esto funcione para una marca de lifestyle es que nunca pide al lector que arme el mensaje. La maquetación, el tipo y el color están decididos (azul intenso #13142D y lima brillante #6FFF00, compuestos en Anton), así que la primera pantalla se lee como un argumento cerrado y no como un montón de piezas. Da a quien lee páginas de lifestyle el camino más corto y honesto hasta la oferta.
Qué se mueve en Orbis Hello
El movimiento es una lista corta, no un sistema. El brief nombra estados hover y pulsados y el resto de la página se queda quieto. Nada se anima por gusto en este tipo de página sobre nosotros.
El reflujo de página sobre nosotros
Una escala fluida y otra a saltos se parecen en pantalla ancha. Estrecha el viewport y aparece la diferencia: un clamp entre 14px y 68px frente a saltos fijos. La maquetación estrecha es una decisión y no un ajuste forzado, y la jerarquía sobrevive a ella.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Orbis Hello?
El brief capturado ocupa 5.232 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.
¿Por qué la ficha nombra React y Tailwind CSS?
Orbis Hello 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.
¿Qué color de Orbis Hello carga con las acciones?
El acento es lima brillante #6FFF00 y aparece en los elementos que se supone que vas a pulsar. Todo lo demás se queda sobre azul intenso #13142D, así que el énfasis nunca compite con la retícula.
