Ir al contenido

Sistema de diseño

Iluminando el hoy y acercando el mañana

  • Versión1
  • AlcancePrograma
  • Fecha2026-11-09
  • Pertenece aSingular Works
  • OrigenOdoo, versión publicada
01

Identidad

Propósito, misión, visión y valores

Parte de Singular Works

Iluminando el hoy y acercando el mañana

Eslogan

Misión

Nuestra misión es visibilizar el talento de profesionales en diversas áreas. Lo hacemos a través de entrevistas recurrentes y en profundidad que destacan tanto sus trayectorias profesionales como sus historias personales. Nos comprometemos a crear un espacio libre de publicidad y sin influencia comercial, donde la autenticidad y la transparencia sean los pilares fundamentales. Desde nuestras plataformas, buscamos que estas historias inspiren y enriquezcan a nuestra audiencia y contribuyan al crecimiento y la difusión del talento.

Visión

Aspiramos a ser una plataforma de referencia para la visibilización del talento: un espacio donde se promueva la contribución positiva a la sociedad por medio de la actividad profesional y la excelencia. En el futuro, queremos ampliar nuestro impacto con eventos como galas y mesas redondas, y con un premio anual que reconozca a los profesionales más destacados por categoría o por trayectoria. Nuestra visión es que Profesionales Excepcionales sea una plataforma con reconocimiento nacional, que colabore con entidades de prestigio y promueva el crecimiento de sus contenidos en medios como radios y canales especializados.

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.
02

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 Alba Espinosa (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

Profesionales Excepcionales
Así noRecomponer el nombre con otra tipografía, ni siquiera con Open Sans.
Así noAlterar la proporción entre isotipo y texto, o separarlos.
Así noDeformar, rotar, inclinar o añadir sombra, contorno, relieve o degradado al logotipo.
Así noRecolorear el logotipo: el DS solo admite la versión de color y la negativa.
Así noPoner la versión de color sobre navy, sobre amarillo o sobre fotografía.
Así noEncerrar el logotipo en una caja que invada su área de respeto.
Así noUsar el negativo blanco sobre plano claro o sobreexpuesto.
  • 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)

03

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

Primario 900 #060923
Primario 800 #131639
Color de origen #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.
Color de origen #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.
Primario 600 #35395D
Primario 500 #4F537B Azul marino 500 (periwinkle). CMYK 77,67,29,13. Rampa de marca; los componentes usan roles, no pasos de rampa.

Acento

Acento 700 #9B8700
Acento 600 #C6AB00
Color de origen #FFDC04 Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
Color de origen #FFDC04 Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
Acento 400 #FFE439
Acento 300 #FFEA64

Paleta

Blanco #FFFFFF RGB 255, 255, 255 Blanco: tinta principal sobre navy y fondo del tema claro. Nunca sobre amarillo.
Tinta tenue #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.
Tinta tenue sobre tinte #C3C6DE RGB 195, 198, 222 Texto tenue sobre fondos teñidos de avisos e insignias (7,47:1 sobre el tinte al 14 %).
Éxito #3FD08F RGB 63, 208, 143 Fase completada, validación correcta.
Error #FF6B7A RGB 255, 107, 122 Fallo de fase, campo inválido.
Info #A8ADDC RGB 168, 173, 220 Aviso neutro, dato detectado.
Superficie clara #F2F2F6 RGB 242, 242, 246 Superficie del tema claro (impresión, documentos, firma de correo).
Borde claro #D8D9E4 RGB 216, 217, 228 Borde del tema claro.

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 #FFDC04
  • Acento tinta #22264D

Oscuro

  • Tinta tenue sobre tinte #C3C6DE
  • Acento hover #FFE439
  • Acento activo #C6AB00
  • Éxito #3FD08F
  • Error #FF6B7A
  • Info #A8ADDC
  • Foco #FFDC04
  • Superficie alta #35395D
  • Borde fuerte #4F537B
  • Fondo #131639
  • Superficie #22264D
  • Borde #35395D
  • Tinta #FFFFFF
  • Tinta tenue #9296BA
  • Acento #FFDC04
  • Acento tinta #22264D

Contrastes

Tema claro

Aa

Rol tinta / Primario 800

17.47:1 AAA

Aa

Rol tinta / Primario

14.45:1 AAA

Aa

Acento / Primario

10.66:1 AAA

Aa

Rol tinta tenue / Primario

5.02:1 AA

Aa

Primario 500 / Rol tinta

7.35:1 AAA

Aa

Rol info / Contraste 272b56

6.17:1 AA

Aa

Rol tinta tenue sobre tinte / Contraste 2c3057

7.46:1 AAA

Aa

Rol éxito / Contraste 232f49

6.75:1 AA

Aa

Rol error / Contraste 2e2148

5.35:1 AA

Aa

Tinta / Superficie

12.94:1 AAA

Aa

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.

Aa

Tinta / Superficie alta

11.83:1 AAA

Aa

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

Aa

Tinta / Fondo

17.47:1 AAA

Aa

Tinta / Superficie

14.45:1 AAA

Aa

Tinta / Superficie alta

11.08:1 AAA

Aa

Tinta tenue / Fondo

6.07:1 AA

Aa

Tinta tenue / Superficie

5.02:1 AA

Tinta tenue / Superficie alta

3.84:1 AA, solo texto grande

Aa

Tinta tenue sobre tinte / Fondo

10.36:1 AAA

Aa

Tinta tenue sobre tinte / Superficie

8.57:1 AAA

Aa

Tinta tenue sobre tinte / Superficie alta

6.57:1 AA

Aa

Acento / Fondo

12.89:1 AAA

Aa

Acento / Superficie

10.66:1 AAA

Aa

Acento / Superficie alta

8.17:1 AAA

Aa

Acento hover / Fondo

13.65:1 AAA

Aa

Acento hover / Superficie

11.29:1 AAA

Aa

Acento hover / Superficie alta

8.66:1 AAA

Aa

Éxito / Fondo

8.84:1 AAA

Aa

Éxito / Superficie

7.31:1 AAA

Aa

Éxito / Superficie alta

5.61:1 AA

Aa

Error / Fondo

6.35:1 AA

Aa

Error / Superficie

5.25:1 AA

Error / Superficie alta

4.03:1 AA, solo texto grande

Aa

Info / Fondo

8.05:1 AAA

Aa

Info / Superficie

6.66:1 AA

Aa

Info / Superficie alta

5.10:1 AA

Aa

Acento tinta / Acento activo

6.35:1 AA

Aa

Info / Contraste 272b56

6.17:1 AA

Aa

Tinta tenue sobre tinte / Contraste 2c3057

7.46:1 AAA

Aa

Éxito / Contraste 232f49

6.75:1 AA

Aa

Error / Contraste 2e2148

5.35:1 AA

No usar

Tinta / Acento

1.35:1

La marca lo prohíbe

Acento / Superficie

1.21:1

La marca lo prohíbe

04

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

Estilos

Script componible

Iluminando el hoy y acercando el mañana

Display 1 80px · 800 · 1.02 Portadas, cartones y cifras grandes

Profesionales Excepcionales

Display 2 54px · 800 · 1.05 Portadas, cartones y cifras grandes

Iluminando el hoy y acercando el mañana

Título 1 32px · 700 · 1.15 Título de página o de sección

Profesionales Excepcionales

Título 2 22px · 600 · 1.25 Subtítulo y título de tarjeta

Iluminando el hoy y acercando el mañana

Cuerpo largo 16px · 400 · 1.65 Lectura larga: artículos y guiones

Profesionales Excepcionales

Cuerpo s 14px · 400 · 1.55 Notas, pies y texto secundario

Iluminando el hoy y acercando el mañana

Display 1 80px · 800 · 1.02 Portadas, cartones y cifras grandes

Profesionales Excepcionales

Display 2 54px · 800 · 1.05 Portadas, cartones y cifras grandes

Iluminando el hoy y acercando el mañana

Título 1 32px · 700 · 1.15 Título de página o de sección

Profesionales Excepcionales

Título 2 22px · 600 · 1.25 Subtítulo y título de tarjeta

Iluminando el hoy y acercando el mañana

Cuerpo 16px · 400 · 1.6 Texto corrido de la interfaz

Profesionales Excepcionales

Cuerpo largo 16px · 400 · 1.65 Lectura larga: artículos y guiones

Iluminando el hoy y acercando el mañana

Cuerpo s 14px · 400 · 1.55 Notas, pies y texto secundario

Profesionales Excepcionales

Cita 88px · 900 · 1.16 Cita destacada, siempre con su autor

Iluminando el hoy y acercando el mañana

Etiqueta 12px · 700 · 1.4 Antetítulos, etiquetas y metadatos

Profesionales Excepcionales

05

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

  • Base 4px
  • 1 4px
  • 2 8px
  • 3 12px
  • 4 16px
  • 5 20px
  • 6 24px
  • 8 32px
  • 12 48px
  • 16 64px
  • 24 96px
  • Base 4px
  • Espacio 1 4px
  • Espacio 2 8px
  • Espacio 3 12px
  • Espacio 4 16px
  • Espacio 5 20px
  • Espacio 6 24px
  • Espacio 8 32px
  • Espacio 12 48px
  • Espacio 16 64px
  • Espacio 24 96px

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
06

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
07

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.

Sin tratamiento
Retrato Uso: directorio, invitados saturate(.82) contrast(1.08) brightness(1.02)
Editorial Uso: imagen en articulo saturate(.9) contrast(1.06) brightness(1.03) hue-rotate(-4deg)
Duotono Uso: cabeceras y carteleria grayscale(1) contrast(1.15) brightness(.92) #22264d · lighten#ffdd00 · multiply
Duotono azul Uso: cabecera de blog y cartel donde el acento ya lo pone otro elemento grayscale(1) contrast(1.14) brightness(.94) #131639 · lighten#a8addc · multiply
Duotono frio Uso: temas serios, mucho texto encima grayscale(1) contrast(1.12) brightness(.9) #060923 · lighten#c3c6de · multiply
Archivo Uso: material antiguo o de baja calidad grayscale(1) contrast(1.3) brightness(.95)
Iluminando el hoy y acercando el mañana
Velos · Velo plano rgba(19, 22, 57, 0.72)
08

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

Primario
Secundario
Fantasma

Estados

Encima
Activo
Deshabilitado
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 leyendo
Superficie

Programa

Iluminando el hoy y acercando el mañana

Iluminando el hoy y acercando el mañana

Seguir leyendo
Borde

Programa

Iluminando el hoy y acercando el mañana

Iluminando el hoy y acercando el mañana

Seguir leyendo
Acento

Estados

Programa

Iluminando el hoy y acercando el mañana

Iluminando el hoy y acercando el mañana

Seguir leyendo
Encima
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

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

Superficie

Programa

Profesionales Excepcionales

Iluminando el hoy y acercando el mañana

Acento
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

Acento
Superficie
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
Filete

Iluminando el hoy y acercando el mañana

Profesionales Excepcionales
Superficie
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

245

elementos publicados en su sistema de diseño

Superficie

245

elementos publicados en su sistema de diseño

Acento
Código
<div class="bb-c-stat bb-c-stat--superficie">
            <p class="bb-c-stat__value">245</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

Oscuro
Claro
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

Foco
Error
Deshabilitado
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

Tema
Tarjetas de opción
Tema
Casillas

Estados

Tema
Foco
Tema
Deshabilitado
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

Información

Recibido: te responde el equipo de Profesionales Excepcionales.

Éxito
Error
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 1 Vigente

Base

Programa Versión 1 Vigente

Compacta
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 1</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

EstiloTamañoUso
Display 180 pxPortadas, cartones y cifras grandes
Display 254 pxPortadas, cartones y cifras grandes
Título 132 pxTítulo de página o de sección
Título 222 pxSubtítulo y título de tarjeta
Superficie
EstiloTamañoUso
Display 180 pxPortadas, cartones y cifras grandes
Display 254 pxPortadas, cartones y cifras grandes
Título 132 pxTítulo de página o de sección
Título 222 pxSubtítulo y título de tarjeta
Rayada
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 libro100 %

Acento

Propio de la marca en este libro100 %

Línea
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>
09

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.
10

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.

11

Descargas

Tokens generados y ficheros

Ficheros

12

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

6 / 6 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.mision: Nuestra misión es visibilizar el talento de profesionales en diversas áreas. Lo hacemos a través de entrevistas recurrentes y en profundidad que destacan tanto sus trayectorias profesionales como sus historias personales. Nos comprometemos a crear un espacio libre de publicidad y sin influencia comercial, donde la autenticidad y la transparencia sean los pilares fundamentales. Desde nuestras plataformas, buscamos que estas historias inspiren y enriquezcan a nuestra audiencia y contribuyan al crecimiento y la difusión del talento.
declaracion.patrocinio: Patrocinio: lo admite.
declaracion.vision: Aspiramos a ser una plataforma de referencia para la visibilización del talento: un espacio donde se promueva la contribución positiva a la sociedad por medio de la actividad profesional y la excelencia. En el futuro, queremos ampliar nuestro impacto con eventos como galas y mesas redondas, y con un premio anual que reconozca a los profesionales más destacados por categoría o por trayectoria. Nuestra visión es que Profesionales Excepcionales sea una plataforma con reconocimiento nacional, que colabore con entidades de prestigio y promueva el crecimiento de sus contenidos en medios como radios y canales especializados.
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 / 49 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: #ffdc04
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: #ffdc04 · 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
… 15 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")
13

Versiones

Historial publicado
  1. v1 2026-11-09 Aprobación Vigente