Ir al contenido

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
01

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

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

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 #FFDD00 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 #FFDD00 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 %).
Exito #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
  • 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

Aa

Rol tinta / primario-800

17.47:1 AAA

Aa

Rol tinta / primario

14.45:1 AAA

Aa

acento / primario

10.73:1 AAA

Aa

primario / acento

10.73:1 AAA

Aa

Rol tinta tenue / primario

5.02:1 AA

Aa

primario / Rol tinta

14.45:1 AAA

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 exito / Contraste 232f49

6.75:1 AA

Aa

Rol error / Contraste 2e2148

5.35:1 AA

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.97:1 AAA

Aa

acento / superficie

10.73:1 AAA

Aa

acento / superficie-alta

8.23: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

exito / fondo

8.84:1 AAA

Aa

exito / superficie

7.31:1 AAA

Aa

exito / 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

10.73:1 AAA

Aa

acento-tinta / acento-hover

11.29:1 AAA

Aa

acento-tinta / acento-activo

6.35:1 AA

Aa

tinta / fondo

14.45:1 AAA

Aa

tinta / superficie

12.94:1 AAA

Aa

tinta-tenue / fondo

7.35:1 AAA

Aa

tinta-tenue / superficie

6.58:1 AA

Aa

acento-tinta / acento

10.73:1 AAA

Aa

info / Contraste 272b56

6.17:1 AA

Aa

tinta-tenue-sobre-tinte / Contraste 2c3057

7.46:1 AAA

Aa

exito / Contraste 232f49

6.75:1 AA

Aa

error / Contraste 2e2148

5.35:1 AA

Aa

tinta / superficie-alta

11.83:1 AAA

Aa

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

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

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

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

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

Secundario
Fantasma

Estados

Normal
Encima
Activo
Deshabilitado

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 leyendo

Una 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 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
Normal

Programa

Iluminando el hoy y acercando el mañana

Iluminando el hoy y acercando el mañana

Seguir leyendo
Encima

Regla 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

Acento

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

Superficie

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
Superficie

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

Acento

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

Claro

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

Normal
Foco
Error
Deshabilitado

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

Tema

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

Tema
Casillas

Estados

Tema
Normal
Tema
Foco
Tema
Deshabilitado

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.

Éxito
Error

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

Compacta

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

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

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

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

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 %

Línea

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>
09

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.

10

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

Vista previa con datos ficticios

Las personas del equipo generan su firma desde sus Preferencias de Odoo, con una sesión de empleado.

11

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

  1. SB Cover Portada: título, cliente, referencia, fecha y logotipo del cliente
  2. SB Agenda Índice, con más de dos secciones
  3. SB Section Separador, con 4 láminas o más en una sección
  4. SB Content Las secciones incluidas, en su orden
  5. SB Closing Cierre: 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
12

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
13

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.

14

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

Personas

Quién hace la marca

Pendiente

Equipo pendiente de consentimiento

Las personas del equipo aparecerán aquí cuando den su consentimiento para hacerlo público.

16

Descargas

Tokens generados y ficheros

Ficheros

17

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")
18

Versiones

Historial publicado

  1. v2 2026-11-04 Aprobación Vigente 242 claves cambiadas
  2. v1 2026-11-03 Aprobación