Skip to Content
The Tech Guardian
  • News
  • Sections
  • About us
  • Group
  • 0
  • Follow us
  • Español English
  • Contact
The Tech Guardian
  • 0
    • News
    • Sections
    • About us
    • Group
  • Follow us
  • Español English
  • Contact
Profesionales Excepcionales
Brands
All brands
  • The Beacon Holding
  • Digital Branding
  • EngArch
  • Nuestras Causas
  • Observatorio 360º
  • Observatorio de Absentismo
  • Observatorio de Bienestar
  • Observatorio de Compensación
  • Observatorio de Rotación
  • Observatorio de Talento
  • Singular Beacon
  • Singular Club
  • Singular Community
  • Para Toda una Vida
  • The Tech Guardian
  • Singular Events
  • Singular Jobs
  • Singular Pictures
  • Singular Ventures
  • the0racle
  • Singular Works
  • Outstarting
  • Polemizando
  • Profesionales Excepcionales
  • SingularARX
  • The Singular Academy
  • The Singular Hub
Sign in to see more

    Brand

    • 01 Identity

    Foundations

    • 02 Logo
      • Variants
      • Clear space
      • Forbidden uses
    • 03 Color
      • Ramps
      • Palette
      • Roles
      • Contrasts
    • 04 Typography
      • Families
      • Styles
    • 05 Spacing and shape
      • Spacing
      • Radii
      • Elevation
      • Layout
    • 06 Iconography
      • Rules
    • 07 Imagery
      • Treatments

    Components

    • 08 Components
      • Button
      • Card
      • Page header
      • Call to action
      • Quote
      • Statistic
      • Frequently asked questions
      • Footer
      • Form fields
      • Selection
      • Alerts
      • Badges
      • Table
      • Progress

    Applications

    • 09 Documents
      • Brand templates
    • 10 Signature
    • 11 Presentations
      • Brand templates
      • Skin
      • Structure
    • 12 Proposals
      • Pieces
    • 13 Templates
    • 14 Social media and publications
      • Formats
      • What changes when rotating

    Resources

    • 15 People
    • 16 Downloads
    • 17 For agents
      • Communication style
      • Guidelines for image agents
    • 18 Versions
    Profesionales Excepcionales

    Design system

    Iluminando el hoy y acercando el manana

    • Version2
    • ScopeShow
    • Date2026-11-04
    • Part ofSingular Works
    • SourceOdoo, published version
    • Content languagePartly in Spanish
    01 Identity Purpose, mission, vision and values 02 Logo Variants, clear space and usage 03 Color Ramps, roles and contrasts 04 Typography Families, specimens and scale 05 Spacing and shape Scale, radii and elevation 06 Iconography Icon system 07 Imagery Guide for people and agents 08 Components Standard web parts of the group 09 Documents Paper, templates and covers 10 Signature The brand's email signature 11 Presentations This brand's skin and the common structure 12 Proposals The pieces that are printed 13 Templates Where the brand's templates live 14 Social media and publications Formats and pieces to publish 15 People Who makes the brand 16 Downloads Generated tokens and files 17 For agents The context an agent receives 18 Versions Published history
    01

    Identity

    Purpose, mission, vision and values

    Part of Singular Works

    Iluminando el hoy y acercando el manana

    Slogan

    Institutional text

    • 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

    Logo

    Variants, clear space and usage

    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.

    Variants

    Colour

    Colour

    Horizontal · Color

    Without margin SVGPNG 128 pxPNG 256 px

    Claro

    Claro

    Horizontal · Light

    Without margin SVGPNG 1920 pxPNG 3840 px

    Colour

    Colour

    Stacked · Color

    Without margin SVGPNG 1920 pxPNG 3840 px

    Claro

    Claro

    Stacked · Light

    Without margin SVGPNG 1920 pxPNG 3840 px

    Colour

    Colour

    Icon · Color

    Without margin SVGPNG 1920 pxPNG 3840 px

    Claro

    Claro

    Icon · Light

    Without margin SVGPNG 1920 pxPNG 3840 px

    Clear space

    altura de la P del isotipo, por los cuatro lados

    Minimum sizes

    Horizontal
    120 px
    Horizontal mm
    30
    Isotype
    32 px
    Isotype mm
    10
    Mosca video
    72 px

    Forbidden uses

    Profesionales Excepcionales
    Not like thisRecomponer el nombre con otra tipografía, ni siquiera con Open Sans.
    Not like thisAlterar la proporción entre isotipo y texto, o separarlos.
    Not like thisDeformar, rotar, inclinar o añadir sombra, contorno, relieve o degradado al logotipo.
    Not like thisRecolorear el logotipo: el DS solo admite la versión de color y la negativa.
    Not like thisPoner la versión de color sobre navy, sobre amarillo o sobre fotografía.
    Not like thisEncerrar el logotipo en una caja que invada su área de respeto.
    Not like thisUsar 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

    Ramps, roles and contrasts

    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.

    Ramps

    Primario

    Primario 900 #060923
    Primario 800 #131639
    Source colour #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.
    Source colour #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
    Source colour #FFDD00 Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
    Source colour #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

    Palette

    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

    Light

    • Tinta tenue sobre tinte #35395D
    • Acento hover #FFE439
    • Acento activo #C6AB00
    • Exito #3FD08F
    • Error #FF6B7A
    • Info #A8ADDC
    • Foco #9B8700
    • Superficie alta #E7E8EF
    • Borde strong #B9BCCE
    • Background #FFFFFF
    • Superficie #F2F2F6
    • Borde #D8D9E4
    • Tinta #22264D
    • Tinta tenue #4F537B
    • Acento #FFDD00
    • Acento tinta #22264D

    Dark

    • Tinta tenue sobre tinte #C3C6DE
    • Acento hover #FFE439
    • Acento activo #C6AB00
    • Exito #3FD08F
    • Error #FF6B7A
    • Info #A8ADDC
    • Foco #FFDD00
    • Superficie alta #35395D
    • Borde strong #4F537B
    • Background #131639
    • Superficie #22264D
    • Borde #35395D
    • Tinta #FFFFFF
    • Tinta tenue #9296BA
    • Acento #FFDD00
    • Acento tinta #22264D

    Contrasts

    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, large text only

    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, large text only

    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 Below AA

    error / fondo

    2.75:1 Below AA

    info / fondo

    2.17:1 Below AA

    Forbidden combinations

    tinta / acento

    1.34:1 Do not use

    acento / fondo

    1.34:1 Do not use

    acento / superficie

    1.20:1 Do not use

    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

    Typography

    Families, specimens and scale

    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.

    Families

    Oooh Baby

    Script

    Iluminando el hoy y acercando el manana

    400

    Barlow Condensed

    Condensada

    Profesionales Excepcionales

    600700800

    Open Sans

    Primaria

    Iluminando el hoy y acercando el manana

    300400600700800

    Lato

    Secundaria

    Profesionales Excepcionales

    300400700900

    Barlow Condensed

    Terciaria

    Iluminando el hoy y acercando el manana

    600700800

    Oooh Baby

    4

    Iluminando el hoy y acercando el manana

    400

    ui-monospace

    5

    Iluminando el hoy y acercando el manana

    400

    Styles

    Script componible

    Iluminando el hoy y acercando el manana

    Display 1 80px · 800 · 1.02 Covers, title cards and big figures

    Profesionales Excepcionales

    Display 2 54px · 800 · 1.05 Covers, title cards and big figures

    Iluminando el hoy y acercando el manana

    Title 1 32px · 700 · 1.15 Page or section title

    Profesionales Excepcionales

    Title 2 22px · 600 · 1.25 Subtitle and card title

    Iluminando el hoy y acercando el manana

    Body largo 16px · 400 · 1.65 Long reading: articles and scripts

    Profesionales Excepcionales

    Body s 14px · 400 · 1.55 Notes, captions and secondary text

    Iluminando el hoy y acercando el manana

    Display 1 80px · 800 · 1.02 Covers, title cards and big figures

    Profesionales Excepcionales

    Display 2 54px · 800 · 1.05 Covers, title cards and big figures

    Iluminando el hoy y acercando el manana

    Title 1 32px · 700 · 1.15 Page or section title

    Profesionales Excepcionales

    Title 2 22px · 600 · 1.25 Subtitle and card title

    Iluminando el hoy y acercando el manana

    Body 16px · 400 · 1.6 Running interface text

    Profesionales Excepcionales

    Body largo 16px · 400 · 1.65 Long reading: articles and scripts

    Iluminando el hoy y acercando el manana

    Body s 14px · 400 · 1.55 Notes, captions and secondary text

    Profesionales Excepcionales

    Quote 88px · 900 · 1.16 Highlighted quote, always attributed

    Iluminando el hoy y acercando el manana

    Label 12px · 700 · 1.4 Eyebrows, labels and metadata

    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

    Spacing and shape

    Scale, radii and elevation

    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.

    Spacing

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

    Radii

    00px
    14px
    28px
    312px
    Pastilla999px
    Radius 00px
    Radius 14px
    Radius 28px
    Radius 312px
    Radius pastilla999px

    Elevation

    0 none
    1 0 8px 24px rgba(6, 9, 35, 0.55)
    Foco 2px solid #FFDD00
    Elevation 0 none
    Elevation 1 0 8px 24px rgba(6, 9, 35, 0.55)
    Elevation foco 2px solid #ffdd00

    On a light surface, so the shadow shows in any theme.

    Layout

    Application width
    1120 px
    Width form
    860 px
    Width reading characters
    70
    Touch target minimum
    44 px
    06

    Iconography

    Icon system

    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.

    Rules

    Files
    spotify.svg, podcast.svg, youtube.svg, linkedin.svg, instagram.svg
    Monochrome
    Yes
    Sizes
    20 · 24 · 32 px
    Gap
    20 px
    Method
    svg_en_linea
    Viewbox
    0 0 640 640
    Preserve aspect ratio
    xMidYMid meet
    Circled in
    recursos.emisora
    Set
    Lucide
    Stroke
    1.5 px
    Size
    20 px
    Colour
    currentColor
    07

    Imagery

    Guide for people and agents

    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.

    Treatments

    There are no brand photographs in the book yet: each treatment will be applied to them once published. Here it is shown on a plane in the brand colours.

    Untreated
    Retrato Use: directorio, invitados saturate(.82) contrast(1.08) brightness(1.02)
    Editorial Use: imagen en articulo saturate(.9) contrast(1.06) brightness(1.03) hue-rotate(-4deg)
    Duotono Use: cabeceras y carteleria grayscale(1) contrast(1.15) brightness(.92) #22264d · lighten#ffdd00 · multiply
    Duotono azul Use: 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 Use: temas serios, mucho texto encima grayscale(1) contrast(1.12) brightness(.9) #060923 · lighten#c3c6de · multiply
    Archivo Use: material antiguo o de baja calidad grayscale(1) contrast(1.3) brightness(.95)
    Iluminando el hoy y acercando el manana
    Veils · 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

    Components

    Standard web parts of the group

    Button

    A single primary button per view; the rest, secondary or ghost.

    Variants, states and code

    The action of a view.

    Variants

    Secondary
    Ghost

    States

    Normal
    Hover
    Active
    Disabled

    Usage rule A single primary button per view; the rest, secondary or ghost.

    Code
    <button type="button" class="bb-c-button bb-c-button--primario">Get in touch</button>

    Card

    Show

    Iluminando el hoy y acercando el manana

    Iluminando el hoy y acercando el manana

    Read more

    One idea per card, and all cards in a row the same height.

    Variants, states and code

    A piece of content with title, text and link.

    Variants

    Show

    Iluminando el hoy y acercando el manana

    Iluminando el hoy y acercando el manana

    Read more
    Border

    Show

    Iluminando el hoy y acercando el manana

    Iluminando el hoy y acercando el manana

    Read more
    Accent

    States

    Show

    Iluminando el hoy y acercando el manana

    Iluminando el hoy y acercando el manana

    Read more
    Normal

    Show

    Iluminando el hoy y acercando el manana

    Iluminando el hoy y acercando el manana

    Read more
    Hover

    Usage rule One idea per card, and all cards in a row the same height.

    Code
    <article class="bb-c-card bb-c-card--superficie">
                    <p class="bb-c-card__over">Show</p>
                    <h3 class="bb-c-card__title">Iluminando el hoy y acercando el manana</h3>
                    <p class="bb-c-card__text">Iluminando el hoy y acercando el manana</p>
                    <a class="bb-c-card__link" href="#">Read more</a>
            </article>

    Page header

    Show

    Profesionales Excepcionales

    Iluminando el hoy y acercando el manana

    A single main title per page, saying what it is about in one line.

    Variants, states and code

    The opening of a page: eyebrow, title and lead.

    Variants

    Show

    Profesionales Excepcionales

    Iluminando el hoy y acercando el manana

    Accent

    Usage rule A single main title per page, saying what it is about in one line.

    Code
    <header class="bb-c-header bb-c-header--superficie">
                <p class="bb-c-header__over">Show</p>
                <h1 class="bb-c-header__title">Profesionales Excepcionales</h1>
                <p class="bb-c-header__lede">Iluminando el hoy y acercando el manana</p>
            </header>

    Call to action

    Iluminando el hoy y acercando el manana

    Get in touch

    One per page, at the end, with a verb that says what happens on click.

    Variants, states and code

    The close of a page, with a single action.

    Variants

    Iluminando el hoy y acercando el manana

    Get in touch
    Surface

    Usage rule One per page, at the end, with a verb that says what happens on click.

    Code
    <aside class="bb-c-cta bb-c-cta--acento">
                <h2 class="bb-c-cta__title">Iluminando el hoy y acercando el manana</h2>
                <a class="bb-c-button bb-c-button--primario" href="#">Get in touch</a>
            </aside>

    Quote

    Iluminando el hoy y acercando el manana

    Profesionales Excepcionales

    Always with its author; if it cannot be attributed, it is not a quote.

    Variants, states and code

    A highlighted sentence with its author.

    Variants

    Iluminando el hoy y acercando el manana

    Profesionales Excepcionales
    Surface

    Usage rule Always with its author; if it cannot be attributed, it is not a quote.

    Code
    <blockquote class="bb-c-quote bb-c-quote--filete">
                <p class="bb-c-quote__text">Iluminando el hoy y acercando el manana</p>
                <cite class="bb-c-quote__author">Profesionales Excepcionales</cite>
            </blockquote>

    Statistic

    242

    items published in its design system

    A real figure with its source; no data, no statistic.

    Variants, states and code

    A figure with what it means.

    Variants

    242

    items published in its design system

    Accent

    Usage rule A real figure with its source; no data, no statistic.

    Code
    <div class="bb-c-stat bb-c-stat--superficie">
                <p class="bb-c-stat__value">242</p>
                <p class="bb-c-stat__label">items published in its design system</p>
            </div>

    Frequently asked questions

    What is Profesionales Excepcionales?

    Iluminando el hoy y acercando el manana

    What drives it?

    Iluminando el hoy y acercando el manana

    Questions people really ask, with the answer in the first line.

    Variants, states and code

    Questions that open and close without scripts.

    Usage rule Questions people really ask, with the answer in the first line.

    Code
    <div class="bb-c-faq">
                <details class="bb-c-faq__item" open="open">
                    <summary class="bb-c-faq__q">What is Profesionales Excepcionales?</summary>
                    <p class="bb-c-faq__a">Iluminando el hoy y acercando el manana</p>
                </details>
                <details class="bb-c-faq__item">
                    <summary class="bb-c-faq__q">What drives it?</summary>
                    <p class="bb-c-faq__a">Iluminando el hoy y acercando el manana</p>
                </details>
            </div>

    Footer

    Profesionales Excepcionales
    • Legal notice
    • Privacy
    • Contact

    No promotions: identity, legal links and contact.

    Variants, states and code

    The close of every page: brand and links.

    Variants

    Profesionales Excepcionales
    • Legal notice
    • Privacy
    • Contact
    Light

    Usage rule No promotions: identity, legal links and contact.

    Code
    <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="#">Legal notice</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </footer>

    Form fields

    Every field with a visible label; the error is said in words, not only in colour.

    Variants, states and code

    Text, email and selection fields with their label, hint and error.

    States

    Normal
    Focus
    Error
    Disabled

    Usage rule Every field with a visible label; the error is said in words, not only in colour.

    Code
    <form class="bb-c-form bb-c-form--base">
                <label class="bb-c-field">
                    <span class="bb-c-field__label">Name</span>
                    <input class="bb-c-field__input" type="text" value="Profesionales Excepcionales"/>
                </label>
                <label class="bb-c-field">
                    <span class="bb-c-field__label">Email</span>
                    <input class="bb-c-field__input" type="email"/>
                    <span class="bb-c-field__hint">Only to answer you.</span>
                </label>
                <label class="bb-c-field">
                    <span class="bb-c-field__label">Topic</span>
                    <select class="bb-c-field__input">
                        <option>Profesionales Excepcionales</option>
                    </select>
                </label>
            </form>

    Selection

    Topic

    One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.

    Variants, states and code

    Choosing one option among cards, or several with checkboxes.

    Variants

    Topic
    Checkboxes

    States

    Topic
    Normal
    Topic
    Focus
    Topic
    Disabled

    Usage rule One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.

    Code
    <fieldset class="bb-c-choice bb-c-choice--tarjetas">
                <legend class="bb-c-field__label">Topic</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>

    Alerts

    Iluminando el hoy y acercando el manana

    One sentence that says what happened and what to do; colour is never the only signal.

    Variants, states and code

    A short message about what has just happened.

    Variants

    Received: the Profesionales Excepcionales team will answer you.

    Success

    It could not be sent. Try again in a few minutes.

    Error

    Usage rule One sentence that says what happened and what to do; colour is never the only signal.

    Code
    <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 manana</p>
            </div>

    Badges

    Show Version 2 Current

    One or two words; never as a button.

    Variants, states and code

    Short labels for state, kind or category.

    Variants

    Show Version 2 Current

    Compact

    Usage rule One or two words; never as a button.

    Code
    <p class="bb-c-badges bb-c-badges--base">
                <span class="bb-c-badge bb-c-badge--acento">Show</span>
                <span class="bb-c-badge">Version 2</span>
                <span class="bb-c-badge bb-c-badge--borde">Current</span>
            </p>

    Table

    StyleSizeUse
    Display 180 pxCovers, title cards and big figures
    Display 254 pxCovers, title cards and big figures
    Title 132 pxPage or section title
    Title 222 pxSubtitle and card title

    Only for data that is compared; the header always says what each column is.

    Variants, states and code

    Data in rows and columns, with header.

    Variants

    StyleSizeUse
    Display 180 pxCovers, title cards and big figures
    Display 254 pxCovers, title cards and big figures
    Title 132 pxPage or section title
    Title 222 pxSubtitle and card title
    Striped

    Usage rule Only for data that is compared; the header always says what each column is.

    Code
    <table class="bb-c-table bb-c-table--superficie">
                <thead><tr><th scope="col">Style</th><th scope="col">Size</th><th scope="col">Use</th></tr></thead>
                <tbody>
                    <tr>
                        <td>Display 1</td><td><code>80 px</code></td><td>Covers, title cards and big figures</td>
                    </tr><tr>
                        <td>Display 2</td><td><code>54 px</code></td><td>Covers, title cards and big figures</td>
                    </tr><tr>
                        <td>Title 1</td><td><code>32 px</code></td><td>Page or section title</td>
                    </tr><tr>
                        <td>Title 2</td><td><code>22 px</code></td><td>Subtitle and card title</td>
                    </tr>
                </tbody>
            </table>

    Progress

    Own to the brand in this book100 %

    Always with the figure in text next to the bar.

    Variants, states and code

    How far something has gone, as a bar and as a figure.

    Variants

    Own to the brand in this book100 %

    Outline

    Usage rule Always with the figure in text next to the bar.

    Code
    <div class="bb-c-progress bb-c-progress--acento">
                <p class="bb-c-progress__head"><span>Own to the brand in this book</span><strong>100 %</strong></p>
                <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="Own to the brand in this book">
                    <span class="bb-c-progress__bar" style="width: 100%"></span>
                </div>
            </div>
    09

    Documents

    Paper, templates and covers

    Brand templates

    Word letterhead

    A4 with the logo, the company foot, the brand styles and placeholders to write over.

    Download .docx

    10

    Signature

    The brand's email signature

    The email signature closes every message from the brand: the logo, the person's name and job title, contact details and, if the brand publishes them, a banner and a legal notice. It is generated from the brand's published version, so it changes when the brand does.

    Profesionales Excepcionales

    First Last

    Job title

    Phone · email

    Preview with fictitious data

    Team members generate their signature from their Odoo Preferences, signed in as an employee.

    11

    Presentations

    This brand's skin and the common structure

    Brand templates

    PowerPoint 16:9

    Cover, divider, content, two columns, picture and text, figure or quote and closing with contact, each with its placeholders.

    Download .pptx

    Skin

    Colours

    • Paper #FFFFFF
    • Ink #22264D
    • Heading #22264D
    • Accent #22264D
    • Signal #FFDD00
    • Surface #F2F2F6
    • Stage #22264D
    • Stage ink #FFFFFF

    Lowest text contrast: 10.3:1

    Composition

    Headings
    Open Sans
    Text
    Open Sans
    Margin
    1.25 in
    Gap
    0.333 in
    Card radius
    0.083 in
    Scale: cover, title, label
    40 · 30 · 22 pt

    Download a sample of the deck. Fictitious content, with no client data.

    Structure

    1. SB Cover Cover: title, client, reference, date and client logo
    2. SB Agenda Contents, with more than two sections
    3. SB Section Divider, with 4 slides or more in a section
    4. SB Content The included sections, in their order
    5. SB Closing Closing: thanks and contact of the owner

    Template layouts

    Cover
    SB Cover
    Contents
    SB Agenda
    Divider
    SB Section
    Text
    SB Content
    Two columns
    SB Two Columns
    Three columns
    SB Three Columns
    KPIs
    SB KPI Tiles
    Table
    SB Table
    Gantt
    SB Gantt
    Team
    SB Team
    Closing
    SB Closing
    Blank
    SB Blank

    Sections with their own slides

    • Goals, Requirements and Scope
    • Planning and Milestones
    • Governance Model
    • Team
    • Success Stories
    • Fees
    • Payment Terms
    • Terms and Conditions
    12

    Proposals

    The pieces that are printed

    Pieces

    Cover

    Full bleed, with the house art.

    Body

    The included sections, numbered, with the head and foot of the document system.

    Acceptance

    Full bleed, with the boxes where the client signs.

    Back cover

    Full bleed, with the art and the legal foot.

    Sections the body can carry

    • Background
    • State of the Art
    • Goals, Requirements and Scope
    • Planning and Milestones
    • Methodology
    • Governance Model
    • Team
    • Client Team
    • Success Stories
    • Fees
    • Payment Terms
    • Terms and Conditions
    • Custom
    13

    Templates

    Where the brand's templates live

    The brand's templates live in the Applications sections: each one shows the real piece.

    09 Documents 11 Presentations 12 Proposals
    14

    Social media and publications

    Formats and pieces to publish

    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.

    Formats

    Poster 16:9

    Size
    3840 × 2160 px
    Composition
    foto a sangre 44% izquierda, campo navy derecha

    Poster A4

    Mm
    210 · 297
    Composition
    foto a sangre tercio superior, campo navy abajo

    Roll up

    Mm
    850 · 2000
    Nota
    300 mm inferiores libres: los tapa el mostrador

    Background teams

    Size
    3840 × 2160 px
    Nota
    tercio central libre: ahi va la persona

    Post cuadrado

    Size
    2160 × 2160 px

    Story reel

    Size
    2160 × 3840 px
    Safe zone
    500 px

    Caratula audio

    Size
    3000 × 3000 px
    Composition
    campo navy plano, logotipo apilado negativo al 62%

    Cabecera linkedin

    Size
    1584 × 396 px
    Nota
    zona central-izquierda libre: la tapa el avatar

    What changes when rotating

    Split
    la foto pasa del 44 % izquierdo al 38 % superior; el campo navy ocupa el resto
    Order
    no cambia: logotipo → filete → eslogan → datos → patrocinio
    Margins
    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
    Slogan
    tres líneas a ras por la izquierda, igual que en 16:9
    Sponsorship
    fuera: el A4 se imprime también sin patrocinador. Se añade como pie sólo cuando la pieza lo exige
    Export
    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.

    15

    People

    Who makes the brand

    Pending

    Team pending consent

    Team members will appear here once they consent to being shown publicly.

    16

    Downloads

    Generated tokens and files

    tokens.css Brand CSS variables tokens.json Machine-readable tokens

    Files

    • Horizontal · Color

      Without margin SVGPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 pxPNG 3840 px

    • Horizontal · Light

      Without margin SVGPNG 1920 pxPNG 3840 px

    • Stacked · Color

      Without margin SVGPNG 1920 pxPNG 3840 px

    • Stacked · Light

      Without margin SVGPNG 1920 pxPNG 3840 px

    • Icon · Color

      Without margin SVGPNG 1920 pxPNG 3840 px

    • Icon · Light

      Without margin SVGPNG 1920 pxPNG 3840 px

    17

    For agents

    Content in Spanish

    The context an agent receives

    What is published for this audience, as an agent reads it: what is mandatory comes first.

    Communication style

    3 / 3 lines within the limit

    Context
    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 manana
    How to request it
    env["sb.brand"].sb_context("profesionales-excepcionales", purpose="redactar", language="en_US")

    Guidelines for image agents

    33 / 52 lines within the limit

    Context
    NEVER 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.)
    NEVER logo directriz.logo.never.alterar-la-proporcion-entre-isotipo-y: Alterar la proporción entre isotipo y texto, o separarlos.
    NEVER logo directriz.logo.never.deformar-rotar-inclinar-o-anadir-sombra: Deformar, rotar, inclinar o añadir sombra, contorno, relieve o degradado al logotipo.
    NEVER 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).)
    NEVER 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.)
    NEVER logo directriz.logo.never.encerrar-el-logotipo-en-una-caja: Encerrar el logotipo en una caja que invada su área de respeto.
    NEVER 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.)
    NEVER logo logo.translucido.prohibido_sobre: El logotipo translúcido no se pone sobre plano claro, sobreexpuesto ni fondo blanco.
    NEVER 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.
    NEVER 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.blanco: #ffffff · Blanco · Blanco: tinta principal sobre navy y fondo del tema claro. Nunca sobre amarillo.
    … 19 lines cut by the limit, 0 mandatory: request a larger max_chars.
    How to request it
    env["sb.brand"].sb_context("profesionales-excepcionales", purpose="imagen", language="en_US")
    18

    Versions

    Published history

    1. v2 2026-11-04 Approved Current 242 keys changed
    2. v1 2026-11-03 Approved

    The Tech Guardian

    Innovation and technology, all in one place.

    Innovation and technology news in Spanish.

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

    Follow us

    The publication

    • Sections
    • The idea
    • Where it stands

    The Tech Guardian

    • About us
    • Who is behind it
    • Work with us

    Resources

    • The group
    • Singular Media
    • The group's five divisions

    Contact

    • Contact
    • Pitch a story

    Part of The Beacon Holding

    Singular Beacon, S.L. · Tax ID (CIF) ES B67869644 · Registered with the Registro Mercantil de Madrid (Madrid Commercial Registry), Tomo 42.891, Folio 36, Inscripción 1, Hoja M-758246.

    • Privacy
    • Cookies
    • Terms of use
    The Beacon Holding

    Breadth of vision, unity of purpose

    • Singular Services

      • Singular Beacon
      • The Singular Academy
      • Singular Jobs In development
      • 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 In development
      • EngArch In development
    • Singular Media

      • Singular Works
        • Profesionales Excepcionales
        • Outstarting
        • Polemizando
      • Singular Editorial
        • Para Toda una Vida
        • The Tech Guardian
      • Singular Pictures In development
    • Singular Investments

      • Singular Ventures
        • the0racle
        • HybridMeM
      • Investor relations
        • Singular Beacon, S.L.
        • Digital Branding Ltd
      • Open rounds
    • Singular Community

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

    We use cookies to provide you a better user experience on this website. Cookie Policy

    Only essentials I agree