// GUÍA INTERNA — NO PÚBLICA
Guía de Marca PULL SUITE
Colores, tipografía y componentes reales de la web, para que cualquier persona pueda editar o crear páginas nuevas manteniendo la misma imagen de marca.
🔤 Logo
Este es el único logo de PULL SUITE. Se usa igual en el menú superior, en el pie de página y en la pantalla de acceso — siempre el mismo archivo, sin recolorear ni deformar.
- PULL en blanco, SUITE en azul (#3E8BFF), con espacio entre las dos palabras.
- Tipografía Space Grotesk Bold — la misma de los titulares de la web, no Arial ni Segoe UI.
- Tamaño de referencia en menú/pie de página: 28px de alto. No agrandar.
- Nunca añadir una segunda versión del nombre (texto «PULL SUITE» suelto) junto al logo.
🎨 Colores
Fondo principal
#0A0A0B — Fondo de toda la web
Azul de marca
#3E8BFF — Acentos, enlaces, botón primario
Fondo de tarjeta
#111318 — Cards, pills
Borde sutil
rgba(255,255,255,.10) — Bordes de tarjetas
Texto secundario
rgba(255,255,255,.55) — Cuerpo de texto, subtítulos
🔠 Tipografía
Space Grotesk Bold — Titulares (H1, H2, H3, H4)
Así se ve un título de sección
IBM Plex Sans — Texto de cuerpo y botones
Así se ve un párrafo normal de contenido: descripciones de módulos, textos de página, botones.
IBM Plex Mono — Etiquetas técnicas (eyebrow, pills, contadores)
// ASÍ SE VE UN EYEBROW
🔘 Botones
Primario: para la llamada a la acción principal de la página (una por página). Secundario: para acciones de menor prioridad, como «ver más».
🏷️ Pills y etiquetas
Contador tipo «11 módulos»
🗂️ Tarjetas de módulo
Categoría
Nombre del módulo
Una frase corta que explica el beneficio del módulo, no la lista de funciones.
Regla clave: cada tarjeta de módulo lleva SIEMPRE una foto distinta. Nunca reutilizar la misma foto en dos módulos, ni siquiera dentro de la misma categoría.
▦ Fondo de rejilla
Clase: pull-bg-blueprint. Se usa en la sección de cabecera (hero) de cada página nueva, para dar la sensación de «plano técnico» de fábrica.
✅ Reglas de oro
- Editar siempre desde el editor visual de WordPress, con los bloques nativos (párrafo, título, imagen, botón, columnas). Nunca pegar HTML o CSS a mano.
- Para que un bloque tenga el estilo de la marca, añadirle la clase CSS correspondiente desde «Avanzado → Clase CSS adicional» en el panel derecho (p. ej.
pull-h1,pull-body,pull-card). - Todo enlace interno de la web (menos la Home) necesita
/index.php/delante de la ruta, o dará error 404. - Cada imagen debe ser propia de esa página/módulo — no repetir fotos entre tarjetas o categorías.
- El logo es siempre el mismo archivo (ver sección Logo más arriba), en todos los sitios donde aparece.
🧩 Patrones listos para usar
Para no tener que escribir clases CSS a mano, estos 4 componentes ya están disponibles como patrones en el editor: al pulsar el botón «+» para añadir un bloque, ve a la pestaña «Patrones» → «Mis patrones» y encontrarás:
- PULL — Sección con fondo de rejilla (hero): para la cabecera de una página nueva.
- PULL — Cabecera de categoría: para separar secciones dentro de una página.
- PULL — Tarjeta de módulo: la tarjeta con foto, categoría, título y texto que se usa en el Hub de Módulos.
- PULL — CTA Solicitar demo: el bloque de llamada a la acción con el botón de demo.
Al insertar un patrón se pega como bloques normales — puedes editar el texto, la imagen y el enlace libremente sin afectar a otras páginas que usen el mismo patrón.