Design system
Iluminando el hoy y acercando el manana
- Version2
- ScopeShow
- Date2026-11-04
- Part ofSingular Works
- SourceOdoo, published version
- Content languagePartly in Spanish
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.
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
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
-
El logotipo translúcido no se pone sobre plano claro, sobreexpuesto ni fondo blanco.
-
El negativo a dos tonos no se usa en fotografía, vídeo, carátulas, reels ni marca de agua.
-
recomponer el texto con otra tipografia (el texto es parte del arte)
Color
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
#060923
#131639
#22264D
Azul marino 700, primario de marca (#22264D): superficie de paneles y tinta sobre acento. Contraste: 10,74:1 sobre #ffdd00; 14,46:1 sobre #ffffff.
#22264D
Azul marino 700, primario de marca (#22264D): superficie de paneles y tinta sobre acento. Contraste: 10,74:1 sobre #ffdd00; 14,46:1 sobre #ffffff.
#35395D
#4F537B
Azul marino 500 (periwinkle). CMYK 77,67,29,13. Rampa de marca; los componentes usan roles, no pasos de rampa.
Acento
#9B8700
#C6AB00
#FFDD00
Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
#FFDD00
Amarillo 500, único acento (#FFDD00): señalador (palabra clave, estado activo, botón primario), nunca superficie grande. Sobre él, tinta siempre #22264d.
#FFE439
#FFEA64
Palette
#FFFFFF
RGB 255, 255, 255
Blanco: tinta principal sobre navy y fondo del tema claro. Nunca sobre amarillo.
#9296BA
RGB 146, 150, 186
Texto secundario sobre superficie plana navy (5,02:1 sobre #22264d). No usar sobre fondo teñido ni sobre superficie alta.
#C3C6DE
RGB 195, 198, 222
Texto tenue sobre fondos teñidos de avisos e insignias (7,47:1 sobre el tinte al 14 %).
#3FD08F
RGB 63, 208, 143
Fase completada, validación correcta.
#FF6B7A
RGB 255, 107, 122
Fallo de fase, campo inválido.
#A8ADDC
RGB 168, 173, 220
Aviso neutro, dato detectado.
#F2F2F6
RGB 242, 242, 246
Superficie del tema claro (impresión, documentos, firma de correo).
#D8D9E4
RGB 216, 217, 228
Borde del tema claro.
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
Rol tinta / primario-800
17.47:1 AAA
Rol tinta / primario
14.45:1 AAA
acento / primario
10.73:1 AAA
primario / acento
10.73:1 AAA
Rol tinta tenue / primario
5.02:1 AA
primario / Rol tinta
14.45:1 AAA
primario-500 / Rol tinta
7.35:1 AAA
Rol info / Contraste 272b56
6.17:1 AA
Rol tinta tenue sobre tinte / Contraste 2c3057
7.46:1 AAA
Rol exito / Contraste 232f49
6.75:1 AA
Rol error / Contraste 2e2148
5.35:1 AA
tinta / fondo
17.47:1 AAA
tinta / superficie
14.45:1 AAA
tinta / superficie-alta
11.08:1 AAA
tinta-tenue / fondo
6.07:1 AA
tinta-tenue / superficie
5.02:1 AA
tinta-tenue / superficie-alta
3.84:1 AA, large text only
tinta-tenue-sobre-tinte / fondo
10.36:1 AAA
tinta-tenue-sobre-tinte / superficie
8.57:1 AAA
tinta-tenue-sobre-tinte / superficie-alta
6.57:1 AA
acento / fondo
12.97:1 AAA
acento / superficie
10.73:1 AAA
acento / superficie-alta
8.23:1 AAA
acento-hover / fondo
13.65:1 AAA
acento-hover / superficie
11.29:1 AAA
acento-hover / superficie-alta
8.66:1 AAA
exito / fondo
8.84:1 AAA
exito / superficie
7.31:1 AAA
exito / superficie-alta
5.61:1 AA
error / fondo
6.35:1 AA
error / superficie
5.25:1 AA
error / superficie-alta
4.03:1 AA, large text only
info / fondo
8.05:1 AAA
info / superficie
6.66:1 AA
info / superficie-alta
5.10:1 AA
acento-tinta / acento
10.73:1 AAA
acento-tinta / acento-hover
11.29:1 AAA
acento-tinta / acento-activo
6.35:1 AA
tinta / fondo
14.45:1 AAA
tinta / superficie
12.94:1 AAA
tinta-tenue / fondo
7.35:1 AAA
tinta-tenue / superficie
6.58:1 AA
acento-tinta / acento
10.73:1 AAA
info / Contraste 272b56
6.17:1 AA
tinta-tenue-sobre-tinte / Contraste 2c3057
7.46:1 AAA
exito / Contraste 232f49
6.75:1 AA
error / Contraste 2e2148
5.35:1 AA
tinta / superficie-alta
11.83:1 AAA
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
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
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
Iluminando el hoy y acercando el manana
Profesionales Excepcionales
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
-
Base4px -
14px -
28px -
312px -
416px -
520px -
624px -
832px -
1248px -
1664px -
2496px -
Base4px -
Space 14px -
Space 28px -
Space 312px -
Space 416px -
Space 520px -
Space 624px -
Space 832px -
Space 1248px -
Space 1664px -
Space 2496px
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
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
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.
saturate(.82) contrast(1.08) brightness(1.02)
saturate(.9) contrast(1.06) brightness(1.03) hue-rotate(-4deg)
grayscale(1) contrast(1.15) brightness(.92)
#22264d · lighten#ffdd00 · multiply
grayscale(1) contrast(1.14) brightness(.94)
#131639 · lighten#a8addc · multiply
grayscale(1) contrast(1.12) brightness(.9)
#060923 · lighten#c3c6de · multiply
grayscale(1) contrast(1.3) brightness(.95)
rgba(19, 22, 57, 0.72)
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
States
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 moreOne 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
States
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
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
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
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
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
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
No promotions: identity, legal links and contact.
Variants, states and code
The close of every page: brand and links.
Variants
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
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
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
States
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.
It could not be sent. Try again in a few minutes.
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
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
| Style | Size | Use |
|---|---|---|
| Display 1 | 80 px | Covers, title cards and big figures |
| Display 2 | 54 px | Covers, title cards and big figures |
| Title 1 | 32 px | Page or section title |
| Title 2 | 22 px | Subtitle 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
| Style | Size | Use |
|---|---|---|
| Display 1 | 80 px | Covers, title cards and big figures |
| Display 2 | 54 px | Covers, title cards and big figures |
| Title 1 | 32 px | Page or section title |
| Title 2 | 22 px | Subtitle and card title |
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 %
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>
Documents
Paper, templates and covers
Brand templates
Word letterhead
A4 with the logo, the company foot, the brand styles and placeholders to write over.
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.
First Last
Job title
Phone · email
Team members generate their signature from their Odoo Preferences, signed in as an employee.
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.
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
SB CoverCover: title, client, reference, date and client logoSB AgendaContents, with more than two sectionsSB SectionDivider, with 4 slides or more in a sectionSB ContentThe included sections, in their orderSB ClosingClosing: 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
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
Templates
Where the brand's templates live
The brand's templates live in the Applications sections: each one shows the real piece.
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.
People
Who makes the brand
Team pending consent
Team members will appear here once they consent to being shown publicly.
Downloads
Generated tokens and files
Files
- Horizontal · Color
-
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
For agents
Content in SpanishThe 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")
Versions
Published history
- v2 2026-11-04 Approved Current 242 keys changed
- v1 2026-11-03 Approved