Propósito
El grupo es la forma de crear un impacto positivo en el mundo
Heredado de The Beacon HoldingSistema de diseño
- Versión3
- AlcanceObservatorio
- Fecha2026-11-05
- Pertenece aObservatorio 360º
- OrigenOdoo, versión publicada
Identidad
Propósito, misión, visión y valores
Lo que hereda Heredado de The Beacon Holding
Pilares
Heredado de The Beacon Holding
- Datos para decidir
- Personas en el centro
- Tecnología como medio
- Gestión por proyectos, con márgenes unitarios
- Los valores, la visión y la ética profesional que nos guían
Valores
Heredado de The Beacon Holding
Impacto Positivo
Actuamos conforme a nuestros valores y nuestro Código Ético, tratamos de forma respetuosa y agradable a todas las partes, tenemos conciencia social y ambiental y una clara determinación de aportar valor construyendo relaciones que cuidamos en el largo plazo.
Bondad, Honestidad, Lealtad y Respeto
Aporte de Valor
Ofrecemos soluciones de alta calidad y trabajamos para que cada euro invertido por nuestros clientes se transforme en valor para su firma. Nos responsabilizamos del ciclo de vida completo de los proyectos operando conforme a los principios de eficiencia y eficacia, comenzando con el final en mente y buscando sinergias y estrategias win-win.
Vocación de Excelencia y Orientación a Resultados
Adaptabilidad
Nuestro sector, así como las necesidades de nuestros clientes están en constante cambio. Somos conscientes, considerados y comprensivos con estas necesidades. Tenemos voluntad de ayudar y lo hacemos siendo flexibles en cuanto a cambios en los requisitos iniciales, plazos y costes.
Flexibilidad, Empatía y Transparencia
Texto institucional 1
- Digital Branding (Londres, 2015: origen del grupo, no es división)
Logotipo
Variantes, área de respeto y usos
Variantes
Color
Rampas, roles y contrastes
Paleta
Secundario
#26343B
RGB 38, 52, 59
Primario
#95C11F
RGB 149, 193, 31
Primario profundo
#577600
RGB 87, 118, 0
Primario claro
#CFF270
RGB 207, 242, 112
Primario oscuro
#769C0E
RGB 118, 156, 14
Oscuro
#0E0E0E
RGB 14, 14, 14
Claro
#F4F4F4
RGB 244, 244, 244
Tipografía
Familias, especímenes y escala
Familias
Source Sans 3
Primaria
Observatorio de Absentismo
400
Iconografía
Iconos
Todavía no está publicado para esta marca.
Componentes
Piezas web estándar del grupo
Botón
Un solo botón principal por vista; lo demás, secundario o fantasma.
Variantes, estados y código
La acción de una vista.
Variantes
Estados
Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.
Código
<button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>Tarjeta
Observatorio
Un sistema de diseño compartido
Un sistema de diseño compartido
Seguir leyendoUna idea por tarjeta, y todas las de una fila del mismo alto.
Variantes, estados y código
Un contenido con título, texto y enlace.
Variantes
Observatorio
Un sistema de diseño compartido
Un sistema de diseño compartido
Seguir leyendoObservatorio
Un sistema de diseño compartido
Un sistema de diseño compartido
Seguir leyendoEstados
Observatorio
Un sistema de diseño compartido
Un sistema de diseño compartido
Seguir leyendoObservatorio
Un sistema de diseño compartido
Un sistema de diseño compartido
Seguir leyendoRegla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.
Código
<article class="bb-c-card bb-c-card--superficie">
<p class="bb-c-card__over">Observatorio</p>
<h3 class="bb-c-card__title">Un sistema de diseño compartido</h3>
<p class="bb-c-card__text">Un sistema de diseño compartido</p>
<a class="bb-c-card__link" href="#">Seguir leyendo</a>
</article>Cabecera de página
Observatorio
Observatorio de Absentismo
Un sistema de diseño compartido
Un solo título principal por página, que diga de qué va en una línea.
Variantes, estados y código
La apertura de una página: antetítulo, título y entradilla.
Variantes
Observatorio
Observatorio de Absentismo
Un sistema de diseño compartido
Regla de uso Un solo título principal por página, que diga de qué va en una línea.
Código
<header class="bb-c-header bb-c-header--superficie">
<p class="bb-c-header__over">Observatorio</p>
<h1 class="bb-c-header__title">Observatorio de Absentismo</h1>
<p class="bb-c-header__lede">Un sistema de diseño compartido</p>
</header>Llamada a la acción
Una por página, al final, con un verbo que diga qué pasa al pulsar.
Variantes, estados y código
El cierre de una página, con una sola acción.
Variantes
Regla de uso Una por página, al final, con un verbo que diga qué pasa al pulsar.
Código
<aside class="bb-c-cta bb-c-cta--acento">
<h2 class="bb-c-cta__title">Un sistema de diseño compartido</h2>
<a class="bb-c-button bb-c-button--primario" href="#">Contactar</a>
</aside>Cita
Un sistema de diseño compartido
Observatorio de Absentismo
Siempre con autoría; si no se puede atribuir, no es una cita.
Variantes, estados y código
Una frase destacada con su autoría.
Variantes
Un sistema de diseño compartido
Observatorio de Absentismo
Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.
Código
<blockquote class="bb-c-quote bb-c-quote--filete">
<p class="bb-c-quote__text">Un sistema de diseño compartido</p>
<cite class="bb-c-quote__author">Observatorio de Absentismo</cite>
</blockquote>Estadística
24
elementos publicados en su sistema de diseño
Una cifra real y con fuente; si no hay dato, no hay estadística.
Variantes, estados y código
Una cifra con lo que significa.
Variantes
24
elementos publicados en su sistema de diseño
Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.
Código
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">24</p>
<p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
</div>Preguntas frecuentes
¿Qué es Observatorio de Absentismo?
Un sistema de diseño compartido
¿Qué la mueve?
Un sistema de diseño compartido
Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
Variantes, estados y código
Preguntas que se abren y se cierran sin scripts.
Regla de uso Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
Código
<div class="bb-c-faq">
<details class="bb-c-faq__item" open="open">
<summary class="bb-c-faq__q">¿Qué es Observatorio de Absentismo?</summary>
<p class="bb-c-faq__a">Un sistema de diseño compartido</p>
</details>
<details class="bb-c-faq__item">
<summary class="bb-c-faq__q">¿Qué la mueve?</summary>
<p class="bb-c-faq__a">Un sistema de diseño compartido</p>
</details>
</div>Pie
Sin promociones: identidad, enlaces legales y contacto.
Variantes, estados y código
El cierre de todas las páginas: marca y enlaces.
Variantes
Regla de uso Sin promociones: identidad, enlaces legales y contacto.
Código
<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
<strong class="bb-c-footer__brand">Observatorio de Absentismo</strong>
<ul class="bb-c-footer__links">
<li><a href="#">Aviso legal</a></li>
<li><a href="#">Privacidad</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</footer>Campos de formulario
Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
Variantes, estados y código
Campos de texto, correo y selección con su etiqueta, su ayuda y su error.
Estados
Regla de uso Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
Código
<form class="bb-c-form bb-c-form--base">
<label class="bb-c-field">
<span class="bb-c-field__label">Nombre</span>
<input class="bb-c-field__input" type="text" value="Observatorio de Absentismo"/>
</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>Observatorio de Absentismo</option>
</select>
</label>
</form>Selección
Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.
Variantes, estados y código
Elegir una opción entre tarjetas, o varias con casillas.
Variantes
Estados
Regla de uso Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.
Código
<fieldset class="bb-c-choice bb-c-choice--tarjetas">
<legend class="bb-c-field__label">Tema</legend>
<label class="bb-c-option">
<input type="radio" name="bb-c-choice-normal" checked="True"/>
<span class="bb-c-option__title">Observatorio de Absentismo</span>
<span class="bb-c-option__text">Observatorio de Absentismo</span>
</label>
</fieldset>Avisos
Un sistema de diseño compartido
Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
Variantes, estados y código
Un mensaje breve sobre lo que acaba de pasar.
Variantes
Recibido: te responde el equipo de Observatorio de Absentismo.
No se ha podido enviar. Inténtalo de nuevo en unos minutos.
Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
Código
<div class="bb-c-alert bb-c-alert--info" role="status">
<span class="bb-c-alert__mark" aria-hidden="true"></span>
<p class="bb-c-alert__text">Un sistema de diseño compartido</p>
</div>Insignias
Observatorio Versión 3 Vigente
Una o dos palabras; nunca como botón.
Variantes, estados y código
Etiquetas cortas de estado, tipo o categoría.
Variantes
Observatorio Versión 3 Vigente
Regla de uso Una o dos palabras; nunca como botón.
Código
<p class="bb-c-badges bb-c-badges--base">
<span class="bb-c-badge bb-c-badge--acento">Observatorio</span>
<span class="bb-c-badge">Versión 3</span>
<span class="bb-c-badge bb-c-badge--borde">Vigente</span>
</p>Tabla
| Estilo | Tamaño | Uso |
|---|---|---|
| Observatorio de Absentismo | — | Observatorio |
Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Variantes, estados y código
Datos en filas y columnas, con cabecera.
Variantes
| Estilo | Tamaño | Uso |
|---|---|---|
| Observatorio de Absentismo | — | Observatorio |
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Código
<table class="bb-c-table bb-c-table--superficie">
<thead><tr><th scope="col">Estilo</th><th scope="col">Tamaño</th><th scope="col">Uso</th></tr></thead>
<tbody>
<tr><td>Observatorio de Absentismo</td><td>—</td><td>Observatorio</td></tr>
</tbody>
</table>Progreso
Propio de la marca en este libro58 %
Siempre con la cifra en texto junto a la barra.
Variantes, estados y código
Cuánto lleva algo hecho, como barra y como cifra.
Variantes
Propio de la marca en este libro58 %
Regla de uso Siempre con la cifra en texto junto a la barra.
Código
<div class="bb-c-progress bb-c-progress--acento">
<p class="bb-c-progress__head"><span>Propio de la marca en este libro</span><strong>58 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="58" aria-label="Propio de la marca en este libro">
<span class="bb-c-progress__bar" style="width: 58%"></span>
</div>
</div>Firma
La firma de correo de la marca
La firma de correo es el cierre de cada mensaje de la marca: el logotipo, el nombre y el cargo de la persona, sus datos de contacto y, si la marca lo publica, un banner y un aviso legal. Se genera desde la versión publicada de la marca, así que cambia cuando cambia la marca.
Nombre Apellido
Cargo
Teléfono · correo electrónico
Las personas del equipo generan su firma desde sus Preferencias de Odoo, con una sesión de empleado.
Presentaciones
La piel de esta marca y la estructura común
Plantillas de la marca
PowerPoint 16:9
Portada, separador, contenido, dos columnas, imagen y texto, cifra o cita y cierre con contacto, cada una con sus marcadores.
Piel
Colores
-
Papel
#F4F4F4 -
Tinta
#0E0E0E -
Titular
#0E0E0E -
Acento
#95C11F -
Señal
#0E0E0E -
Superficie
#CFF270 -
Escenario
#0E0E0E -
Tinta del escenario
#F4F4F4
Contraste mínimo de texto: 9.12:1
Composición
- Titulares
- Source Sans 3
- Texto
- Source Sans 3
- Margen
- 1.25 in
- Separación
- 0.35 in
- Radio de tarjeta
- 0 in
- Escala: portada, título, rótulo
- 40 · 32 · 24 pt
Descargar una muestra del deck. Contenido ficticio, sin ningún dato de cliente.
Estructura
SB CoverPortada: título, cliente, referencia, fecha y logotipo del clienteSB AgendaÍndice, con más de dos seccionesSB SectionSeparador, con 4 láminas o más en una secciónSB ContentLas secciones incluidas, en su ordenSB ClosingCierre: agradecimiento y contacto del responsable
Disposiciones de la plantilla
- Portada
- SB Cover
- Índice
- SB Agenda
- Separador
- SB Section
- Texto
- SB Content
- Dos columnas
- SB Two Columns
- Tres columnas
- SB Three Columns
- Indicadores
- SB KPI Tiles
- Tabla
- SB Table
- Gantt
- SB Gantt
- Equipo
- SB Team
- Cierre
- SB Closing
- En blanco
- SB Blank
Secciones con láminas propias
- Objetivos, requisitos y alcance
- Planificación e hitos
- Modelo de gobierno
- Equipo
- Casos de éxito
- Honorarios
- Condiciones de pago
- Términos y condiciones
Propuestas
Piezas que se imprimen
Piezas
Portada
A sangre, con el arte de la casa.
Cuerpo
Las secciones incluidas, numeradas, con cabecera y pie del sistema de documentos.
Aceptación
A sangre, con las casillas donde firma el cliente.
Contraportada
A sangre, con el arte y el pie legal.
Secciones que puede llevar el cuerpo
- Antecedentes
- Estado del arte
- Objetivos, requisitos y alcance
- Planificación e hitos
- Metodología
- Modelo de gobierno
- Equipo
- Equipo del cliente
- Casos de éxito
- Honorarios
- Condiciones de pago
- Términos y condiciones
- Libre
Plantillas
Dónde están las plantillas de la marca
Las plantillas de la marca viven en las secciones de Aplicaciones: cada una enseña la pieza real.
Personas
Quién hace la marca
Equipo pendiente de consentimiento
Las personas del equipo aparecerán aquí cuando den su consentimiento para hacerlo público.
Descargas
Tokens generados y ficheros
Ficheros
-
Horizontal · Color
Otros SVGPNG 1024 px
-
Horizontal · Claro
Otros SVGPNG 1024 px
-
Apilado · Color
Otros SVGPNG 1024 px
-
Apilado · Claro
Otros SVGPNG 1024 px
-
Icono · Color
Otros SVGPNG 1024 px
-
Icono · Claro
Otros SVGPNG 1024 px
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
10 / 10 líneas dentro del tope
Contexto
declaracion.proposito: El grupo es la forma de crear un impacto positivo en el mundo
declaracion.origen: Digital Branding (Londres, 2015: origen del grupo, no es división)
valor.pilar.datos-para-decidir: Datos para decidir
valor.pilar.personas-en-el-centro: Personas en el centro
valor.pilar.tecnologia-como-medio: Tecnología como medio
valor.pilar.gestion-por-proyectos: Gestión por proyectos, con márgenes unitarios
valor.pilar.valores-vision-etica: Los valores, la visión y la ética profesional que nos guían
valor.impacto-positivo: Impacto Positivo · Bondad, Honestidad, Lealtad y Respeto · Actuamos conforme a nuestros valores y nuestro Código Ético, tratamos de forma respetuosa y agradable a todas las partes, tenemos conciencia social y ambiental y una clara determinación de aportar valor construyendo relaciones que cuidamos en el largo plazo.
valor.aporte-de-valor: Aporte de Valor · Vocación de Excelencia y Orientación a Resultados · Ofrecemos soluciones de alta calidad y trabajamos para que cada euro invertido por nuestros clientes se transforme en valor para su firma. Nos responsabilizamos del ciclo de vida completo de los proyectos operando conforme a los principios de eficiencia y eficacia, comenzando con el final en mente y buscando sinergias y estrategias win-win.
valor.adaptabilidad: Adaptabilidad · Flexibilidad, Empatía y Transparencia · Nuestro sector, así como las necesidades de nuestros clientes están en constante cambio. Somos conscientes, considerados y comprensivos con estas necesidades. Tenemos voluntad de ayudar y lo hacemos siendo flexibles en cuanto a cambios en los requisitos iniciales, plazos y costes.Cómo pedirlo
env["sb.brand"].sb_context("observatorio-de-absentismo", purpose="redactar")Directrices para agentes de imágenes
8 / 8 líneas dentro del tope
Contexto
color.secundario: #26343b
color.primario: #95c11f
color.primario-profundo: #577600
color.primario-claro: #cff270
color.primario-oscuro: #769c0e
color.oscuro: #0e0e0e
color.claro: #f4f4f4
fuente.primaria: Source Sans 3Cómo pedirlo
env["sb.brand"].sb_context("observatorio-de-absentismo", purpose="imagen")Versiones
Historial publicado
- v3 2026-11-05 Aprobación Vigente 8 claves cambiadas
- v2 2026-11-05 Aprobación 6 claves cambiadas
- v1 2026-11-05 Aprobación