Ir al contenido
Marcas
Todas las marcas

Sistema de diseño

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

  • Versión4
  • AlcanceGrupo
  • Fecha2026-11-11
  • OrigenOdoo, versión publicada
01

Identidad

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

Propósito

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

Valores

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

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

Leitmotiv

  • El hogar: el fuego en torno al que se reúne el grupo. Da calor y luz a cada marca sin quitarle su forma, y es el centro al que todas vuelven. De ese mismo fuego, alzado en lo alto, nace el faro.
02

Logotipo

Variantes, área de respeto y usos

El hogar: el fuego en torno al que se reúne el grupo. Da calor y luz a cada marca sin quitarle su forma, y es el centro al que todas vuelven. De ese mismo fuego, alzado en lo alto, nace el faro.

Leitmotiv

Variantes

Diseño del logotipo María Cerezo (Vetia Studio)

03

Color

Rampas, roles y contrastes

Rampas

Acento

700 #816936 Equivalente del oro sobre papel #F4F4F4 (4,8:1) y sobre blanco (5,2:1).
Color de origen #C9A962 Acento sobre tinta #0E0E0E (8,6:1). Poca presencia: un punto, un filete o una palabra; no para texto sobre papel.

Paleta

Oscuro #0E0E0E RGB 14, 14, 14
Claro #F4F4F4 RGB 244, 244, 244
04

Tipografía

Familias, especímenes y escala

Familias

Tenor Sans

Primaria

The Beacon Holding

400

Source Sans 3

Secundaria

The Beacon Holding

300

05

Iconografía

Sistema de iconos

Set editorial

Icono de pilar: abrazo Icono de pilar: datos Icono de pilar: método Icono de pilar: paso Icono de pilar: personas Icono de pilar: tecnologia Icono de pilar: valores Icono Lucide: blocks Icono Lucide: briefcase business Icono Lucide: heart handshake Icono Lucide: mic Icono Lucide: sprout
Sobre acento
Sobre blanco
06

Componentes

Piezas web estándar del grupo

Botón

La acción de una vista.

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

Variantes

Primario
Secundario
Fantasma

Estados

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

Tarjeta

Un contenido con título, texto y enlace.

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

Variantes

Grupo

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Superficie

Grupo

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Borde

Grupo

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Acento

Estados

Grupo

Un sistema de diseño compartido

Un sistema de diseño compartido

Seguir leyendo
Encima
Código 
<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">Grupo</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

La apertura de una página: antetítulo, título y entradilla.

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

Variantes

Grupo

The Beacon Holding

Un sistema de diseño compartido

Superficie

Grupo

The Beacon Holding

Un sistema de diseño compartido

Acento
Código 
<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Grupo</p>
            <h1 class="bb-c-header__title">The Beacon Holding</h1>
            <p class="bb-c-header__lede">Un sistema de diseño compartido</p>
        </header>

Llamada a la acción

El cierre de una página, con una sola acción.

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

Variantes

Acento
Superficie
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

Una frase destacada con su autoría.

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

Variantes

Un sistema de diseño compartido

The Beacon Holding
Filete

Un sistema de diseño compartido

The Beacon Holding
Superficie
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">The Beacon Holding</cite>
        </blockquote>

Estadística

Una cifra con lo que significa.

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

Variantes

50

elementos publicados en su sistema de diseño

Superficie

50

elementos publicados en su sistema de diseño

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

Preguntas frecuentes

Preguntas que se abren y se cierran sin scripts.

Regla de uso Preguntas que la gente hace de verdad, con la respuesta en la primera línea.

¿Qué es The Beacon Holding?

Un sistema de diseño compartido

¿Qué la mueve?

Un sistema de diseño compartido

Código 
<div class="bb-c-faq">
            <details class="bb-c-faq__item" open="open">
                <summary class="bb-c-faq__q">¿Qué es The Beacon Holding?</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

El cierre de todas las páginas: marca y enlaces.

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

Variantes

Oscuro
Claro
Código 
<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
            <strong class="bb-c-footer__brand">The Beacon Holding</strong>
            <ul class="bb-c-footer__links">
                <li><a href="#">Aviso legal</a></li>
                <li><a href="#">Privacidad</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </footer>

Campos de formulario

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

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

Estados

Foco
Error
Deshabilitado
Código 
<form class="bb-c-form bb-c-form--base">
            <label class="bb-c-field">
                <span class="bb-c-field__label">Nombre</span>
                <input class="bb-c-field__input" type="text" value="The Beacon Holding"/>
            </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>Datos para decidir</option><option>Personas en el centro</option><option>Tecnología como medio</option><option>Gestión por proyectos, con márgenes unitarios</option>
                </select>
            </label>
        </form>

Selección

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

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

Variantes

Tema
Tarjetas de opción
Tema
Casillas

Estados

Tema
Foco
Tema
Deshabilitado
Código 
<fieldset class="bb-c-choice bb-c-choice--tarjetas">
            <legend class="bb-c-field__label">Tema</legend>
                <label class="bb-c-option">
                    <input type="radio" name="bb-c-choice-normal" checked="True"/>
                    <span class="bb-c-option__title">Datos para decidir</span>
                    <span class="bb-c-option__text">The Beacon Holding</span>
                </label><label class="bb-c-option">
                    <input type="radio" name="bb-c-choice-normal"/>
                    <span class="bb-c-option__title">Personas en el centro</span>
                    <span class="bb-c-option__text">The Beacon Holding</span>
                </label>
        </fieldset>

Avisos

Un mensaje breve sobre lo que acaba de pasar.

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

Variantes

Un sistema de diseño compartido

Información

Recibido: te responde el equipo de The Beacon Holding.

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

Insignias

Etiquetas cortas de estado, tipo o categoría.

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

Variantes

Grupo Versión 4 Vigente Datos para decidirPersonas en el centro

Base

Grupo Versión 4 Vigente Datos para decidirPersonas en el centro

Compacta
Código 
<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Grupo</span>
            <span class="bb-c-badge">Versión 4</span>
            <span class="bb-c-badge bb-c-badge--borde">Vigente</span>
            <span class="bb-c-badge bb-c-badge--borde">Datos para decidir</span><span class="bb-c-badge bb-c-badge--borde">Personas en el centro</span>
        </p>

Tabla

Datos en filas y columnas, con cabecera.

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

Variantes

EstiloTamañoUso
The Beacon Holding—Grupo
Superficie
EstiloTamañoUso
The Beacon Holding—Grupo
Rayada
Código 
<table class="bb-c-table bb-c-table--superficie">
            <thead><tr><th scope="col">Estilo</th><th scope="col">Tamaño</th><th scope="col">Uso</th></tr></thead>
            <tbody>
                <tr><td>The Beacon Holding</td><td>—</td><td>Grupo</td></tr>
            </tbody>
        </table>

Progreso

Cuánto lleva algo hecho, como barra y como cifra.

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

Variantes

Propio de la marca en este libro100 %

Acento

Propio de la marca en este libro100 %

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

Marcas

Las marcas que cuelgan de esta y las que la acompañan

Singular Community Singular Community División Singular Investments Singular Investments División Singular Media Singular Media División Singular Services Singular Services División Singular Solutions Singular Solutions División
08

Perfiles públicos

Carlos Pascual Adell

Socio fundador y director de Singular Beacon

Carlos Pascual Adell es Ingeniero de Minas especializado en Energía por la Universidad Politécnica de Madrid. Desempeña el cargo de Socio Fundador y Director de Singular Beacon SL.

Ver el perfil

Javier Pascual

Presidente honorífico de Singular Beacon

Ver el perfil
09

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.

10

Descargas

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

Ficheros

11

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.leitmotiv: El hogar: el fuego en torno al que se reúne el grupo. Da calor y luz a cada marca sin quitarle su forma, y es el centro al que todas vuelven. De ese mismo fuego, alzado en lo alto, nace el faro.
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("the-beacon-holding", purpose="redactar")

Directrices para agentes de imágenes

6 / 6 líneas dentro del tope

Contexto 
color.acento: #c9a962 · Oro · Acento sobre tinta #0E0E0E (8,6:1). Poca presencia: un punto, un filete o una palabra; no para texto sobre papel.
color.oscuro: #0e0e0e · Tinta
color.acento-700: #816936 · Oro profundo · Equivalente del oro sobre papel #F4F4F4 (4,8:1) y sobre blanco (5,2:1).
color.claro: #f4f4f4 · Papel
fuente.primaria: Tenor Sans
fuente.secundaria: Source Sans 3
Cómo pedirlo 
env["sb.brand"].sb_context("the-beacon-holding", purpose="imagen")
12

Versiones

Historial publicado
  1. v4 2026-11-11 Aprobación Vigente 1 clave cambiada
  2. v3 2026-11-11 Aprobación 1 clave cambiada
  3. v2 2026-11-10 Aprobación 2 claves cambiadas
  4. v1 2026-11-09 Aprobación