{"id":540,"date":"2026-07-11T19:31:55","date_gmt":"2026-07-11T19:31:55","guid":{"rendered":"https:\/\/pullsuite.com\/index.php\/guia-de-marca\/"},"modified":"2026-07-11T22:57:46","modified_gmt":"2026-07-11T22:57:46","slug":"guia-de-marca","status":"publish","type":"page","link":"https:\/\/pullsuite.com\/index.php\/guia-de-marca\/","title":{"rendered":"Gu\u00eda de Marca"},"content":{"rendered":"\n<div class=\"wp-block-group pull-bg-blueprint\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"pull-eyebrow wp-block-paragraph\">\/\/ GU\u00cdA INTERNA \u2014 NO P\u00daBLICA<\/p>\n\n\n\n<h1 class=\"wp-block-heading pull-h1\">Gu\u00eda de Marca PULL SUITE<\/h1>\n\n\n\n<p class=\"pull-sub wp-block-paragraph\">Colores, tipograf\u00eda y componentes reales de la web, para que cualquier persona pueda editar o crear p\u00e1ginas nuevas manteniendo la misma imagen de marca.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83d\udd24 Logo<\/h2>\n<\/div><\/div>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">Este es el \u00fanico logo de PULL SUITE. Se usa igual en el men\u00fa superior, en el pie de p\u00e1gina y en la pantalla de acceso \u2014 siempre el mismo archivo, sin recolorear ni deformar.<\/p>\n\n\n\n<div class=\"wp-block-group pull-card\" style=\"padding-top:24px;padding-bottom:24px;padding-left:24px;padding-right:24px;display:inline-block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pullsuite.com\/wp-content\/uploads\/2026\/07\/pullsuite-wordmark-spaced.png\" alt=\"PULL SUITE\" width=\"310\" height=\"54\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list pull-body\">\n<li>PULL en blanco, SUITE en azul (#3E8BFF), con espacio entre las dos palabras.<\/li>\n\n\n\n<li>Tipograf\u00eda Space Grotesk Bold \u2014 la misma de los titulares de la web, no Arial ni Segoe UI.<\/li>\n\n\n\n<li>Tama\u00f1o de referencia en men\u00fa\/pie de p\u00e1gina: 28px de alto. No agrandar.<\/li>\n\n\n\n<li>Nunca a\u00f1adir una segunda versi\u00f3n del nombre (texto \u00abPULL SUITE\u00bb suelto) junto al logo.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83c\udfa8 Colores<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-grid-auto\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pull-swatch-box has-background\" style=\"background-color:#0A0A0B;height:64px;border-radius:8px;margin-bottom:14px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"pull-tag wp-block-paragraph\">Fondo principal<\/p>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">#0A0A0B \u2014 Fondo de toda la web<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pull-swatch-box has-background\" style=\"background-color:#3E8BFF;height:64px;border-radius:8px;margin-bottom:14px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"pull-tag wp-block-paragraph\">Azul de marca<\/p>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">#3E8BFF \u2014 Acentos, enlaces, bot\u00f3n primario<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pull-swatch-box has-background\" style=\"background-color:#111318;height:64px;border-radius:8px;margin-bottom:14px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"pull-tag wp-block-paragraph\">Fondo de tarjeta<\/p>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">#111318 \u2014 Cards, pills<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pull-swatch-box has-background\" style=\"background-color:rgba(255,255,255,.10);height:64px;border-radius:8px;margin-bottom:14px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"pull-tag wp-block-paragraph\">Borde sutil<\/p>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">rgba(255,255,255,.10) \u2014 Bordes de tarjetas<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pull-swatch-box has-background\" style=\"background-color:rgba(255,255,255,.55);height:64px;border-radius:8px;margin-bottom:14px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p class=\"pull-tag wp-block-paragraph\">Texto secundario<\/p>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">rgba(255,255,255,.55) \u2014 Cuerpo de texto, subt\u00edtulos<\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83d\udd20 Tipograf\u00eda<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"pull-tag wp-block-paragraph\">Space Grotesk Bold \u2014 Titulares (H1, H2, H3, H4)<\/p>\n\n\n\n<h3 class=\"wp-block-heading pull-h3\">As\u00ed se ve un t\u00edtulo de secci\u00f3n<\/h3>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"pull-tag wp-block-paragraph\">IBM Plex Sans \u2014 Texto de cuerpo y botones<\/p>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">As\u00ed se ve un p\u00e1rrafo normal de contenido: descripciones de m\u00f3dulos, textos de p\u00e1gina, botones.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"pull-tag wp-block-paragraph\">IBM Plex Mono \u2014 Etiquetas t\u00e9cnicas (eyebrow, pills, contadores)<\/p>\n\n\n\n<p class=\"pull-eyebrow wp-block-paragraph\">\/\/ AS\u00cd SE VE UN EYEBROW<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83d\udd18 Botones<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button pull-btn-primary\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Bot\u00f3n primario<\/a><\/div>\n\n\n\n<div class=\"wp-block-button pull-btn-ghost\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Bot\u00f3n secundario \u2192<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">Primario: para la llamada a la acci\u00f3n principal de la p\u00e1gina (una por p\u00e1gina). Secundario: para acciones de menor prioridad, como \u00abver m\u00e1s\u00bb.<\/p>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83c\udff7\ufe0f Pills y etiquetas<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-pills-row\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"pull-filter-pill wp-block-paragraph\"><a href=\"#\">\ud83c\udfed Pill de categor\u00eda<\/a><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"pull-cat-count wp-block-paragraph\">Contador tipo \u00ab11 m\u00f3dulos\u00bb<\/p>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83d\uddc2\ufe0f Tarjetas de m\u00f3dulo<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-grid-auto\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pull-card\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image pull-card-thumb\"><img decoding=\"async\" src=\"https:\/\/pullsuite.com\/wp-content\/uploads\/2026\/07\/modulo-heijunka-cover.jpg\" alt=\"Ejemplo de tarjeta de m\u00f3dulo con imagen de f\u00e1brica\"\/><\/figure>\n\n\n\n<p class=\"pull-tag wp-block-paragraph\">Categor\u00eda<\/p>\n\n\n\n<h4 class=\"wp-block-heading pull-h4\">Nombre del m\u00f3dulo<\/h4>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">Una frase corta que explica el beneficio del m\u00f3dulo, no la lista de funciones.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">Regla clave: cada tarjeta de m\u00f3dulo lleva SIEMPRE una foto distinta. Nunca reutilizar la misma foto en dos m\u00f3dulos, ni siquiera dentro de la misma categor\u00eda.<\/p>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\u25a6 Fondo de rejilla<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-bg-blueprint\" style=\"padding-top:32px;padding-bottom:32px;padding-left:24px;padding-right:24px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"pull-body wp-block-paragraph\">Clase: <code>pull-bg-blueprint<\/code>. Se usa en la secci\u00f3n de cabecera (hero) de cada p\u00e1gina nueva, para dar la sensaci\u00f3n de \u00abplano t\u00e9cnico\u00bb de f\u00e1brica.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\u2705 Reglas de oro<\/h2>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list pull-body\">\n<li>Editar siempre desde el editor visual de WordPress, con los bloques nativos (p\u00e1rrafo, t\u00edtulo, imagen, bot\u00f3n, columnas). Nunca pegar HTML o CSS a mano.<\/li>\n\n\n\n<li>Para que un bloque tenga el estilo de la marca, a\u00f1adirle la clase CSS correspondiente desde \u00abAvanzado \u2192 Clase CSS adicional\u00bb en el panel derecho (p. ej. <code>pull-h1<\/code>, <code>pull-body<\/code>, <code>pull-card<\/code>).<\/li>\n\n\n\n<li>Todo enlace interno de la web (menos la Home) necesita <code>\/index.php\/<\/code> delante de la ruta, o dar\u00e1 error 404.<\/li>\n\n\n\n<li>Cada imagen debe ser propia de esa p\u00e1gina\/m\u00f3dulo \u2014 no repetir fotos entre tarjetas o categor\u00edas.<\/li>\n\n\n\n<li>El logo es siempre el mismo archivo (ver secci\u00f3n Logo m\u00e1s arriba), en todos los sitios donde aparece.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group pull-cat-heading-wrap\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading pull-cat-heading\">\ud83e\udde9 Patrones listos para usar<\/h2>\n<\/div><\/div>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">Para no tener que escribir clases CSS a mano, estos 4 componentes ya est\u00e1n disponibles como patrones en el editor: al pulsar el bot\u00f3n \u00ab+\u00bb para a\u00f1adir un bloque, ve a la pesta\u00f1a \u00abPatrones\u00bb \u2192 \u00abMis patrones\u00bb y encontrar\u00e1s:<\/p>\n\n\n\n<ul class=\"wp-block-list pull-body\">\n<li><strong>PULL \u2014 Secci\u00f3n con fondo de rejilla (hero)<\/strong>: para la cabecera de una p\u00e1gina nueva.<\/li>\n\n\n\n<li><strong>PULL \u2014 Cabecera de categor\u00eda<\/strong>: para separar secciones dentro de una p\u00e1gina.<\/li>\n\n\n\n<li><strong>PULL \u2014 Tarjeta de m\u00f3dulo<\/strong>: la tarjeta con foto, categor\u00eda, t\u00edtulo y texto que se usa en el Hub de M\u00f3dulos.<\/li>\n\n\n\n<li><strong>PULL \u2014 CTA Solicitar demo<\/strong>: el bloque de llamada a la acci\u00f3n con el bot\u00f3n de demo.<\/li>\n<\/ul>\n\n\n\n<p class=\"pull-body wp-block-paragraph\">Al insertar un patr\u00f3n se pega como bloques normales \u2014 puedes editar el texto, la imagen y el enlace libremente sin afectar a otras p\u00e1ginas que usen el mismo patr\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\/\/ GU\u00cdA INTERNA \u2014 NO P\u00daBLICA Gu\u00eda de Marca PULL SUITE Colores, tipograf\u00eda y componentes reales de la web, para que cualquier persona pueda editar o crear p\u00e1ginas nuevas manteniendo la misma imagen de marca. \ud83d\udd24 Logo Este es el \u00fanico logo de PULL SUITE. Se usa igual en el men\u00fa superior, en el pie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/blocks.php","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-540","page","type-page","status-publish","entry"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/pages\/540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/comments?post=540"}],"version-history":[{"count":2,"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/pages\/540\/revisions"}],"predecessor-version":[{"id":648,"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/pages\/540\/revisions\/648"}],"wp:attachment":[{"href":"https:\/\/pullsuite.com\/index.php\/wp-json\/wp\/v2\/media?parent=540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}