Ir al contenido
TecWarden
  • Noticias
  • Secciones
  • Nosotros
  • Grupo
  • 0
  • Síganos
  • Español English
  • Contacto
TecWarden
  • 0
    • Noticias
    • Secciones
    • Nosotros
    • Grupo
  • Síganos
  • Español English
  • Contacto
Profesionales Excepcionales
Marcas
Todas las marcas
  • The Beacon Holding
  • Singular Community
  • Nuestras Causas
  • Singular Club
  • The Singular Hub
  • Singular Investments
  • Singular Ventures
  • ATLAS
  • EngArch
  • Finite
  • HybridMeM
  • autoWorks
  • loombiotech
  • the0racle
  • Singular Media
  • Singular Editorial
  • Para Toda una Vida
  • TecWarden
  • Singular Pictures
  • Singular Works
  • Outstarting
  • Polemizando
  • Profesionales Excepcionales
  • Singular Services
  • Digital Branding
  • Singular Beacon
  • Singular Events
  • Singular Jobs
  • The Singular Academy
  • Singular Solutions
  • Observatorio 360º
  • Observatorio de Absentismo
  • Observatorio de Bienestar
  • Observatorio de Compensación
  • Observatorio de Rotación
  • Observatorio de Talento
  • SingularARX
Entrar para ver más

    Marca

    • 01 Identidad

    Fundamentos

    • 02 Logotipo
      • Variantes
      • Área de respeto
      • Usos prohibidos
    • 03 Color
      • Rampas
      • Paleta
      • Roles
      • Contrastes
    • 04 Tipografía
      • Familias
      • Estilos
    • 05 Espaciado y forma
      • Espaciado
      • Radios
      • Elevación
      • Disposición
    • 06 Iconografía
      • Reglas
    • 07 Imagen
      • Tratamientos

    Componentes

    • 08 Componentes

    Aplicaciones

    • 09 Redes y publicaciones
      • Formatos
      • Qué cambia al girar

    Recursos

    • 10 Generador de imágenes
    • 11 Descargas
    • 12 Para agentes
      • Estilo de comunicación
      • Directrices para agentes de imágenes
    • 13 Versiones
    Profesionales Excepcionales

    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
    01 Identidad Propósito, misión, visión y valores 02 Logotipo Variantes, área de respeto y usos 03 Color Rampas, roles y contrastes 04 Tipografía Familias, especímenes y escala 05 Espaciado y forma Escala, radios y elevación 06 Iconografía Sistema de iconos 07 Imagen Guía para personas y agentes 08 Componentes Piezas web estándar del grupo 09 Redes y publicaciones Formatos y piezas para publicar 10 Generador de imágenes 11 Descargas Tokens generados y ficheros 12 Para agentes El contexto que recibe un agente 13 Versiones Historial publicado
    01

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

    Color

    Color

    Horizontal · Color

    Sin margen SVGPNG 128 pxPNG 256 px

    Claro

    Claro

    Horizontal · Claro

    Sin margen SVGPNG 1920 pxPNG 3840 px

    Color

    Color

    Apilado · Color

    Sin margen SVGPNG 1920 pxPNG 3840 px

    Claro

    Claro

    Apilado · Claro

    Sin margen SVGPNG 1920 pxPNG 3840 px

    Color

    Color

    Icono · Color

    Sin margen SVGPNG 1920 pxPNG 3840 px

    Claro

    Claro

    Icono · Claro

    Sin margen SVGPNG 1920 pxPNG 3840 px

    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)

    Las franjas del negativo son transparencia, no gris

    El negativo llevaba dos tonos fijos: blanco y #9193A6. Ese gris es azul-violeta —matiz 234°— y en el isotipo ocupaba 3 de sus 4 trazados, así que sobre imagen clara el logotipo se veía morado. La exportación de marca se regeneró para expresarlo como blanco al 50 %, y la calibración es aritmética: #9193A6 es exactamente blanco al 50 % sobre #22264D. Sobre navy se ve igual que siempre; sobre fotografía las franjas tiñen el plano de debajo. Los PNG a 1920 también se reimportaron: traen alfa parcial y cero rastro del gris.

    La tinta única se retiró del sistema el 17 de septiembre de 2026

    Las seis variantes de blanco y navy eran una capa derivada —se generaban aplanando el negativo— y la exportación de marca no las trae, así que salen del sistema en vez de quedarse declaradas sin fichero. Lo que resolvían sigue abierto: sobre plano claro el negativo blanco se funde —tinta media medida 254,254,254 sobre #EDEEF4—. Hasta que marca entregue la tinta única, la salida es el velo radial navy bajo el isotipo, y por debajo de 48 px de alto no se baja.

    Recursos de marca

    Cuatro bloques compuestos que vienen ya montados en la exportación de marca. Son arte cerrado igual que el logotipo: se colocan, no se rehacen. Esto importa especialmente en el logo de la emisora y en el del patrocinador — ninguno es nuestro, y recomponerlos con texto sería un error de identidad ajena.

    Marcas ajenas

    Radio Intercontinental y la Fundación para el Fomento de la Innovación Industrial tienen su propia identidad. En nuestras piezas aparecen sólo a través de estos activos, sin recolorear, sin reescalar desproporcionadamente y sin separar el logo de su antetítulo («Con el patrocinio de»). Si hace falta otro patrocinador, se pide su activo — no se compone con nuestra tipografía.

    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 %).
    É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.
    Cielo #8FD3FF RGB 143, 211, 255 Cielo; azul claro para enlaces, foco y primario en tema oscuro.
    Heredado de Singular Works
    Ámbar #FF9A62 RGB 255, 154, 98 Ámbar de la web; decoración, no texto.
    Heredado de Singular Works
    Noche #021620 RGB 2, 22, 32 Noche de la web; fondos muy oscuros de cabecera.
    Heredado de Singular Works
    Tinta #05283A RGB 5, 40, 58 Tinta de la web; degradado bajo texto sobre foto y sombras.
    Heredado de Singular Works
    Solape #56ABE2 RGB 86, 171, 226 Solape por transparencia de los iconos de app (0,6 × #8FD3FF + 0,4 × #006EB7).
    Heredado de Singular Works
    Fondo oscuro #262A36 RGB 38, 42, 54 Fondo oscuro de la hoja de contacto de iconos.
    Heredado de Singular Works
    Sombra #02161F RGB 2, 22, 31 Sombras del duotono de foto (tratamiento en revisión).
    Heredado de Singular Works
    Medio #006088 RGB 0, 96, 136 Medios tonos del duotono de foto (tratamiento en revisión).
    Heredado de Singular Works
    Luz #E2EEF4 RGB 226, 238, 244 Luces del duotono de foto (tratamiento en revisión).
    Heredado de Singular Works
    Claro #00672C RGB 0, 103, 44
    Heredado de Singular Works
    Claro #6D5000 RGB 109, 80, 0
    Heredado de Singular Works
    Oscuro #7CD591 RGB 124, 213, 145
    Heredado de Singular Works
    Oscuro #E1B75C RGB 225, 183, 92
    Heredado de Singular Works

    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

    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

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

    É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.34:1

    La marca lo prohíbe

    Acento / Superficie

    1.20:1

    La marca lo prohíbe

    Regla de acento

    El amarillo #FFDD00 es el único acento y funciona como señalador, no como superficie: caja de palabra clave, subrayado de sección, estado activo, botón primario. Nunca como fondo de un bloque grande de texto ni como color de párrafo. Sobre amarillo, la tinta es siempre navy #22264D — nunca blanco (1,9:1, ilegible). El gris #9193A6 aparece sólo dentro del logotipo negativo, como segundo tono del isotipo; no es un color de interfaz.

    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

    Oooh Baby sustituye a Make Magic

    Trae el juego latino completo —ñ y á con su marca diacrítica— así que desaparece el apaño de unicode-range que derivaba los acentuados a una segunda fuente. Va autoalojada en woff2 (latin, latin-ext y vietnamese) bajo SIL Open Font License 1.1, con el TTF de escritorio al lado. La familia no tiene Light: sólo peso 400.

    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)

    Un filtro no garantiza contraste

    Cuando va texto sobre foto hay que añadir además un velo: .pe-foto--velo (degradado navy) o .pe-foto--velo-total (plano al 72 %). Nunca texto directamente sobre una foto tratada, por oscura que parezca — el encuadre cambia y el contraste se va con él.

    Cartelería, fondos y carátula

    Las piezas ya producidas por marca, tal como están. Sirven de referencia de composición; las versiones editables y descargables (PNG, SVG, PDF) están en Piezas editables PE. Los ficheros maestros de Illustrator quedan referenciados, no embebidos.

    08

    Componentes

    Piezas web estándar del grupo

    BotónTarjetaCabecera de páginaLlamada a la acciónCitaEstadísticaPreguntas frecuentesPieCampos de formularioSelecciónAvisosInsigniasTablaProgreso

    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

    Iluminando el hoy y acercando el mañana

    Contactar
    Acento

    Iluminando el hoy y acercando el mañana

    Contactar
    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

    259

    elementos publicados en su sistema de diseño

    Superficie

    259

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

    Profesionales Excepcionales
    • Aviso legal
    • Privacidad
    • Contacto
    Oscuro
    Profesionales Excepcionales
    • Aviso legal
    • Privacidad
    • Contacto
    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

    No se ha podido enviar. Inténtalo de nuevo en unos minutos.

    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 14 Vigente

    Base

    Programa Versión 14 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 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

    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 libro95 %

    Acento

    Propio de la marca en este libro95 %

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

    El SVG que exporta el navegador no es vectorial de verdad

    Mete el HTML dentro de un <foreignObject>: se ve perfecto en un navegador y no abre bien en Illustrator ni en un RIP de imprenta. Y las fotografías siguen siendo mapa de bits dentro del SVG — sólo cambia el envoltorio y el fichero engorda. Si hace falta un SVG editable de una pieza, sale del maestro de Illustrator, no de la exportación del HTML.

    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

    tokens.css Variables CSS de la marca tokens.json Tokens legibles por máquina

    Ficheros

    • Horizontal · Color

      Sin margen SVGPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 pxPNG 3840 px

    • 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

    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

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

    Versiones

    Historial publicado

    1. v14 2026-11-09 Aprobación Vigente

    TecWarden

    Innovación y tecnología, en un mismo lugar.

    Novedades de innovación y tecnología en español.

    • +34 910 47 90 47
    • [email protected]
    • Av. Ciudad de Barcelona 132, 1ª, 28007 Madrid

    Síguenos

    La publicación

    • Secciones
    • La idea
    • En qué punto está

    TecWarden

    • Nosotros
    • De quién es
    • Trabaja con nosotros

    Recursos

    • El grupo
    • Singular Media
    • Las cinco divisiones del grupo

    Contacto

    • Contacto
    • Proponer un tema

    Un proyecto de The Beacon Holding

    Singular Beacon, S.L. · CIF ES B67869644 · Inscrita en el Registro Mercantil de Madrid Tomo 42.891, Folio 36, Inscripción 1, Hoja M-758246

    • Privacidad
    • Cookies
    • Condiciones de uso
    The Beacon Holding

    Amplitud de visión, unidad de propósito

    • Singular Services

      • Singular Beacon
      • The Singular Academy
      • Singular Jobs En desarrollo
      • Singular Events
    • Singular Solutions

      • Odoo Apps
      • Observatorio 360º
        • Observatorio de Bienestar
        • Observatorio de Rotación
        • Observatorio de Compensación
        • Observatorio de Talento
        • Observatorio de Absentismo
      • SingularARX En desarrollo
    • Singular Media

      • Singular Works
        • Profesionales Excepcionales
        • Outstarting
        • Polemizando
      • Singular Editorial
        • Para Toda una Vida
        • TecWarden
      • Singular Pictures En desarrollo
    • Singular Investments

      • Singular Ventures
        • the0racle
        • HybridMeM
        • EngArch En desarrollo
        • ATLAS En desarrollo
        • Finite En desarrollo
        • autoWorks En desarrollo
        • loombiotech En desarrollo
      • Relación con inversores
        • Singular Beacon, S.L.
        • Digital Branding Ltd
      • Rondas abiertas
    • Singular Community

      • Singular Community
      • Nuestras Causas
      • The Singular Hub
      • Singular Club
    Español | English
    Copyright © TecWarden

    Utilizamos cookies para proporcionarle una mejor experiencia de usuario en este sitio web. Política de cookies

    Solo las necesarias Acepto