Ir al contenido
TecWarden
  • Noticias
  • Secciones
  • Nosotros
  • Grupo
  • 0
  • Síganos
  • Español English
  • Contacto
TecWarden
  • 0
    • Noticias
    • Secciones
    • Nosotros
    • Grupo
  • Síganos
  • Español English
  • Contacto
Singular Beacon
Marcas
Todas las marcas
  • The Beacon Holding
  • Singular Community
  • Nuestras Causas
  • Singular Club
  • The Singular Hub
  • Singular Investments
  • Singular Ventures
  • ATLAS
  • EngArch
  • Finite
  • HybridMeM
  • autoWorks
  • loombiotech
  • the0racle
  • Singular Media
  • Singular Editorial
  • Para Toda una Vida
  • TecWarden
  • Singular Pictures
  • Singular Works
  • Outstarting
  • Polemizando
  • Profesionales Excepcionales
  • Singular Services
  • Digital Branding
  • Singular Beacon
  • Singular Events
  • Singular Jobs
  • The Singular Academy
  • Singular Solutions
  • Observatorio 360º
  • Observatorio de Absentismo
  • Observatorio de Bienestar
  • Observatorio de Compensación
  • Observatorio de Rotación
  • Observatorio de Talento
  • SingularARX
Entrar para ver más

    Marca

    • 01 Identidad
      • Valores

    Fundamentos

    • 02 Logotipo
      • Variantes
      • Usos prohibidos
      • Recursos de marca
    • 03 Color
      • Rampas
      • Paleta
      • Roles
      • Contrastes
    • 04 Tipografía
      • Familias
      • Estilos
    • 05 Espaciado y forma
      • Radios
      • Elevación
    • 06 Iconografía
      • Ficheros

    Componentes

    • 07 Componentes

    Recursos

    • 08 Animaciones
    • 09 Generador de imágenes
    • 10 Descargas
    • 11 Para agentes
      • Estilo de comunicación
      • Directrices para agentes de imágenes
    • 12 Versiones
    Singular Beacon

    Sistema de diseño

    Guiding Business

    • Versión15
    • AlcanceMarca
    • Fecha2026-11-09
    • Pertenece aSingular Services
    • OrigenOdoo, versión publicada
    01 Identidad Propósito, misión, visión y valores 02 Logotipo Variantes, área de respeto y usos 03 Color Rampas, roles y contrastes 04 Tipografía Familias, especímenes y escala 05 Espaciado y forma Escala, radios y elevación 06 Iconografía Sistema de iconos 07 Componentes Piezas web estándar del grupo 08 Animaciones 09 Generador de imágenes 10 Descargas Tokens generados y ficheros 11 Para agentes El contexto que recibe un agente 12 Versiones Historial publicado
    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

    • [Singular Beacon, S.L. tiene] por objeto la prestación de servicios de asesoría, consultoría, comercialización, integración, desarrollo, implementación, mantenimiento y soporte de soluciones digitales.
    • 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 The Singular Academy; Kit Digital y Kit Consulting (Acelera Pyme).
    • Martínez Villergas 49 V-1º, 28027 Madrid. España. [email protected]
    • www.singularbeacon.com; la sociedad, Singular Beacon, S.L., en singularbeacon.sl.
    • Esto incluye pero no se limita a: - Inteligencia de Negocio y Analítica Avanzada: Consultoría de Gestión Empresarial, Procesos de Extracción y Transformación de datos (ETL), Desarrollo de Informes, Cuadros de Mando, Modelos Analíticos y Algoritmos mediante técnicas de Big Data, Machine Learning e Inteligencia Artificial. - Soluciones Digital y Cloud: Soluciones Corporativas y Ofimática, Sistemas de Gestión Corporativo y Comercial (ERP y CRM), Software Especializado, Dominios, Infraestructura Digital y Computación en la Nube (Cloud) tanto de desarrollo propio como de terceros. - Ciberseguridad y Cumplimiento Normativo (compliance): Evaluación de Riesgos, Análisis de Vulnerabilidades (PenTesting), Certificaciones de Seguridad Informática, Análisis Forense Digital (Forensics) y Protección de Datos. - Marketing y Comunicación: Estrategia Digital, Publicidad Digital (SEM), Optimización en Buscadores (SEO), Gestión de Redes Sociales (Community Management) y Desarrollo de Contenido (Copywriting) - Diseño Gráfico, Experiencia de Usuario (UX) e Interfaces (UI): Desarrollo de identidad corporativa y activos digitales tales como logotipos, videos, iconos, imágenes plantillas e interfaces web o de aplicaciones.
    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

    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

    Color

    Color

    Horizontal · Color

    Otros SVGPDFPNG 745 px

    Claro

    Claro

    Horizontal · Claro

    Otros SVGPDFPNG 745 px

    Color

    Color

    Apilado · Color

    Otros SVGPDFPNG 199 px

    Claro

    Claro

    Apilado · Claro

    Otros SVGPDFPNG 199 px

    Color

    Color

    Icono · Color

    Otros SVGPDFPNG 155 px

    Claro

    Claro

    Icono · Claro

    Otros SVGPDFPNG 155 px

    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

    Banner formación

    Banner formación

    SVGJPG

    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 Gris oscuro (propuesta, de KB 14); texto secundario sobre claro.
    600 #595958
    500 #777776
    400 #979796
    300 #B8B8B8
    Gris claro #DADADA Gris claro (propuesta, de KB 14); texto secundario sobre oscuro y filetes.
    100 #E7E7E7
    Claro #F4F4F4 Blanco roto; fondo de página claro y texto sobre oscuro.

    Acento

    900 #370600
    800 #671400
    700 #9A2503
    Color de origen #CD3E19 Naranja de acento (propuesta, de KB 14); rellenos y acentos, no texto sobre claro (4,44 : 1).
    500 #DB6042
    400 #E87D64
    300 #F49A84
    200 #FFB6A4
    100 #FFD6CB
    50 #FFF4F1

    Paleta

    Blanco #FFFFFF RGB 255, 255, 255 Blanco; superficie de tarjeta clara y detalle de iconos.
    Cielo #8FD3FF RGB 143, 211, 255 Cielo; azul claro para enlaces, foco y primario en tema oscuro.
    Ámbar #FF9A62 RGB 255, 154, 98 Ámbar de la web; decoración, no texto.
    Noche #021620 RGB 2, 22, 32 Noche de la web; fondos muy oscuros de cabecera.
    Tinta #05283A RGB 5, 40, 58 Tinta de la web; degradado bajo texto sobre foto y sombras.
    Solape #56ABE2 RGB 86, 171, 226 Solape por transparencia de los iconos de app (0,6 × #8FD3FF + 0,4 × #006EB7).
    Fondo oscuro #262A36 RGB 38, 42, 54 Fondo oscuro de la hoja de contacto de iconos.
    Sombra #02161F RGB 2, 22, 31 Sombras del duotono de foto (tratamiento en revisión).
    Medio #006088 RGB 0, 96, 136 Medios tonos del duotono de foto (tratamiento en revisión).
    Luz #E2EEF4 RGB 226, 238, 244 Luces del duotono de foto (tratamiento en revisión).
    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 #CD3E19
    • 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 #8FD3FF
    • Primario hover #609CD4
    • Acento #CD3E19
    • Borde #777776
    • Foco #8FD3FF
    • Éxito #7CD591
    • Aviso #E1B75C
    • Error #F49A84
    • Enlace #8FD3FF

    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

    Acento / Fondo

    4.44:1 AA, solo texto grande

    Aa

    Acento / Superficie

    4.88:1 AA

    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

    11.88:1 AAA

    Aa

    Enlace / Superficie

    9.56:1 AAA

    Aa

    Enlace / Superficie alta

    7.06: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

    Acento / Fondo

    3.95:1 AA, solo texto grande

    Acento / Superficie

    3.18:1 AA, solo texto grande

    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

    Aa

    Blanco / Acento

    4.88:1 AA

    Claro / Acento

    4.44: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

    2.34:1

    La marca lo prohíbe

    Acento / Primario

    1.09: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

    Arial

    Terciaria

    Guiding Business

    400700

    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

      PNG

    • Firma: icono de GitHub

      PNG

    • Firma: icono de Instagram

      PNG

    • Firma: icono de LinkedIn

      PNG

    • Firma: icono de X

      PNG

    • Firma: icono de YouTube

      PNG

    07

    Componentes

    Piezas web estándar del grupo

    BotónTarjetaCabecera de páginaLlamada a la acciónCitaEstadísticaPreguntas frecuentesPieCampos de formularioSelecciónAvisosInsigniasTablaProgreso

    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

    Marca

    Guiding Business

    Guiding Business

    Seguir leyendo
    Superficie

    Marca

    Guiding Business

    Guiding Business

    Seguir leyendo
    Borde

    Marca

    Guiding Business

    Guiding Business

    Seguir leyendo
    Acento

    Estados

    Marca

    Guiding Business

    Guiding Business

    Seguir leyendo
    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

    Guiding Business

    Contactar
    Acento

    Guiding Business

    Contactar
    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

    209

    elementos publicados en su sistema de diseño

    Superficie

    209

    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">209</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

    Singular Beacon
    • Aviso legal
    • Privacidad
    • Contacto
    Oscuro
    Singular Beacon
    • Aviso legal
    • Privacidad
    • Contacto
    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

    No se ha podido enviar. Inténtalo de nuevo en unos minutos.

    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 15 Vigente

    Base

    Marca Versión 15 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 15</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 libro93 %

    Acento

    Propio de la marca en este libro93 %

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

    tokens.css Variables CSS de la marca tokens.json Tokens legibles por máquina
    • Banner formación

      SVGJPG

    Ficheros

    • Horizontal · Color

      Otros SVGPDFPNG 745 pxPNG 1488 px

    • Horizontal · Claro

      Otros SVGPDFPNG 745 pxPNG 1489 px

    • Apilado · Color

      Otros SVGPDFPNG 199 pxPNG 397 px

    • Apilado · Claro

      Otros SVGPDFPNG 199 pxPNG 398 px

    • Icono · Color

      Otros SVGPDFPNG 155 pxPNG 310 px

    • Icono · Claro

      Otros SVGPDFPNG 155 pxPNG 309 px

    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

    17 / 20 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.objeto-social: [Singular Beacon, S.L. tiene] por objeto la prestación de servicios de asesoría, consultoría, comercialización, integración, desarrollo, implementación, mantenimiento y soporte de soluciones digitales.
    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 The Singular Academy; Kit Digital y Kit Consulting (Acelera Pyme).
    declaracion.contacto-postal: Martínez Villergas 49 V-1º, 28027 Madrid. España. [email protected]
    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.webs: www.singularbeacon.com; la sociedad, Singular Beacon, S.L., en singularbeacon.sl.
    declaracion.origen: Digital Branding (Londres, 2015: origen del grupo, no es división)
    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.
    declaracion.objeto-social.incluye: Esto incluye pero no se limita a: - Inteligencia de Negocio y Analítica Avanzada: Consultoría de Gestión Empresarial, Procesos de Extracción y Transformación de datos (ETL), Desarrollo de Informes, Cuadros de Mando, Modelos Analíticos y Algoritmos mediante técnicas de Big Data, Machine Learning e Inteligencia Artificial. - Soluciones Digital y Cloud: Soluciones Corporativas y Ofimática, Sistemas de Gestión Corporativo y Comercial (ERP y CRM), Software Especializado, Dominios, Infraestructura Digital y Computación en la Nube (Cloud) tanto de desarrollo propio como de terceros. - Ciberseguridad y Cumplimiento Normativo (compliance): Evaluación de Riesgos, Análisis de Vulnerabilidades (PenTesting), Certificaciones de Seguridad Informática, Análisis Forense Digital (Forensics) y Protección de Datos. - Marketing y Comunicación: Estrategia Digital, Publicidad Digital (SEM), Optimización en Buscadores (SEO), Gestión de Redes Sociales (Community Management) y Desarrollo de Contenido (Copywriting) - Diseño Gráfico, Experiencia de Usuario (UX) e Interfaces (UI): Desarrollo de identidad corporativa y activos digitales tales como logotipos, videos, iconos, imágenes plantillas e interfaces web o de aplicaciones.
    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.
    … 3 líneas recortadas por el tope, 0 obligatorias: pide un max_chars mayor.
    Cómo pedirlo
    env["sb.brand"].sb_context("singular-beacon", purpose="redactar")

    Directrices para agentes de imágenes

    39 / 63 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 · Negro · Negro de marca; texto principal sobre claro y fondo del tema oscuro.
    color.claro: #f4f4f4 · Blanco roto · Blanco roto; fondo de página claro y texto sobre oscuro.
    color.acento: #cd3e19 · Naranja · Naranja de acento (propuesta, de KB 14); rellenos y acentos, no texto sobre claro (4,44 : 1).
    color.gris-oscuro: #3c3c3b · Gris oscuro · Gris oscuro (propuesta, de KB 14); texto secundario sobre claro.
    color.gris-claro: #dadada · Gris claro · Gris claro (propuesta, de KB 14); texto secundario sobre oscuro y filetes.
    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.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.
    fuente.primaria: Open Sans
    … 24 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. v15 2026-11-09 Aprobación Vigente

    TecWarden

    Innovación y tecnología, en un mismo lugar.

    Novedades de innovación y tecnología en español.

    • +34 910 47 90 47
    • [email protected]
    • Av. Ciudad de Barcelona 132, 1ª, 28007 Madrid

    Síguenos

    La publicación

    • Secciones
    • La idea
    • En qué punto está

    TecWarden

    • Nosotros
    • De quién es
    • Trabaja con nosotros

    Recursos

    • El grupo
    • Singular Media
    • Las cinco divisiones del grupo

    Contacto

    • Contacto
    • Proponer un tema

    Un proyecto de The Beacon Holding

    Singular Beacon, S.L. · CIF ES B67869644 · Inscrita en el Registro Mercantil de Madrid Tomo 42.891, Folio 36, Inscripción 1, Hoja M-758246

    • Privacidad
    • Cookies
    • Condiciones de uso
    The Beacon Holding

    Amplitud de visión, unidad de propósito

    • Singular Services

      • Singular Beacon
      • The Singular Academy
      • Singular Jobs En desarrollo
      • Singular Events
    • Singular Solutions

      • Odoo Apps
      • Observatorio 360º
        • Observatorio de Bienestar
        • Observatorio de Rotación
        • Observatorio de Compensación
        • Observatorio de Talento
        • Observatorio de Absentismo
      • SingularARX En desarrollo
    • Singular Media

      • Singular Works
        • Profesionales Excepcionales
        • Outstarting
        • Polemizando
      • Singular Editorial
        • Para Toda una Vida
        • TecWarden
      • Singular Pictures En desarrollo
    • Singular Investments

      • Singular Ventures
        • the0racle
        • HybridMeM
        • EngArch En desarrollo
        • ATLAS En desarrollo
        • Finite En desarrollo
        • autoWorks En desarrollo
        • loombiotech En desarrollo
      • Relación con inversores
        • Singular Beacon, S.L.
        • Digital Branding Ltd
      • Rondas abiertas
    • Singular Community

      • Singular Community
      • Nuestras Causas
      • The Singular Hub
      • Singular Club
    Español | English
    Copyright © TecWarden

    Utilizamos cookies para proporcionarle una mejor experiencia de usuario en este sitio web. Política de cookies

    Solo las necesarias Acepto