Sistema de diseño
Iluminando el hoy y acercando el mañana
- Versión2
- AlcancePrograma
- Fecha2026-11-04
- Pertenece aSingular Works
- OrigenOdoo, versión publicada
Identidad
Propósito, misión, visión y valores
Parte de Singular Works
Iluminando el hoy y acercando el mañana
Eslogan
Texto institucional
- Una hora cada miércoles con Javier Pascual en Radio Intercontinental (de 18:00 a 19:00, FM 95.4 y 107.8 en Madrid); después, en vídeo y en pódcast.
- Patrocinio: lo admite.
Logotipo
Variantes, área de respeto y usos
El logotipo es arte cerrado: se coloca, nunca se redibuja ni se vuelve a componer con texto. Cada variante existe en SVG (web, impresión) y PNG a 3840 px con transparencia (composición de vídeo en 4K, donde Pillow no lee vectores; los PNG a 1920 se conservan para 1080p). Dos versiones y tres orientaciones cubren el uso normal; dos derivadas de tinta única resuelven los casos límite.
Variantes
Área de respeto
altura de la P del isotipo, por los cuatro lados
Tamaños mínimos
- Horizontal
- 120 px
- Horizontal mm
- 30
- Isotipo
- 32 px
- Isotipo mm
- 10
- Mosca video
- 72 px
Usos prohibidos
-
El logotipo translúcido no se pone sobre plano claro, sobreexpuesto ni fondo blanco.
-
El negativo a dos tonos no se usa en fotografía, vídeo, carátulas, reels ni marca de agua.
-
recomponer el texto con otra tipografia (el texto es parte del arte)
Color
Rampas, roles y contrastes
Dos rampas de cinco pasos, transcritas literalmente de la plantilla de color de la marca: azul marino como base estructural y amarillo como único acento. Los dos valores grandes de la plantilla —#22264D y #FFDD00— son los primarios; el resto son sus variantes de apoyo.
Rampas
Primario
#060923
#131639
#22264D
Azul marino 700, primario de marca (#22264D): superficie de paneles y tinta sobre acento. Contraste: 10,74:1 sobre #ffdd00; 14,46:1 sobre #ffffff.
#22264D
Azul marino 700, primario de marca (#22264D): superficie de paneles y tinta sobre acento. Contraste: 10,74:1 sobre #ffdd00; 14,46:1 sobre #ffffff.
#35395D
#4F537B
Azul marino 500 (periwinkle). CMYK 77,67,29,13. Rampa de marca; los componentes usan roles, no pasos de rampa.
Acento
#9B8700
#C6AB00
#FFDD00
Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
#FFDD00
Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
#FFE439
#FFEA64
Paleta
#FFFFFF
RGB 255, 255, 255
Blanco: tinta principal sobre navy y fondo del tema claro. Nunca sobre amarillo.
#9296BA
RGB 146, 150, 186
Texto secundario sobre superficie plana navy (5,02:1 sobre #22264d). No usar sobre fondo teñido ni sobre superficie alta.
#C3C6DE
RGB 195, 198, 222
Texto tenue sobre fondos teñidos de avisos e insignias (7,47:1 sobre el tinte al 14 %).
#3FD08F
RGB 63, 208, 143
Fase completada, validación correcta.
#FF6B7A
RGB 255, 107, 122
Fallo de fase, campo inválido.
#A8ADDC
RGB 168, 173, 220
Aviso neutro, dato detectado.
#F2F2F6
RGB 242, 242, 246
Superficie del tema claro (impresión, documentos, firma de correo).
#D8D9E4
RGB 216, 217, 228
Borde del tema claro.
Roles
Claro
-
Tinta tenue sobre tinte
#35395D -
Acento hover
#FFE439 -
Acento activo
#C6AB00 -
Exito
#3FD08F -
Error
#FF6B7A -
Info
#A8ADDC -
Foco
#9B8700 -
Superficie alta
#E7E8EF -
Borde fuerte
#B9BCCE -
Fondo
#FFFFFF -
Superficie
#F2F2F6 -
Borde
#D8D9E4 -
Tinta
#22264D -
Tinta tenue
#4F537B -
Acento
#FFDD00 -
Acento tinta
#22264D
Oscuro
-
Tinta tenue sobre tinte
#C3C6DE -
Acento hover
#FFE439 -
Acento activo
#C6AB00 -
Exito
#3FD08F -
Error
#FF6B7A -
Info
#A8ADDC -
Foco
#FFDD00 -
Superficie alta
#35395D -
Borde fuerte
#4F537B -
Fondo
#131639 -
Superficie
#22264D -
Borde
#35395D -
Tinta
#FFFFFF -
Tinta tenue
#9296BA -
Acento
#FFDD00 -
Acento tinta
#22264D
Contrastes
Rol tinta / primario-800
17.47:1 AAA
Rol tinta / primario
14.45:1 AAA
acento / primario
10.73:1 AAA
primario / acento
10.73:1 AAA
Rol tinta tenue / primario
5.02:1 AA
primario / Rol tinta
14.45:1 AAA
primario-500 / Rol tinta
7.35:1 AAA
Rol info / Contraste 272b56
6.17:1 AA
Rol tinta tenue sobre tinte / Contraste 2c3057
7.46:1 AAA
Rol exito / Contraste 232f49
6.75:1 AA
Rol error / Contraste 2e2148
5.35:1 AA
tinta / fondo
17.47:1 AAA
tinta / superficie
14.45:1 AAA
tinta / superficie-alta
11.08:1 AAA
tinta-tenue / fondo
6.07:1 AA
tinta-tenue / superficie
5.02:1 AA
tinta-tenue / superficie-alta
3.84:1 AA, solo texto grande
tinta-tenue-sobre-tinte / fondo
10.36:1 AAA
tinta-tenue-sobre-tinte / superficie
8.57:1 AAA
tinta-tenue-sobre-tinte / superficie-alta
6.57:1 AA
acento / fondo
12.97:1 AAA
acento / superficie
10.73:1 AAA
acento / superficie-alta
8.23:1 AAA
acento-hover / fondo
13.65:1 AAA
acento-hover / superficie
11.29:1 AAA
acento-hover / superficie-alta
8.66:1 AAA
exito / fondo
8.84:1 AAA
exito / superficie
7.31:1 AAA
exito / superficie-alta
5.61:1 AA
error / fondo
6.35:1 AA
error / superficie
5.25:1 AA
error / superficie-alta
4.03:1 AA, solo texto grande
info / fondo
8.05:1 AAA
info / superficie
6.66:1 AA
info / superficie-alta
5.10:1 AA
acento-tinta / acento
10.73:1 AAA
acento-tinta / acento-hover
11.29:1 AAA
acento-tinta / acento-activo
6.35:1 AA
tinta / fondo
14.45:1 AAA
tinta / superficie
12.94:1 AAA
tinta-tenue / fondo
7.35:1 AAA
tinta-tenue / superficie
6.58:1 AA
acento-tinta / acento
10.73:1 AAA
info / Contraste 272b56
6.17:1 AA
tinta-tenue-sobre-tinte / Contraste 2c3057
7.46:1 AAA
exito / Contraste 232f49
6.75:1 AA
error / Contraste 2e2148
5.35:1 AA
tinta / superficie-alta
11.83:1 AAA
tinta-tenue / superficie-alta
6.01:1 AA
exito / fondo
1.97:1 No llega a AA
error / fondo
2.75:1 No llega a AA
info / fondo
2.17:1 No llega a AA
Combinaciones prohibidas
tinta / acento
1.34:1 No usar
acento / fondo
1.34:1 No usar
acento / superficie
1.20:1 No usar
Tipografía
Familias, especímenes y escala
Cuatro voces y un reparto estricto. Open Sans es la primaria —es la del propio wordmark, así que titulares y texto de marca se leen como una continuación del logotipo—. Lato es la secundaria, para bloques largos y datos densos. Barlow Condensed es la condensada: sólo carátulas, redes y la chapa del rótulo de reel. Y la script de marca firma: eslogan y autoría. Las cuatro van autoalojadas en assets/fuentes/ y todas son OFL; el sistema no pide nada a un CDN.
Familias
Oooh Baby
Script
Iluminando el hoy y acercando el mañana
400
Barlow Condensed
Condensada
Profesionales Excepcionales
600700800
Open Sans
Primaria
Iluminando el hoy y acercando el mañana
300400600700800
Lato
Secundaria
Profesionales Excepcionales
300400700900
Barlow Condensed
Terciaria
Iluminando el hoy y acercando el mañana
600700800
Oooh Baby
4
Iluminando el hoy y acercando el mañana
400
ui-monospace
5
Iluminando el hoy y acercando el mañana
400
Estilos
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Espaciado y forma
Escala, radios y elevación
Base de 4 px. Todo margen, relleno y hueco es un múltiplo de la escala; nada de valores intermedios. El lenguaje de forma sale del propio isotipo: sus barras terminan en cápsula, así que pastilla es el radio de los elementos pequeños y 8 px el de los contenedores.
Espaciado
-
Base4px -
14px -
28px -
312px -
416px -
520px -
624px -
832px -
1248px -
1664px -
2496px -
Base4px -
Espacio 14px -
Espacio 28px -
Espacio 312px -
Espacio 416px -
Espacio 520px -
Espacio 624px -
Espacio 832px -
Espacio 1248px -
Espacio 1664px -
Espacio 2496px
Radios
00px
14px
28px
312px
Pastilla999px
Radio 00px
Radio 14px
Radio 28px
Radio 312px
Radio pastilla999px
Elevación
0
none
1
0 8px 24px rgba(6, 9, 35, 0.55)
Foco
2px solid #FFDD00
Elevación 0
none
Elevación 1
0 8px 24px rgba(6, 9, 35, 0.55)
Elevación foco
2px solid #ffdd00
Sobre superficie clara, para que la sombra se vea en cualquier tema.
Disposición
- Ancho de aplicación
- 1120 px
- Ancho formulario
- 860 px
- Ancho lectura caracteres
- 70
- Objetivo táctil mínimo
- 44 px
Iconografía
Sistema de iconos
El único set propio de la marca es el de plataformas de escucha. Se usan monocromos: nunca en su color corporativo original, nunca sobre pastilla de color de plataforma. En el bloque de emisora (sección 06) aparecen ya circulados; sueltos van sin círculo.
Reglas
- Ficheros
- spotify.svg, podcast.svg, youtube.svg, linkedin.svg, instagram.svg
- Monocromo
- Sí
- Tamaños
- 20 · 24 · 32 px
- Hueco
- 20 px
- Método
- svg_en_linea
- Viewbox
- 0 0 640 640
- Preserve aspect ratio
- xMidYMid meet
- Circulados en
- recursos.emisora
- Set
- Lucide
- Trazo
- 1.5 px
- Tamaño
- 20 px
- Color
- currentColor
Imagen
Guía para personas y agentes
El material fotográfico del programa son fotos de móvil hechas en sitios distintos: balance de blancos dispar, luz de tungsteno de estudio y, a menudo, marcas ajenas en cuadro —el logo rojo y amarillo de la emisora, carteles de fondo—. Sin tratamiento, dos fotos seguidas no parecen del mismo programa. Estos filtros son lo que las unifica: no son decoración, son infraestructura.
Tratamientos
Todavía no hay fotografías de la marca en el libro: cada tratamiento se aplicará sobre ellas cuando se publiquen. Aquí se enseña sobre un plano con los colores de la marca.
saturate(.82) contrast(1.08) brightness(1.02)
saturate(.9) contrast(1.06) brightness(1.03) hue-rotate(-4deg)
grayscale(1) contrast(1.15) brightness(.92)
#22264d · lighten#ffdd00 · multiply
grayscale(1) contrast(1.14) brightness(.94)
#131639 · lighten#a8addc · multiply
grayscale(1) contrast(1.12) brightness(.9)
#060923 · lighten#c3c6de · multiply
grayscale(1) contrast(1.3) brightness(.95)
rgba(19, 22, 57, 0.72)
Componentes
Piezas web estándar del grupo
Botón
Un solo botón principal por vista; lo demás, secundario o fantasma.
Variantes, estados y código
La acción de una vista.
Variantes
Estados
Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.
Código
<button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>
Tarjeta
Programa
Iluminando el hoy y acercando el mañana
Iluminando el hoy y acercando el mañana
Seguir leyendoUna idea por tarjeta, y todas las de una fila del mismo alto.
Variantes, estados y código
Un contenido con título, texto y enlace.
Variantes
Programa
Iluminando el hoy y acercando el mañana
Iluminando el hoy y acercando el mañana
Seguir leyendoPrograma
Iluminando el hoy y acercando el mañana
Iluminando el hoy y acercando el mañana
Seguir leyendoEstados
Programa
Iluminando el hoy y acercando el mañana
Iluminando el hoy y acercando el mañana
Seguir leyendoPrograma
Iluminando el hoy y acercando el mañana
Iluminando el hoy y acercando el mañana
Seguir leyendoRegla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.
Código
<article class="bb-c-card bb-c-card--superficie">
<p class="bb-c-card__over">Programa</p>
<h3 class="bb-c-card__title">Iluminando el hoy y acercando el mañana</h3>
<p class="bb-c-card__text">Iluminando el hoy y acercando el mañana</p>
<a class="bb-c-card__link" href="#">Seguir leyendo</a>
</article>
Cabecera de página
Programa
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Un solo título principal por página, que diga de qué va en una línea.
Variantes, estados y código
La apertura de una página: antetítulo, título y entradilla.
Variantes
Programa
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Regla de uso Un solo título principal por página, que diga de qué va en una línea.
Código
<header class="bb-c-header bb-c-header--superficie">
<p class="bb-c-header__over">Programa</p>
<h1 class="bb-c-header__title">Profesionales Excepcionales</h1>
<p class="bb-c-header__lede">Iluminando el hoy y acercando el mañana</p>
</header>
Llamada a la acción
Una por página, al final, con un verbo que diga qué pasa al pulsar.
Variantes, estados y código
El cierre de una página, con una sola acción.
Variantes
Regla de uso Una por página, al final, con un verbo que diga qué pasa al pulsar.
Código
<aside class="bb-c-cta bb-c-cta--acento">
<h2 class="bb-c-cta__title">Iluminando el hoy y acercando el mañana</h2>
<a class="bb-c-button bb-c-button--primario" href="#">Contactar</a>
</aside>
Cita
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Siempre con autoría; si no se puede atribuir, no es una cita.
Variantes, estados y código
Una frase destacada con su autoría.
Variantes
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.
Código
<blockquote class="bb-c-quote bb-c-quote--filete">
<p class="bb-c-quote__text">Iluminando el hoy y acercando el mañana</p>
<cite class="bb-c-quote__author">Profesionales Excepcionales</cite>
</blockquote>
Estadística
242
elementos publicados en su sistema de diseño
Una cifra real y con fuente; si no hay dato, no hay estadística.
Variantes, estados y código
Una cifra con lo que significa.
Variantes
242
elementos publicados en su sistema de diseño
Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.
Código
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">242</p>
<p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
</div>
Preguntas frecuentes
¿Qué es Profesionales Excepcionales?
Iluminando el hoy y acercando el mañana
¿Qué la mueve?
Iluminando el hoy y acercando el mañana
Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
Variantes, estados y código
Preguntas que se abren y se cierran sin scripts.
Regla de uso Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
Código
<div class="bb-c-faq">
<details class="bb-c-faq__item" open="open">
<summary class="bb-c-faq__q">¿Qué es Profesionales Excepcionales?</summary>
<p class="bb-c-faq__a">Iluminando el hoy y acercando el mañana</p>
</details>
<details class="bb-c-faq__item">
<summary class="bb-c-faq__q">¿Qué la mueve?</summary>
<p class="bb-c-faq__a">Iluminando el hoy y acercando el mañana</p>
</details>
</div>
Pie
Sin promociones: identidad, enlaces legales y contacto.
Variantes, estados y código
El cierre de todas las páginas: marca y enlaces.
Variantes
Regla de uso Sin promociones: identidad, enlaces legales y contacto.
Código
<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
<strong class="bb-c-footer__brand">Profesionales Excepcionales</strong>
<ul class="bb-c-footer__links">
<li><a href="#">Aviso legal</a></li>
<li><a href="#">Privacidad</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</footer>
Campos de formulario
Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
Variantes, estados y código
Campos de texto, correo y selección con su etiqueta, su ayuda y su error.
Estados
Regla de uso Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
Código
<form class="bb-c-form bb-c-form--base">
<label class="bb-c-field">
<span class="bb-c-field__label">Nombre</span>
<input class="bb-c-field__input" type="text" value="Profesionales Excepcionales"/>
</label>
<label class="bb-c-field">
<span class="bb-c-field__label">Correo electrónico</span>
<input class="bb-c-field__input" type="email"/>
<span class="bb-c-field__hint">Solo para responderte.</span>
</label>
<label class="bb-c-field">
<span class="bb-c-field__label">Tema</span>
<select class="bb-c-field__input">
<option>Profesionales Excepcionales</option>
</select>
</label>
</form>
Selección
Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.
Variantes, estados y código
Elegir una opción entre tarjetas, o varias con casillas.
Variantes
Estados
Regla de uso Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.
Código
<fieldset class="bb-c-choice bb-c-choice--tarjetas">
<legend class="bb-c-field__label">Tema</legend>
<label class="bb-c-option">
<input type="radio" name="bb-c-choice-normal" checked="True"/>
<span class="bb-c-option__title">Profesionales Excepcionales</span>
<span class="bb-c-option__text">Profesionales Excepcionales</span>
</label>
</fieldset>
Avisos
Iluminando el hoy y acercando el mañana
Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
Variantes, estados y código
Un mensaje breve sobre lo que acaba de pasar.
Variantes
Recibido: te responde el equipo de Profesionales Excepcionales.
No se ha podido enviar. Inténtalo de nuevo en unos minutos.
Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
Código
<div class="bb-c-alert bb-c-alert--info" role="status">
<span class="bb-c-alert__mark" aria-hidden="true"></span>
<p class="bb-c-alert__text">Iluminando el hoy y acercando el mañana</p>
</div>
Insignias
Programa Versión 2 Vigente
Una o dos palabras; nunca como botón.
Variantes, estados y código
Etiquetas cortas de estado, tipo o categoría.
Variantes
Programa Versión 2 Vigente
Regla de uso Una o dos palabras; nunca como botón.
Código
<p class="bb-c-badges bb-c-badges--base">
<span class="bb-c-badge bb-c-badge--acento">Programa</span>
<span class="bb-c-badge">Versión 2</span>
<span class="bb-c-badge bb-c-badge--borde">Vigente</span>
</p>
Tabla
| Estilo | Tamaño | Uso |
|---|---|---|
| Display 1 | 80 px | Portadas, cartones y cifras grandes |
| Display 2 | 54 px | Portadas, cartones y cifras grandes |
| Título 1 | 32 px | Título de página o de sección |
| Título 2 | 22 px | Subtítulo y título de tarjeta |
Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Variantes, estados y código
Datos en filas y columnas, con cabecera.
Variantes
| Estilo | Tamaño | Uso |
|---|---|---|
| Display 1 | 80 px | Portadas, cartones y cifras grandes |
| Display 2 | 54 px | Portadas, cartones y cifras grandes |
| Título 1 | 32 px | Título de página o de sección |
| Título 2 | 22 px | Subtítulo y título de tarjeta |
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Código
<table class="bb-c-table bb-c-table--superficie">
<thead><tr><th scope="col">Estilo</th><th scope="col">Tamaño</th><th scope="col">Uso</th></tr></thead>
<tbody>
<tr>
<td>Display 1</td><td><code>80 px</code></td><td>Portadas, cartones y cifras grandes</td>
</tr><tr>
<td>Display 2</td><td><code>54 px</code></td><td>Portadas, cartones y cifras grandes</td>
</tr><tr>
<td>Título 1</td><td><code>32 px</code></td><td>Título de página o de sección</td>
</tr><tr>
<td>Título 2</td><td><code>22 px</code></td><td>Subtítulo y título de tarjeta</td>
</tr>
</tbody>
</table>
Progreso
Propio de la marca en este libro100 %
Siempre con la cifra en texto junto a la barra.
Variantes, estados y código
Cuánto lleva algo hecho, como barra y como cifra.
Variantes
Propio de la marca en este libro100 %
Regla de uso Siempre con la cifra en texto junto a la barra.
Código
<div class="bb-c-progress bb-c-progress--acento">
<p class="bb-c-progress__head"><span>Propio de la marca en este libro</span><strong>100 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="Propio de la marca en este libro">
<span class="bb-c-progress__bar" style="width: 100%"></span>
</div>
</div>
Documentos
Papel, plantillas y portadas
Plantillas de la marca
Word con membrete
A4 con el logotipo, el pie de la sociedad, los estilos de la marca y marcadores para escribir encima.
Firma
La firma de correo de la marca
La firma de correo es el cierre de cada mensaje de la marca: el logotipo, el nombre y el cargo de la persona, sus datos de contacto y, si la marca lo publica, un banner y un aviso legal. Se genera desde la versión publicada de la marca, así que cambia cuando cambia la marca.
Nombre Apellido
Cargo
Teléfono · correo electrónico
Las personas del equipo generan su firma desde sus Preferencias de Odoo, con una sesión de empleado.
Presentaciones
La piel de esta marca y la estructura común
Plantillas de la marca
PowerPoint 16:9
Portada, separador, contenido, dos columnas, imagen y texto, cifra o cita y cierre con contacto, cada una con sus marcadores.
Piel
Colores
-
Papel
#FFFFFF -
Tinta
#22264D -
Titular
#22264D -
Acento
#22264D -
Señal
#FFDD00 -
Superficie
#F2F2F6 -
Escenario
#22264D -
Tinta del escenario
#FFFFFF
Contraste mínimo de texto: 10.3:1
Composición
- Titulares
- Open Sans
- Texto
- Open Sans
- Margen
- 1.25 in
- Separación
- 0.333 in
- Radio de tarjeta
- 0.083 in
- Escala: portada, título, rótulo
- 40 · 30 · 22 pt
Descargar una muestra del deck. Contenido ficticio, sin ningún dato de cliente.
Estructura
SB CoverPortada: título, cliente, referencia, fecha y logotipo del clienteSB AgendaÍndice, con más de dos seccionesSB SectionSeparador, con 4 láminas o más en una secciónSB ContentLas secciones incluidas, en su ordenSB ClosingCierre: agradecimiento y contacto del responsable
Disposiciones de la plantilla
- Portada
- SB Cover
- Índice
- SB Agenda
- Separador
- SB Section
- Texto
- SB Content
- Dos columnas
- SB Two Columns
- Tres columnas
- SB Three Columns
- Indicadores
- SB KPI Tiles
- Tabla
- SB Table
- Gantt
- SB Gantt
- Equipo
- SB Team
- Cierre
- SB Closing
- En blanco
- SB Blank
Secciones con láminas propias
- Objetivos, requisitos y alcance
- Planificación e hitos
- Modelo de gobierno
- Equipo
- Casos de éxito
- Honorarios
- Condiciones de pago
- Términos y condiciones
Propuestas
Piezas que se imprimen
Piezas
Portada
A sangre, con el arte de la casa.
Cuerpo
Las secciones incluidas, numeradas, con cabecera y pie del sistema de documentos.
Aceptación
A sangre, con las casillas donde firma el cliente.
Contraportada
A sangre, con el arte y el pie legal.
Secciones que puede llevar el cuerpo
- Antecedentes
- Estado del arte
- Objetivos, requisitos y alcance
- Planificación e hitos
- Metodología
- Modelo de gobierno
- Equipo
- Equipo del cliente
- Casos de éxito
- Honorarios
- Condiciones de pago
- Términos y condiciones
- Libre
Plantillas
Dónde están las plantillas de la marca
Las plantillas de la marca viven en las secciones de Aplicaciones: cada una enseña la pieza real.
Redes y publicaciones
Formatos y piezas para publicar
Una sola arquitectura para todas: campo navy, fotografía a sangre por un borde, franja de acento como separador y el logotipo negativo en la esquina superior. Cambia el formato, no la composición. El eslogan siempre entra como activo de script, nunca compuesto.
Formatos
Cartel 16:9
- Tamaño
- 3840 × 2160 px
- Composición
- foto a sangre 44% izquierda, campo navy derecha
Cartel A4
- Mm
- 210 · 297
- Composición
- foto a sangre tercio superior, campo navy abajo
Roll up
- Mm
- 850 · 2000
- Nota
- 300 mm inferiores libres: los tapa el mostrador
Fondo teams
- Tamaño
- 3840 × 2160 px
- Nota
- tercio central libre: ahi va la persona
Post cuadrado
- Tamaño
- 2160 × 2160 px
Story reel
- Tamaño
- 2160 × 3840 px
- Zona segura
- 500 px
Caratula audio
- Tamaño
- 3000 × 3000 px
- Composición
- campo navy plano, logotipo apilado negativo al 62%
Cabecera linkedin
- Tamaño
- 1584 × 396 px
- Nota
- zona central-izquierda libre: la tapa el avatar
Qué cambia al girar
- Partición
- la foto pasa del 44 % izquierdo al 38 % superior; el campo navy ocupa el resto
- Orden
- no cambia: logotipo → filete → eslogan → datos → patrocinio
- Márgenes
- 9 % del ancho a los cuatro lados, más 3 mm de sangre en el PDF
- Logotipo
- 9 % del ancho (mínimo impreso 30 mm); nunca el apilado, que rompe la serie
- Eslogan
- tres líneas a ras por la izquierda, igual que en 16:9
- Patrocinio
- fuera: el A4 se imprime también sin patrocinador. Se añade como pie sólo cuando la pieza lo exige
- Exportación
- PDF para imprenta · PNG 4K para pantalla. SVG sólo con texto trazado.
Personas
Quién hace la marca
Equipo pendiente de consentimiento
Las personas del equipo aparecerán aquí cuando den su consentimiento para hacerlo público.
Descargas
Tokens generados y ficheros
Ficheros
- Horizontal · Color
-
Horizontal · Claro
Sin margen SVGPNG 1920 pxPNG 3840 px
-
Apilado · Color
Sin margen SVGPNG 1920 pxPNG 3840 px
-
Apilado · Claro
Sin margen SVGPNG 1920 pxPNG 3840 px
-
Icono · Color
Sin margen SVGPNG 1920 pxPNG 3840 px
-
Icono · Claro
Sin margen SVGPNG 1920 pxPNG 3840 px
Para agentes
El contexto que recibe un agente
Lo publicado para esta audiencia, tal como lo lee un agente: lo obligatorio va primero.
Estilo de comunicación
3 / 3 líneas dentro del tope
Contexto
declaracion.formato: Una hora cada miércoles con Javier Pascual en Radio Intercontinental (de 18:00 a 19:00, FM 95.4 y 107.8 en Madrid); después, en vídeo y en pódcast.
declaracion.patrocinio: Patrocinio: lo admite.
declaracion.slogan: Iluminando el hoy y acercando el mañana
Cómo pedirlo
env["sb.brand"].sb_context("profesionales-excepcionales", purpose="redactar")
Directrices para agentes de imágenes
34 / 52 líneas dentro del tope
Contexto
NUNCA logo directriz.logo.never.recomponer-el-nombre-con-otra-tipografia: Recomponer el nombre con otra tipografía, ni siquiera con Open Sans. (Open Sans es la tipografía del wordmark, pero el logotipo es un activo, no un texto.)
NUNCA logo directriz.logo.never.alterar-la-proporcion-entre-isotipo-y: Alterar la proporción entre isotipo y texto, o separarlos.
NUNCA logo directriz.logo.never.deformar-rotar-inclinar-o-anadir-sombra: Deformar, rotar, inclinar o añadir sombra, contorno, relieve o degradado al logotipo.
NUNCA logo directriz.logo.never.recolorear-el-logotipo-el-ds-solo: Recolorear el logotipo: el DS solo admite la versión de color y la negativa. (La capa de tinta única (blanco y navy) se retiró el 2026-09-17 por ser derivada; la exportación de Illustrator del 2026-11-01 añade una versión en negro que el DS no regula (ver conflictos).)
NUNCA logo directriz.logo.never.poner-la-version-de-color-sobre: Poner la versión de color sobre navy, sobre amarillo o sobre fotografía. (Pierde contraste; para esos fondos va el negativo.)
NUNCA logo directriz.logo.never.encerrar-el-logotipo-en-una-caja: Encerrar el logotipo en una caja que invada su área de respeto.
NUNCA logo directriz.logo.never.usar-el-negativo-blanco-sobre-plano: Usar el negativo blanco sobre plano claro o sobreexpuesto. (Se funde: tinta media medida 254,254,254 sobre #EDEEF4. La salida, hasta que marca entregue la tinta única, es el isotipo negativo con velo radial navy.)
NUNCA logo logo.translucido.prohibido_sobre: El logotipo translúcido no se pone sobre plano claro, sobreexpuesto ni fondo blanco.
NUNCA logo logo.negativo_dos_tonos.prohibido_en: El negativo a dos tonos no se usa en fotografía, vídeo, carátulas, reels ni marca de agua.
NUNCA logo logo.prohibido: recomponer el texto con otra tipografia (el texto es parte del arte) alterar la proporcion isotipo/texto o separarlos deformar, rotar, inclinar, anadir sombra/contorno/relieve/degradado recolorear (solo existen color y negativo) poner la version de color sobre navy, amarillo o fotografia encerrarlo en una caja que invada su area de respeto
color.primario-700: #22264d
color.acento-500: #ffdd00
color.contraste-232f49: #232f49
color.contraste-272b56: #272b56
color.contraste-2c3057: #2c3057
color.contraste-2e2148: #2e2148
color.rol-tinta: #ffffff
color.rol-tinta-tenue: #9296ba
color.rol-tinta-tenue-sobre-tinte: #c3c6de
color.rol-exito: #3fd08f
color.rol-error: #ff6b7a
color.rol-info: #a8addc
color.rol-superficie-alta: #e7e8ef
color.rol-borde-fuerte: #b9bcce
color.primario: #22264d · Azul marino 700 (primario) · Azul marino 700, primario de marca (#22264D): superficie de paneles y tinta sobre acento. Contraste: 10,74:1 sobre #ffdd00; 14,46:1 sobre #ffffff.
color.primario-900: #060923 · Azul marino 900 · Azul marino 900. CMYK 100,93,50,76. Rampa de marca; los componentes usan roles, no pasos de rampa.
color.primario-800: #131639 · Azul marino 800 · Azul marino 800. CMYK 100,96,44,55. Rampa de marca; los componentes usan roles, no pasos de rampa.
color.primario-600: #35395d · Azul marino 600 · Azul marino 600. CMYK 88,78,35,29. Rampa de marca; los componentes usan roles, no pasos de rampa.
color.primario-500: #4f537b · Azul marino 500 (periwinkle) · Azul marino 500 (periwinkle). CMYK 77,67,29,13. Rampa de marca; los componentes usan roles, no pasos de rampa.
color.acento: #ffdd00 · Amarillo 500 (acento) · Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
color.acento-700: #9b8700 · Amarillo 700 · Amarillo 700. CMYK 37,34,100,19. Rampa de marca; los componentes usan roles, no pasos de rampa.
color.acento-600: #c6ab00 · Amarillo 600 · Amarillo 600. CMYK 23,25,99,7. Rampa de marca; los componentes usan roles, no pasos de rampa.
color.exito: #3fd08f · Éxito · Fase completada, validación correcta.
fuente.script: Oooh Baby
… 18 líneas recortadas por el tope, 0 obligatorias: pide un max_chars mayor.
Cómo pedirlo
env["sb.brand"].sb_context("profesionales-excepcionales", purpose="imagen")
Versiones
Historial publicado
- v2 2026-11-04 Aprobación Vigente 242 claves cambiadas
- v1 2026-11-03 Aprobación