Ir al contenido

Sistema de diseño

Guiding Business

  • Versión4
  • AlcanceMarca
  • Fecha2026-11-12
  • Pertenece aSingular Services
  • OrigenOdoo, versión publicada
01

Identidad

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

Guiding Business

Eslogan

Misión

Singular Beacon, S.L. tiene como misión ayudar a sus clientes a desarrollar su máximo potencial digital gracias a un ecosistema de servicios y soluciones que simplifican la gestión, optimizan procesos y ayudan a tomar decisiones mejor informadas.

Leitmotiv

  • El faro que guía en el mundo de la digitalización: una luz fija y alta que orienta entre la niebla de la tecnología, para que cada cliente llegue a puerto con rumbo propio. Es el fuego del hogar puesto en la torre.

Historia

  • Más de diez años de experiencia: nacimos en Londres como Digital Branding Ltd en 2015 y en noviembre de 2021 nos constituimos en España como Singular Beacon, S.L.

Texto institucional

  • Nos apasiona unir la tecnología y las ideas para crear soluciones digitales que impulsen el crecimiento y la innovación.
  • Implantación de Odoo (ERP, CRM, proyectos, RR. HH., contabilidad) de principio a fin; data, analytics, BI e IA; digitalización de procesos; formación con Singular Academy; Kit Digital y Kit Consulting (Acelera Pyme).
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

02

Logotipo

Variantes, área de respeto y usos

El faro que guía en el mundo de la digitalización: una luz fija y alta que orienta entre la niebla de la tecnología, para que cada cliente llegue a puerto con rumbo propio. Es el fuego del hogar puesto en la torre.

Leitmotiv

Variantes

Diseño del logotipo Alba Espinosa (Estudio Nácar)

Usos prohibidos

Así noLos logotipos solo deben usarse en los colores proporcionados.
Así noEl faro y el lema «Guiding Business» no se redibujan, no se recolorean, no se generan.
  • No recrees el logotipo desde cero, utiliza estos.

Recursos de marca

Arte cerrado: se usa tal cual, no se recompone

03

Color

Rampas, roles y contrastes

Rampas

Primario

900 #001C35
800 #00355D
700 #005189
Color de origen #006EB7 Azul principal de la marca; botones primarios y enlaces sobre fondo claro.
500 #3B85C6
400 #609CD4
300 #82B3E2
200 #A3CAF0
100 #C5E2FE
50 #F0F8FF

Marino

900 #041D2A
Secundario #003E58 Marino; texto del logotipo, titulares destacados y fondo oscuro de panel.
700 #25536C
600 #416980
500 #5C8094
400 #7897A9
300 #94AFBE
200 #B1C7D4
100 #CFE0EA
50 #EEF9FF

Neutro

Oscuro #0E0E0E Negro de marca; texto principal sobre claro y fondo del tema oscuro.
800 #242423
Gris oscuro #3C3C3B Texto secundario sobre claro.
600 #595958
500 #777776
400 #979796
300 #B8B8B8
Gris claro #DADADA Texto secundario sobre oscuro y filetes.
100 #E7E7E7
Claro #F4F4F4 Blanco roto; fondo de página claro y texto sobre oscuro.

Error

700 #9A2503 Solo mensajes de error, tema claro.
300 #F49A84 Solo mensajes de error, tema oscuro.

Paleta

Acento #9A2503 RGB 154, 37, 3 Acento de uso marginal: punto del antetítulo y detalles; nunca fondo ni texto corrido.
Blanco #FFFFFF RGB 255, 255, 255 Blanco; superficie de tarjeta clara y detalle de iconos.
Claro #00672C RGB 0, 103, 44
Claro #6D5000 RGB 109, 80, 0
Oscuro #7CD591 RGB 124, 213, 145
Oscuro #E1B75C RGB 225, 183, 92

Roles

Claro

  • Fondo #F4F4F4
  • Superficie #FFFFFF
  • Superficie alta #F0F8FF
  • Tinta #0E0E0E
  • Tinta suave #3C3C3B
  • Tinta sobre primario #F4F4F4
  • Primario #006EB7
  • Primario hover #003E58
  • Acento #006EB7
  • Borde #777776
  • Foco #003E58
  • Éxito #00672C
  • Aviso #6D5000
  • Error #9A2503
  • Enlace #006EB7

Oscuro

  • Fondo #0E0E0E
  • Superficie #242423
  • Superficie alta #003E58
  • Tinta #F4F4F4
  • Tinta suave #DADADA
  • Tinta sobre primario #0E0E0E
  • Primario #82B3E2
  • Primario hover #609CD4
  • Acento #82B3E2
  • Borde #777776
  • Foco #C5E2FE
  • Éxito #7CD591
  • Aviso #E1B75C
  • Error #F49A84
  • Enlace #C5E2FE

Contrastes

Tema claro

Aa

Secundario / Claro

10.43:1 AAA

Aa

Primario / Claro

4.87:1 AA

Aa

Oscuro / Claro

17.55:1 AAA

Aa

Tinta / Superficie

19.30:1 AAA

Aa

Tinta / Superficie alta

17.99:1 AAA

Aa

Tinta suave / Fondo

10.04:1 AAA

Aa

Tinta suave / Superficie

11.04:1 AAA

Aa

Tinta suave / Superficie alta

10.29:1 AAA

Aa

Enlace / Superficie

5.36:1 AA

Aa

Enlace / Superficie alta

5.00:1 AA

Aa

Éxito / Fondo

6.41:1 AA

Aa

Éxito / Superficie

7.05:1 AAA

Aa

Éxito / Superficie alta

6.57:1 AA

Aa

Aviso / Fondo

6.82:1 AA

Aa

Aviso / Superficie

7.50:1 AAA

Aa

Aviso / Superficie alta

6.99:1 AA

Aa

Error / Fondo

7.23:1 AAA

Aa

Error / Superficie

7.95:1 AAA

Aa

Error / Superficie alta

7.41:1 AAA

Borde / Fondo

4.07:1 AA, solo texto grande

Borde / Superficie

4.48:1 AA, solo texto grande

Aa

Foco / Superficie

11.47:1 AAA

Aa

Foco / Superficie alta

10.69:1 AAA

Tema oscuro

Aa

Tinta / Fondo

17.55:1 AAA

Aa

Tinta / Superficie

14.12:1 AAA

Aa

Tinta / Superficie alta

10.43:1 AAA

Aa

Tinta suave / Fondo

13.80:1 AAA

Aa

Tinta suave / Superficie

11.11:1 AAA

Aa

Tinta suave / Superficie alta

8.20:1 AAA

Aa

Enlace / Fondo

14.41:1 AAA

Aa

Enlace / Superficie

11.60:1 AAA

Aa

Enlace / Superficie alta

8.57:1 AAA

Aa

Tinta sobre primario / Primario

8.72:1 AAA

Aa

Tinta sobre primario / Primario hover

6.62:1 AA

Aa

Éxito / Fondo

10.83:1 AAA

Aa

Éxito / Superficie

8.71:1 AAA

Aa

Éxito / Superficie alta

6.43:1 AA

Aa

Aviso / Fondo

10.23:1 AAA

Aa

Aviso / Superficie

8.23:1 AAA

Aa

Aviso / Superficie alta

6.08:1 AA

Aa

Error / Fondo

9.01:1 AAA

Aa

Error / Superficie

7.25:1 AAA

Aa

Error / Superficie alta

5.35:1 AA

Aa

Primario / Superficie

7.02:1 AAA

Borde / Fondo

4.30:1 AA, solo texto grande

Borde / Superficie

3.46:1 AA, solo texto grande

Aa

Claro / Primario

4.87:1 AA

Primario / Oscuro

3.59:1 AA, solo texto grande

No usar

Primario / Secundario

2.13:1

La marca lo prohíbe

Secundario / Oscuro

1.68:1

La marca lo prohíbe

Acento / Superficie alta

5.18:1

La marca lo prohíbe

Primario / Acento

1.48:1

Vibra: un rojo y un azul saturados juntos tiemblan en el borde y cansan la vista

  • No usar #006EB7 sobre #003E58: contraste 2.13:1, por debajo de AA.

  • No usar #003E58 sobre #0E0E0E: contraste 1.68:1, por debajo de AA.

  • No usar #006EB7 sobre #0E0E0E: contraste 3.59:1, por debajo de AA.

04

Tipografía

Familias, especímenes y escala

Familias

Open Sans

Primaria

Guiding Business

400700

Assistant

Secundaria

Singular Beacon

Estilos

Título display 61px · 700 · 1.11 Títulos

Guiding Business

Título 1 49px · 700 · 1.14 Título de página o de sección

Singular Beacon

Título 2 39px · 700 · 1.23 Subtítulo y título de tarjeta

Guiding Business

Título 3 31px · 700 · 1.29 Título menor dentro de un bloque

Singular Beacon

Título 4 25px · 700 · 1.28 Títulos

Guiding Business

Título 5 20px · 700 · 1.4 Títulos

Singular Beacon

Cuerpo 16px · 400 · 1.5 Texto corrido de la interfaz

Guiding Business

Cuerpo fuerte 16px · 700 · 1.5 Texto corrido de la interfaz

Singular Beacon

Cuerpo pequeño 14px · 400 · 1.43 Texto corrido de la interfaz

Guiding Business

Etiqueta 12px · 400 · 1.33 Antetítulos, etiquetas y metadatos

Singular Beacon

Impreso tarjeta nombre 9.1pt

Guiding Business

Impreso tarjeta contacto 6.5pt

Singular Beacon

05

Espaciado y forma

Escala, radios y elevación

Radios

00px
22px
44px
Circulo50%

Elevación

1 0 1px 2px rgba(5,40,58,0.08)
2 0 4px 12px rgba(5,40,58,0.12)
3 0 12px 32px rgba(5,40,58,0.18)

Sobre superficie clara, para que la sombra se vea en cualquier tema.

06

Iconografía

Sistema de iconos

Ficheros

  • Firma: icono de Facebook
  • Firma: icono de GitHub
  • Firma: icono de Instagram
  • Firma: icono de LinkedIn
  • Firma: icono de X
  • Firma: icono de YouTube
07

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

Superficie
Borde
Acento

Estados

Encima
Código
<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">Marca</p>
                <h3 class="bb-c-card__title">Guiding Business</h3>
                <p class="bb-c-card__text">Guiding Business</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

Marca

Singular Beacon

Guiding Business

Superficie

Marca

Singular Beacon

Guiding Business

Acento
Código
<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Marca</p>
            <h1 class="bb-c-header__title">Singular Beacon</h1>
            <p class="bb-c-header__lede">Guiding Business</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">Guiding Business</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

Guiding Business

Singular Beacon
Filete

Guiding Business

Singular Beacon
Superficie
Código
<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">Guiding Business</p>
            <cite class="bb-c-quote__author">Singular Beacon</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

191

elementos publicados en su sistema de diseño

Superficie

191

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">191</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 Singular Beacon?

Guiding Business

¿Qué la mueve?

Guiding Business

Código
<div class="bb-c-faq">
            <details class="bb-c-faq__item" open="open">
                <summary class="bb-c-faq__q">¿Qué es Singular Beacon?</summary>
                <p class="bb-c-faq__a">Guiding Business</p>
            </details>
            <details class="bb-c-faq__item">
                <summary class="bb-c-faq__q">¿Qué la mueve?</summary>
                <p class="bb-c-faq__a">Guiding Business</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">Singular Beacon</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="Singular Beacon"/>
            </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>Singular Beacon</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">Singular Beacon</span>
                    <span class="bb-c-option__text">Singular Beacon</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

Guiding Business

Información

Recibido: te responde el equipo de Singular Beacon.

É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">Guiding Business</p>
        </div>

Insignias

Etiquetas cortas de estado, tipo o categoría.

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

Variantes

Marca Versión 4 Vigente

Base

Marca Versión 4 Vigente

Compacta
Código
<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Marca</span>
            <span class="bb-c-badge">Versión 4</span>
            <span class="bb-c-badge bb-c-badge--borde">Vigente</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
Título display61 pxTítulos
Título 149 pxTítulo de página o de sección
Título 239 pxSubtítulo y título de tarjeta
Título 331 pxTítulo menor dentro de un bloque
Título 425 pxTítulos
Superficie
EstiloTamañoUso
Título display61 pxTítulos
Título 149 pxTítulo de página o de sección
Título 239 pxSubtítulo y título de tarjeta
Título 331 pxTítulo menor dentro de un bloque
Título 425 pxTítulos
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>Título display</td><td><code>61 px</code></td><td>Títulos</td>
                </tr><tr>
                    <td>Título 1</td><td><code>49 px</code></td><td>Título de página o de sección</td>
                </tr><tr>
                    <td>Título 2</td><td><code>39 px</code></td><td>Subtítulo y título de tarjeta</td>
                </tr><tr>
                    <td>Título 3</td><td><code>31 px</code></td><td>Título menor dentro de un bloque</td>
                </tr><tr>
                    <td>Título 4</td><td><code>25 px</code></td><td>Títulos</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 libro92 %

Acento

Propio de la marca en este libro92 %

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>92 %</strong></p>
            <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" aria-label="Propio de la marca en este libro">
                <span class="bb-c-progress__bar" style="width: 92%"></span>
            </div>
        </div>
08

Animaciones

Faro de constelación · Singular Beacon

Faro de constelación · Singular Beacon

Pentágono de prácticas · Singular Beacon

Pentágono de prácticas · Singular Beacon

Red que se teje · Singular Beacon

Red que se teje · Singular Beacon

Anillos de Fresnel · Singular Beacon

Anillos de Fresnel · Singular Beacon

Datos que suben · Singular Beacon

Datos que suben · Singular Beacon

Rumbo · Singular Beacon

Rumbo · Singular Beacon

Separador con haz · Singular Beacon

Separador con haz · Singular Beacon
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

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

15 / 15 líneas dentro del tope

Contexto
declaracion.mision: Singular Beacon, S.L. tiene como misión ayudar a sus clientes a desarrollar su máximo potencial digital gracias a un ecosistema de servicios y soluciones que simplifican la gestión, optimizan procesos y ayudan a tomar decisiones mejor informadas.
declaracion.sobre-nosotros: Nos apasiona unir la tecnología y las ideas para crear soluciones digitales que impulsen el crecimiento y la innovación.
declaracion.slogan: Guiding Business
declaracion.servicios: Implantación de Odoo (ERP, CRM, proyectos, RR. HH., contabilidad) de principio a fin; data, analytics, BI e IA; digitalización de procesos; formación con Singular Academy; Kit Digital y Kit Consulting (Acelera Pyme).
declaracion.proposito: El grupo es la forma de crear un impacto positivo en el mundo
declaracion.leitmotiv: El faro que guía en el mundo de la digitalización: una luz fija y alta que orienta entre la niebla de la tecnología, para que cada cliente llegue a puerto con rumbo propio. Es el fuego del hogar puesto en la torre.
declaracion.historia: Más de diez años de experiencia: nacimos en Londres como Digital Branding Ltd en 2015 y en noviembre de 2021 nos constituimos en España como Singular Beacon, S.L.
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("singular-beacon", purpose="redactar")

Directrices para agentes de imágenes

41 / 46 líneas dentro del tope

Contexto
NUNCA accessibility color.prohibido.1: No usar #006EB7 sobre #003E58: contraste 2.13:1, por debajo de AA.
NUNCA accessibility color.prohibido.2: No usar #003E58 sobre #0E0E0E: contraste 1.68:1, por debajo de AA.
NUNCA accessibility color.prohibido.3: No usar #006EB7 sobre #0E0E0E: contraste 3.59:1, por debajo de AA.
NUNCA logo logo.no-recrear: No recrees el logotipo desde cero, utiliza estos.
NUNCA logo logo.solo-colores-dados: Los logotipos solo deben usarse en los colores proporcionados.
NUNCA logo logo.no-redibujar: El faro y el lema «Guiding Business» no se redibujan, no se recolorean, no se generan.
color.primario: #006eb7 · Azul principal · Azul principal de la marca; botones primarios y enlaces sobre fondo claro.
color.secundario: #003e58 · Marino · Marino; texto del logotipo, titulares destacados y fondo oscuro de panel.
color.oscuro: #0e0e0e · Tinta · Negro de marca; texto principal sobre claro y fondo del tema oscuro.
color.claro: #f4f4f4 · Papel · Blanco roto; fondo de página claro y texto sobre oscuro.
color.acento: #9a2503 · Rojo · Acento de uso marginal: punto del antetítulo y detalles; nunca fondo ni texto corrido.
color.gris-oscuro: #3c3c3b · Gris oscuro · Texto secundario sobre claro.
color.gris-claro: #dadada · Gris claro · Texto secundario sobre oscuro y filetes.
color.blanco: #ffffff · Blanco · Blanco; superficie de tarjeta clara y detalle de iconos.
color.primario.50: #f0f8ff · Azul principal 50 · Rampa derivada del azul principal (propuesta): paso 50.
color.primario.100: #c5e2fe · Azul principal 100 · Rampa derivada del azul principal (propuesta): paso 100.
color.primario.200: #a3caf0 · Azul principal 200 · Rampa derivada del azul principal (propuesta): paso 200.
color.primario.300: #82b3e2 · Azul principal 300 · Rampa derivada del azul principal (propuesta): paso 300.
color.primario.400: #609cd4 · Azul principal 400 · Rampa derivada del azul principal (propuesta): paso 400.
color.primario.500: #3b85c6 · Azul principal 500 · Rampa derivada del azul principal (propuesta): paso 500.
color.primario.700: #005189 · Azul principal 700 · Rampa derivada del azul principal (propuesta): paso 700.
color.primario.800: #00355d · Azul principal 800 · Rampa derivada del azul principal (propuesta): paso 800.
color.primario.900: #001c35 · Azul principal 900 · Rampa derivada del azul principal (propuesta): paso 900.
color.marino.50: #eef9ff · Marino 50 · Rampa derivada del marino (propuesta): paso 50.
color.marino.100: #cfe0ea · Marino 100 · Rampa derivada del marino (propuesta): paso 100.
color.marino.200: #b1c7d4 · Marino 200 · Rampa derivada del marino (propuesta): paso 200.
color.marino.300: #94afbe · Marino 300 · Rampa derivada del marino (propuesta): paso 300.
color.marino.400: #7897a9 · Marino 400 · Rampa derivada del marino (propuesta): paso 400.
color.marino.500: #5c8094 · Marino 500 · Rampa derivada del marino (propuesta): paso 500.
color.marino.600: #416980 · Marino 600 · Rampa derivada del marino (propuesta): paso 600.
color.marino.700: #25536c · Marino 700 · Rampa derivada del marino (propuesta): paso 700.
color.marino.900: #041d2a · Marino 900 · Rampa derivada del marino (propuesta): paso 900.
color.acento.300: #f49a84 · Error (tema oscuro) · Solo mensajes de error, tema oscuro.
color.acento.700: #9a2503 · Error · Solo mensajes de error, tema claro.
color.neutro.100: #e7e7e7 · Neutro 100 · Rampa neutra entre blanco roto y negro (propuesta): paso 100.
color.neutro.300: #b8b8b8 · Neutro 300 · Rampa neutra entre blanco roto y negro (propuesta): paso 300.
color.neutro.400: #979796 · Neutro 400 · Rampa neutra entre blanco roto y negro (propuesta): paso 400.
color.neutro.500: #777776 · Neutro 500 · Rampa neutra entre blanco roto y negro (propuesta): paso 500.
color.neutro.600: #595958 · Neutro 600 · Rampa neutra entre blanco roto y negro (propuesta): paso 600.
color.exito.claro: #00672c · Éxito (tema claro)
fuente.primaria: Open Sans
… 5 líneas recortadas por el tope, 0 obligatorias: pide un max_chars mayor.
Cómo pedirlo
env["sb.brand"].sb_context("singular-beacon", purpose="imagen")
12

Versiones

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