Ir al contenido
Marcas
Todas las marcas

Sistema de diseño

  • Versión5
  • AlcanceObservatorio
  • Fecha2026-11-06
  • Pertenece aObservatorio 360º
  • OrigenOdoo, versión publicada
01

Identidad

Propósito, misión, visión y valores

Lo que hereda Heredado de The Beacon Holding

Propósito

El grupo es la forma de crear un impacto positivo en el mundo

Heredado de The Beacon Holding

Valores

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

Según el Código Ético y de Conducta, todo empleado o colaborador del grupo actúa con honestidad, previene los ilícitos y genera confianza.

Honestidad: actuar de forma honesta y transparente, de acuerdo con la legislación vigente y con los estándares de la ética profesional. Prevención: prevenir la comisión de hechos delictivos o ilícitos en la actividad profesional, con los mecanismos de seguimiento y control necesarios. Confianza: trabajar de forma ética y honrada, y generar relaciones de confianza dentro del grupo y con terceros.

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)
02

Logotipo

Variantes, área de respeto y usos

Variantes

03

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

Tipografía

Familias, especímenes y escala

Familias

Source Sans 3

Secundaria

Observatorio de Rotación

300

Heredado de The Beacon Holding

Source Sans 3

Primaria

Observatorio de Rotación

400

05

Iconografía

Pendiente

Iconos

Todavía no está publicado para esta marca.

06

Componentes

Piezas web estándar del grupo

Botón

Un solo botón principal por vista; lo demás, secundario o fantasma.

Variantes, estados y código

La acción de una vista.

Variantes

Secundario
Fantasma

Estados

Normal
Encima
Activo
Deshabilitado

Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.

Código 
<button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>

Tarjeta

Observatorio

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo

Una idea por tarjeta, y todas las de una fila del mismo alto.

Variantes, estados y código

Un contenido con título, texto y enlace.

Variantes

Observatorio

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Borde

Observatorio

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Acento

Estados

Observatorio

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Normal

Observatorio

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Encima

Regla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.

Código 
<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">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 Rotación

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 Rotación

Un sistema de diseño compartido

Acento

Regla de uso Un solo título principal por página, que diga de qué va en una línea.

Código 
<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Observatorio</p>
            <h1 class="bb-c-header__title">Observatorio de Rotación</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

Superficie

Regla de uso Una por página, al final, con un verbo que diga qué pasa al pulsar.

Código 
<aside class="bb-c-cta bb-c-cta--acento">
            <h2 class="bb-c-cta__title">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 Rotación

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 Rotación
Superficie

Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.

Código 
<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">Un sistema de diseño compartido</p>
            <cite class="bb-c-quote__author">Observatorio de Rotación</cite>
        </blockquote>

Estadística

46

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

46

elementos publicados en su sistema de diseño

Acento

Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.

Código 
<div class="bb-c-stat bb-c-stat--superficie">
            <p class="bb-c-stat__value">46</p>
            <p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
        </div>

Preguntas frecuentes

¿Qué es Observatorio de Rotación?

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 Rotación?</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

Claro

Regla de uso Sin promociones: identidad, enlaces legales y contacto.

Código 
<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
            <strong class="bb-c-footer__brand">Observatorio de Rotación</strong>
            <ul class="bb-c-footer__links">
                <li><a href="#">Aviso legal</a></li>
                <li><a href="#">Privacidad</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </footer>

Campos de formulario

Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.

Variantes, estados y código

Campos de texto, correo y selección con su etiqueta, su ayuda y su error.

Estados

Normal
Foco
Error
Deshabilitado

Regla de uso Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.

Código 
<form class="bb-c-form bb-c-form--base">
            <label class="bb-c-field">
                <span class="bb-c-field__label">Nombre</span>
                <input class="bb-c-field__input" type="text" value="Observatorio de Rotación"/>
            </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 Rotación</option>
                </select>
            </label>
        </form>

Selección

Tema

Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.

Variantes, estados y código

Elegir una opción entre tarjetas, o varias con casillas.

Variantes

Tema
Casillas

Estados

Tema
Normal
Tema
Foco
Tema
Deshabilitado

Regla de uso Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.

Código 
<fieldset class="bb-c-choice bb-c-choice--tarjetas">
            <legend class="bb-c-field__label">Tema</legend>
                <label class="bb-c-option">
                    <input type="radio" name="bb-c-choice-normal" checked="True"/>
                    <span class="bb-c-option__title">Observatorio de Rotación</span>
                    <span class="bb-c-option__text">Observatorio de Rotación</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 Rotación.

Éxito
Error

Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.

Código 
<div class="bb-c-alert bb-c-alert--info" role="status">
            <span class="bb-c-alert__mark" aria-hidden="true"></span>
            <p class="bb-c-alert__text">Un sistema de diseño compartido</p>
        </div>

Insignias

Observatorio Versión 5 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 5 Vigente

Compacta

Regla de uso Una o dos palabras; nunca como botón.

Código 
<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Observatorio</span>
            <span class="bb-c-badge">Versión 5</span>
            <span class="bb-c-badge bb-c-badge--borde">Vigente</span>
        </p>

Tabla

EstiloTamañoUso
Observatorio de Rotación—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

EstiloTamañoUso
Observatorio de Rotación—Observatorio
Rayada

Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.

Código 
<table class="bb-c-table bb-c-table--superficie">
            <thead><tr><th scope="col">Estilo</th><th scope="col">Tamaño</th><th scope="col">Uso</th></tr></thead>
            <tbody>
                <tr><td>Observatorio de Rotación</td><td>—</td><td>Observatorio</td></tr>
            </tbody>
        </table>

Progreso

Propio de la marca en este libro37 %

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

Línea

Regla de uso Siempre con la cifra en texto junto a la barra.

Código 
<div class="bb-c-progress bb-c-progress--acento">
            <p class="bb-c-progress__head"><span>Propio de la marca en este libro</span><strong>37 %</strong></p>
            <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" aria-label="Propio de la marca en este libro">
                <span class="bb-c-progress__bar" style="width: 37%"></span>
            </div>
        </div>
07

Firma

La firma de correo de la marca

La firma de correo es el cierre de cada mensaje de la marca: el logotipo, el nombre y el cargo de la persona, sus datos de contacto y, si la marca lo publica, un banner y un aviso legal. Se genera desde la versión publicada de la marca, así que cambia cuando cambia la marca.

Nombre Apellido

Cargo

Teléfono · correo electrónico

Vista previa con datos ficticios

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

08

Plantilla base PDF

Capas, disposiciones, portada y contraportada

Cada capa contiene las anteriores: 1, vacía; 2, cabecera y pie con paginación; 3, antetítulo y título; 4, marcadores de contenido en siete disposiciones. Las propuestas imprimen esta portada y esta contraportada.

Documento A4 vertical

  1. Capa 1 · vacía
  2. Capa 2 · cabecera y pie
  3. Capa 3 · antetítulo y título
  4. Capa 4 · contenido · 4.1 un bloque
  5. Capa 4 · contenido · 4.2.1 1/3 – 2/3
  6. Capa 4 · contenido · 4.2.2 2/3 – 1/3
  7. Capa 4 · contenido · 4.2.3 1/2 – 1/2
  8. Capa 4 · contenido · 4.3.1 tres tercios
  9. Capa 4 · contenido · 4.3.2 1/2 + 1/4 + 1/4
  10. Capa 4 · contenido · 4.4 rejilla de 2 × 2

Slide 16:9 horizontal

  1. Capa 1 · vacía
  2. Capa 2 · cabecera y pie
  3. Capa 3 · antetítulo y título
  4. Capa 4 · contenido · 4.1 un bloque
  5. Capa 4 · contenido · 4.2.1 1/3 – 2/3
  6. Capa 4 · contenido · 4.2.2 2/3 – 1/3
  7. Capa 4 · contenido · 4.2.3 1/2 – 1/2
  8. Capa 4 · contenido · 4.3.1 tres tercios
  9. Capa 4 · contenido · 4.3.2 1/2 + 1/4 + 1/4
  10. Capa 4 · contenido · 4.4 rejilla de 2 × 2

Portada y contraportada

  1. Portada
  2. Contraportada

En el PDF, con el arte de la marca si lo tiene.

Piel

Colores

  • Papel #FFFFFF
  • Tinta #0E0E0E
  • Titular #0E0E0E
  • Acento #95C11F
  • Señal #0E0E0E
  • Superficie #F4F4F4
  • Escenario #0E0E0E
  • Tinta del escenario #FFFFFF

Contraste mínimo de texto: 9.12:1

Composición

Titulares
Source Sans 3
Texto
Source Sans 3
09

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
10

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.

11

Personas

Quién hace la marca

Pendiente

Equipo pendiente de consentimiento

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

12

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.

13

Descargas

Tokens generados y ficheros

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

Ficheros

14

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 · Honestidad: actuar de forma honesta y transparente, de acuerdo con la legislación vigente y con los estándares de la ética profesional. Prevención: prevenir la comisión de hechos delictivos o ilícitos en la actividad profesional, con los mecanismos de seguimiento y control necesarios. Confianza: trabajar de forma ética y honrada, y generar relaciones de confianza dentro del grupo y con terceros. · Según el Código Ético y de Conducta, todo empleado o colaborador del grupo actúa con honestidad, previene los ilícitos y genera confianza.
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-rotacion", purpose="redactar")

Directrices para agentes de imágenes

23 / 23 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
color.blanco: #ffffff · Blanco · Blanco; superficie de tarjeta clara y detalle de iconos.
color.cielo: #8fd3ff · Cielo · Cielo; azul claro para enlaces, foco y primario en tema oscuro.
color.ambar: #ff9a62 · Ámbar · Ámbar de la web; decoración, no texto.
color.noche: #021620 · Noche · Noche de la web; fondos muy oscuros de cabecera.
color.tinta: #05283a · Tinta · Tinta de la web; degradado bajo texto sobre foto y sombras.
color.icono.solape: #56abe2 · Solape de iconos · Solape por transparencia de los iconos de app (0,6 × #8FD3FF + 0,4 × #006EB7).
color.icono.fondo-oscuro: #262a36 · Fondo oscuro de comprobación de iconos · Fondo oscuro de la hoja de contacto de iconos.
color.duotono.sombra: #02161f · Duotono, sombra · Sombras del duotono de foto (tratamiento en revisión).
color.duotono.medio: #006088 · Duotono, medios tonos · Medios tonos del duotono de foto (tratamiento en revisión).
color.duotono.luz: #e2eef4 · Duotono, luces · Luces del duotono de foto (tratamiento en revisión).
color.exito.claro: #00672c · Éxito (tema claro)
color.aviso.claro: #6d5000 · Aviso (tema claro)
color.exito.oscuro: #7cd591 · Éxito (tema oscuro)
color.aviso.oscuro: #e1b75c · Aviso (tema oscuro)
fuente.secundaria: Source Sans 3
fuente.primaria: Source Sans 3
Cómo pedirlo 
env["sb.brand"].sb_context("observatorio-de-rotacion", purpose="imagen")
15

Versiones

Historial publicado

  1. v5 2026-11-06 Cascada de la marca madre Vigente 29 claves cambiadas
  2. v4 2026-11-05 Aprobación 3 claves cambiadas
  3. v3 2026-11-05 Aprobación 8 claves cambiadas
  4. v2 2026-11-05 Aprobación 6 claves cambiadas
  5. v1 2026-11-05 Aprobación