Sistema de diseño
Iluminando el hoy y acercando el mañana
- Versión14
- AlcancePrograma
- Fecha2026-11-09
- 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
Leitmotiv
- La P que es también un micrófono: el pódcast en el que los profesionales excepcionales cuentan su oficio con su propia voz.
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.
La P que es también un micrófono: el pódcast en el que los profesionales excepcionales cuentan su oficio con su propia voz.
Leitmotiv
Variantes
Diseño del logotipo (Estudio Nácar)
Á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.
#8FD3FF
RGB 143, 211, 255
Cielo; azul claro para enlaces, foco y primario en tema oscuro.
#FF9A62
RGB 255, 154, 98
Ámbar de la web; decoración, no texto.
#021620
RGB 2, 22, 32
Noche de la web; fondos muy oscuros de cabecera.
#05283A
RGB 5, 40, 58
Tinta de la web; degradado bajo texto sobre foto y sombras.
#56ABE2
RGB 86, 171, 226
Solape por transparencia de los iconos de app (0,6 × #8FD3FF + 0,4 × #006EB7).
#262A36
RGB 38, 42, 54
Fondo oscuro de la hoja de contacto de iconos.
#02161F
RGB 2, 22, 31
Sombras del duotono de foto (tratamiento en revisión).
#006088
RGB 0, 96, 136
Medios tonos del duotono de foto (tratamiento en revisión).
#E2EEF4
RGB 226, 238, 244
Luces del duotono de foto (tratamiento en revisión).
#00672C
RGB 0, 103, 44
#6D5000
RGB 109, 80, 0
#7CD591
RGB 124, 213, 145
#E1B75C
RGB 225, 183, 92
Roles
Claro
-
Tinta tenue sobre tinte
#35395D -
Acento hover
#FFE439 -
Acento activo
#C6AB00 -
Éxito
#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 -
Éxito
#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
Tema claro
Rol tinta / Primario 800
17.47:1 AAA
Rol tinta / Primario
14.45:1 AAA
Acento / Primario
10.73:1 AAA
Rol tinta tenue / Primario
5.02:1 AA
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 éxito / Contraste 232f49
6.75:1 AA
Rol error / Contraste 2e2148
5.35:1 AA
Tinta / Superficie
12.94:1 AAA
Tinta tenue / Superficie
6.58:1 AA
Pares del sistema 5
Los que se comprueban en toda marca: tinta, enlace y estados sobre sus fondos.
Tinta / Superficie alta
11.83:1 AAA
Tinta tenue / Superficie alta
6.01:1 AA
Éxito / 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
Tema oscuro
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
Éxito / Fondo
8.84:1 AAA
Éxito / Superficie
7.31:1 AAA
Éxito / 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 activo
6.35:1 AA
Info / Contraste 272b56
6.17:1 AA
Tinta tenue sobre tinte / Contraste 2c3057
7.46:1 AAA
Éxito / Contraste 232f49
6.75:1 AA
Error / Contraste 2e2148
5.35:1 AA
No usar
Tinta / Acento
1.34:1
La marca lo prohíbe
Acento / Superficie
1.20:1
La marca lo prohíbe
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
La acción de una vista.
Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.
Variantes
Estados
Código
<button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>
Tarjeta
Un contenido con título, texto y enlace.
Regla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.
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 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 leyendoCó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
La apertura de una página: antetítulo, título y entradilla.
Regla de uso Un solo título principal por página, que diga de qué va en una línea.
Variantes
Programa
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Programa
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
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
El cierre de una página, con una sola acción.
Regla de uso Una por página, al final, con un verbo que diga qué pasa al pulsar.
Variantes
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
Una frase destacada con su autoría.
Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.
Variantes
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
Iluminando el hoy y acercando el mañana
Profesionales Excepcionales
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
Una cifra con lo que significa.
Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.
Variantes
259
elementos publicados en su sistema de diseño
259
elementos publicados en su sistema de diseño
Código
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">259</p>
<p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
</div>
Preguntas frecuentes
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.
¿Qué es Profesionales Excepcionales?
Iluminando el hoy y acercando el mañana
¿Qué la mueve?
Iluminando el hoy y acercando el mañana
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
El cierre de todas las páginas: marca y enlaces.
Regla de uso Sin promociones: identidad, enlaces legales y contacto.
Variantes
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
Campos de texto, correo y selección con su etiqueta, su ayuda y su error.
Regla de uso Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
Estados
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
Elegir una opción entre tarjetas, o varias con casillas.
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.
Variantes
Estados
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
Un mensaje breve sobre lo que acaba de pasar.
Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
Variantes
Iluminando el hoy y acercando el mañana
Recibido: te responde el equipo de Profesionales Excepcionales.
No se ha podido enviar. Inténtalo de nuevo en unos minutos.
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
Etiquetas cortas de estado, tipo o categoría.
Regla de uso Una o dos palabras; nunca como botón.
Variantes
Programa Versión 14 Vigente
Programa Versión 14 Vigente
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 14</span>
<span class="bb-c-badge bb-c-badge--borde">Vigente</span>
</p>
Tabla
Datos en filas y columnas, con cabecera.
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
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 |
| 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 |
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
Cuánto lleva algo hecho, como barra y como cifra.
Regla de uso Siempre con la cifra en texto junto a la barra.
Variantes
Propio de la marca en este libro95 %
Propio de la marca en este libro95 %
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>95 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="95" aria-label="Propio de la marca en este libro">
<span class="bb-c-progress__bar" style="width: 95%"></span>
</div>
</div>
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 de 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
Carátula de audio
- Tamaño
- 3000 × 3000 px
- Composición
- campo navy plano, logotipo apilado negativo al 62%
Cabecera de 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.
Generador de imágenes
Una foto de un producto o un objeto, sin fondo, encuadrada y sobre el fondo corporativo de la marca.
1. Subes la imagen
Un producto, un objeto o una ilustración. Nunca una persona: para el equipo están los retratos.
2. Gemini la recorta
Quita el fondo y encuadra el sujeto. Odoo lo pone sobre el fondo de la marca.
3. Una persona la aprueba
Nada sale sin que alguien la mire. Una vez aprobada, se descarga.
El generador es para quien edita la marca: entra con tu sesión de Odoo.
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
4 / 4 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.leitmotiv: La P que es también un micrófono: el pódcast en el que los profesionales excepcionales cuentan su oficio con su propia voz.
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 / 65 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
… 31 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
- v14 2026-11-09 Aprobación Vigente