Sobre esta plantilla
Aquí no hay una captura sino un caso de página sobre nosotros de Build With Us, con el brief original al lado. La paleta se queda en blanco #FFFFFF de base, amarillo intenso #434437 para la tipografía y azul #337EC8 para los acentos, y el tipo es Inter. Se entrega como React y Tailwind CSS, así que el conjunto de página sobre nosotros se puede trasladar a un proyecto sin traspaso de diseño. Úsalo cuando tu página sobre nosotros necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Los fundadores que le pasen el brief a una agencia usarán el marco de 640x472 como prueba de aceptación de la primera ronda.
- Los responsables de marketing que hereden un diseño de página sobre nosotros usarán secciones de 100vh y pasos de espaciado de 48px para comprobar que una reescritura mantuvo la escala.
- Pensado para responsables de producto que necesitan acotar el diseño de página sobre nosotros a un sprint y no añadir material nuevo.
Qué incluye
- La navegación es fina a propósito. La barra reúne la marca, los enlaces de la sección y un botón en #337EC8, medida en secciones de 100vh y pasos de espaciado de 48px, 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 #337EC8 es el único elemento de la barra con peso. No des a la marca más espacio que el que pide su tipografía.
- El interletraje se cierra al crecer. La línea display se compone en Inter a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio. Conserva los pasos, cambia la tipografía.
- Estructura en una sola pantalla. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 640x472, y por eso se sostiene cuando cambia el texto.
- Una barra de navegación que no estorba. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado.
Movimiento e interacción
Hover solo donde aporta
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. Mantén pequeña la capa interactiva.
Movimiento que no estorba
Esta se entrega como composición estática en 640x472, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
Qué se sostiene para IA y SaaS
Build With Us es la referencia de página sobre nosotros para un producto de IA o SaaS, y responde al problema que ese público tiene de verdad. La paleta se mantiene disciplinada (blanco #FFFFFF y azul #337EC8) y el tipo se compone en Inter, así que nada de la composición depende de una tendencia prestada. Cuando redactas el brief de un desarrollo, esta es la parte que merece copiarse: una sola promesa a tamaño de display y el detalle de apoyo por debajo. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Hacer tuyo este tipo de página sobre nosotros
Cambia primero el contenido y revisa el marco después. Las cifras que hay que proteger mientras sustituyes el texto son estas: secciones de 100vh y pasos de espaciado de 48px. La composición es la parte reutilizable, y sobrevive a una marca distinta.
El reflujo de página sobre nosotros
Aquí el tipo se limita con clamp en lugar de ir a saltos (un clamp entre 32px y 48px), así que la línea de display no pega brincos entre anchos. La versión de móvil es una decisión, no un recurso de emergencia.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Build With Us?
El brief capturado ocupa 6.252 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.
¿El brief de Build With Us es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 6.252 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto de Build With Us depende de React y Tailwind CSS?
Build With Us 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.
