Skip to Content
The Tech Guardian
  • News
  • Sections
  • About us
  • Group
  • 0
  • Follow us
  • Español English
  • Contact
The Tech Guardian
  • 0
    • News
    • Sections
    • About us
    • Group
  • Follow us
  • Español English
  • Contact
Singular Beacon
Brands
All brands
  • The Beacon Holding
  • Digital Branding
  • EngArch
  • Nuestras Causas
  • Observatorio 360º
  • Observatorio de Absentismo
  • Observatorio de Bienestar
  • Observatorio de Compensación
  • Observatorio de Rotación
  • Observatorio de Talento
  • Singular Beacon
  • Singular Club
  • Singular Community
  • Para Toda una Vida
  • The Tech Guardian
  • Singular Events
  • Singular Jobs
  • Singular Pictures
  • Singular Ventures
  • the0racle
  • Singular Works
  • Outstarting
  • Polemizando
  • Profesionales Excepcionales
  • SingularARX
  • The Singular Academy
  • The Singular Hub
Sign in to see more

    Brand

    • 01 Identity
      • Values

    Foundations

    • 02 Logo
      • Variants
      • Clear space
      • Forbidden uses
    • 03 Color
      • Ramps
      • Palette
      • Roles
      • Contrasts
    • 04 Typography
      • Families
      • Styles
    • 05 Spacing and shape
      • Radii
      • Elevation

    Components

    • 06 Components
      • Button
      • Card
      • Page header
      • Call to action
      • Quote
      • Statistic
      • Frequently asked questions
      • Footer
      • Form fields
      • Selection
      • Alerts
      • Badges
      • Table
      • Progress

    Applications

    • 07 Documents
      • Brand templates
    • 08 Signature
    • 09 Presentations
      • Brand templates
      • Skin
      • Structure
    • 10 Proposals
      • Pieces
    • 11 Templates

    Resources

    • 12 People
    • 13 Downloads
    • 14 For agents
      • Communication style
      • Guidelines for image agents
    • 15 Versions
    Singular Beacon

    Design system

    Guiding Business

    • Version3
    • ScopeBrand
    • Date2026-11-04
    • Part ofThe Beacon Holding
    • SourceOdoo, published version
    • Content languagePartly in Spanish
    01 Identity Purpose, mission, vision and values 02 Logo Variants, clear space and usage 03 Color Ramps, roles and contrasts 04 Typography Families, specimens and scale 05 Spacing and shape Scale, radii and elevation 06 Components Standard web parts of the group 07 Documents Paper, templates and covers 08 Signature The brand's email signature 09 Presentations This brand's skin and the common structure 10 Proposals The pieces that are printed 11 Templates Where the brand's templates live 12 People Who makes the brand 13 Downloads Generated tokens and files 14 For agents The context an agent receives 15 Versions Published history
    01

    Identity

    Purpose, mission, vision and values

    Guiding Business

    Slogan

    Mission

    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.

    Institutional text

    • [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.
    What it inherits Inherited from The Beacon Holding

    Purpose

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

    Inherited from The Beacon Holding

    Pillars

    Inherited from 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

    Values

    Inherited from 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

    Institutional text 1
    • Digital Branding (Londres, 2015: origen del grupo, no es división)
    02

    Logo

    Variants, clear space and usage

    Variants

    Colour

    Colour

    Horizontal · Color

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Negro

    Negro

    Horizontal · Black

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Blanco sobre negro

    Blanco sobre negro

    Horizontal · White on black

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Claro

    Claro

    Horizontal · Light

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Colour

    Colour

    Icon · Color

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Negro

    Negro

    Icon · Black

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Blanco sobre negro

    Blanco sobre negro

    Icon · White on black

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Claro

    Claro

    Icon · Light

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Colour

    Colour

    Stacked · Color

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Negro

    Negro

    Stacked · Black

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Blanco sobre negro

    Blanco sobre negro

    Stacked · White on black

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Claro

    Claro

    Stacked · Light

    With margin SVGPDFPNG 128 px

    Without margin SVGPDFPNG 128 px

    Clear space

    x Clear space
    Free margin on all four sides: 12 % of the logo height

    Forbidden uses

    Not like thisLos logotipos solo deben usarse en los colores proporcionados.
    Not like thisEl faro y el lema «Guiding Business» no se redibujan, no se recolorean, no se generan.
    • No recrees el logotipo desde cero, utiliza estos.

    03

    Color

    Ramps, roles and contrasts

    Ramps

    Primario

    900 #001C35
    800 #00355D
    700 #005189
    Source colour #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
    Source colour #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

    Palette

    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.
    Ambar #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).
    Background 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

    Light

    • Background #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
    • Exito #00672C
    • Aviso #6D5000
    • Error #9A2503
    • Enlace #006EB7

    Dark

    • Background #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
    • Exito #7CD591
    • Aviso #E1B75C
    • Error #F49A84
    • Enlace #8FD3FF

    Contrasts

    Aa

    secundario / claro

    10.43:1 AAA

    Aa

    primario / claro

    4.87:1 AA

    Aa

    claro / primario

    4.87:1 AA

    Aa

    oscuro / claro

    17.55:1 AAA

    Aa

    claro / oscuro

    17.55:1 AAA

    Aa

    claro / secundario

    10.43:1 AAA

    Aa

    tinta / fondo

    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 / fondo

    4.87:1 AA

    Aa

    enlace / superficie

    5.36:1 AA

    Aa

    enlace / superficie-alta

    5.00:1 AA

    Aa

    tinta-sobre-primario / primario

    4.87:1 AA

    Aa

    tinta-sobre-primario / primario-hover

    10.43:1 AAA

    Aa

    exito / fondo

    6.41:1 AA

    Aa

    exito / superficie

    7.05:1 AAA

    Aa

    exito / 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

    Aa

    primario / fondo

    4.87:1 AA

    Aa

    primario / superficie

    5.36:1 AA

    acento / fondo

    4.44:1 AA, large text only

    Aa

    acento / superficie

    4.88:1 AA

    borde / fondo

    4.07:1 AA, large text only

    borde / superficie

    4.48:1 AA, large text only

    Aa

    foco / fondo

    10.43:1 AAA

    Aa

    foco / superficie

    11.47:1 AAA

    Aa

    foco / superficie-alta

    10.69:1 AAA

    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

    11.88:1 AAA

    Aa

    tinta-sobre-primario / primario-hover

    6.62:1 AA

    Aa

    exito / fondo

    10.83:1 AAA

    Aa

    exito / superficie

    8.71:1 AAA

    Aa

    exito / 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 / fondo

    11.88:1 AAA

    Aa

    primario / superficie

    9.56:1 AAA

    acento / fondo

    3.95:1 AA, large text only

    acento / superficie

    3.18:1 AA, large text only

    borde / fondo

    4.30:1 AA, large text only

    borde / superficie

    3.46:1 AA, large text only

    Aa

    foco / fondo

    11.88:1 AAA

    Aa

    foco / superficie

    9.56:1 AAA

    Aa

    foco / superficie-alta

    7.06:1 AAA

    Aa

    claro / primario

    4.87:1 AA

    Aa

    claro / oscuro

    17.55:1 AAA

    Aa

    claro / secundario

    10.43:1 AAA

    primario / oscuro

    3.59:1 AA, large text only

    acento / claro

    4.44:1 AA, large text only

    Aa

    acento / blanco

    4.88:1 AA

    Aa

    blanco / acento

    4.88:1 AA

    claro / acento

    4.44:1 AA, large text only

    oscuro / acento

    3.95:1 AA, large text only

    Aa

    cielo / oscuro

    11.88:1 AAA

    Aa

    cielo / secundario

    7.06:1 AAA

    Aa

    gris-oscuro / claro

    10.04:1 AAA

    Aa

    gris-claro / oscuro

    13.80:1 AAA

    Aa

    primario / blanco

    5.36:1 AA

    tinta-sobre-primario / acento

    4.44:1 AA, large text only

    tinta-sobre-primario / acento

    3.95:1 AA, large text only

    Forbidden combinations

    primario / secundario

    2.13:1 Do not use

    secundario / oscuro

    1.68:1 Do not use

    acento / superficie-alta

    2.34:1 Do not use

    • 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

    Typography

    Families, specimens and scale

    Families

    Open Sans

    Primaria

    Guiding Business

    400700

    Assistant

    Secundaria

    Singular Beacon

    Arial

    Terciaria

    Guiding Business

    400700

    Styles

    Title display 61px · 700 · 1.11 Titles

    Guiding Business

    Title 1 49px · 700 · 1.14 Page or section title

    Singular Beacon

    Title 2 39px · 700 · 1.23 Subtitle and card title

    Guiding Business

    Title 3 31px · 700 · 1.29 Minor title inside a block

    Singular Beacon

    Title 4 25px · 700 · 1.28 Titles

    Guiding Business

    Title 5 20px · 700 · 1.4 Titles

    Singular Beacon

    Body 16px · 400 · 1.5 Running interface text

    Guiding Business

    Body strong 16px · 700 · 1.5 Running interface text

    Singular Beacon

    Body small 14px · 400 · 1.43 Running interface text

    Guiding Business

    Label 12px · 400 · 1.33 Eyebrows, labels and metadata

    Singular Beacon

    Impreso card name 9.1pt

    Guiding Business

    Impreso card contact 6.5pt

    Singular Beacon

    05

    Spacing and shape

    Scale, radii and elevation

    Radii

    00px
    22px
    44px
    Circulo50%

    Elevation

    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)

    On a light surface, so the shadow shows in any theme.

    06

    Components

    Standard web parts of the group

    Button

    A single primary button per view; the rest, secondary or ghost.

    Variants, states and code

    The action of a view.

    Variants

    Secondary
    Ghost

    States

    Normal
    Hover
    Active
    Disabled

    Usage rule A single primary button per view; the rest, secondary or ghost.

    Code
    <button type="button" class="bb-c-button bb-c-button--primario">Get in touch</button>

    Card

    Brand

    Guiding Business

    Guiding Business

    Read more

    One idea per card, and all cards in a row the same height.

    Variants, states and code

    A piece of content with title, text and link.

    Variants

    Brand

    Guiding Business

    Guiding Business

    Read more
    Border

    Brand

    Guiding Business

    Guiding Business

    Read more
    Accent

    States

    Brand

    Guiding Business

    Guiding Business

    Read more
    Normal

    Brand

    Guiding Business

    Guiding Business

    Read more
    Hover

    Usage rule One idea per card, and all cards in a row the same height.

    Code
    <article class="bb-c-card bb-c-card--superficie">
                    <p class="bb-c-card__over">Brand</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="#">Read more</a>
            </article>

    Page header

    Brand

    Singular Beacon

    Guiding Business

    A single main title per page, saying what it is about in one line.

    Variants, states and code

    The opening of a page: eyebrow, title and lead.

    Variants

    Brand

    Singular Beacon

    Guiding Business

    Accent

    Usage rule A single main title per page, saying what it is about in one line.

    Code
    <header class="bb-c-header bb-c-header--superficie">
                <p class="bb-c-header__over">Brand</p>
                <h1 class="bb-c-header__title">Singular Beacon</h1>
                <p class="bb-c-header__lede">Guiding Business</p>
            </header>

    Call to action

    Guiding Business

    Get in touch

    One per page, at the end, with a verb that says what happens on click.

    Variants, states and code

    The close of a page, with a single action.

    Variants

    Guiding Business

    Get in touch
    Surface

    Usage rule One per page, at the end, with a verb that says what happens on click.

    Code
    <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="#">Get in touch</a>
            </aside>

    Quote

    Guiding Business

    Singular Beacon

    Always with its author; if it cannot be attributed, it is not a quote.

    Variants, states and code

    A highlighted sentence with its author.

    Variants

    Guiding Business

    Singular Beacon
    Surface

    Usage rule Always with its author; if it cannot be attributed, it is not a quote.

    Code
    <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>

    Statistic

    202

    items published in its design system

    A real figure with its source; no data, no statistic.

    Variants, states and code

    A figure with what it means.

    Variants

    202

    items published in its design system

    Accent

    Usage rule A real figure with its source; no data, no statistic.

    Code
    <div class="bb-c-stat bb-c-stat--superficie">
                <p class="bb-c-stat__value">202</p>
                <p class="bb-c-stat__label">items published in its design system</p>
            </div>

    Frequently asked questions

    What is Singular Beacon?

    Guiding Business

    What drives it?

    Guiding Business

    Questions people really ask, with the answer in the first line.

    Variants, states and code

    Questions that open and close without scripts.

    Usage rule Questions people really ask, with the answer in the first line.

    Code
    <div class="bb-c-faq">
                <details class="bb-c-faq__item" open="open">
                    <summary class="bb-c-faq__q">What is 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">What drives it?</summary>
                    <p class="bb-c-faq__a">Guiding Business</p>
                </details>
            </div>

    Footer

    Singular Beacon
    • Legal notice
    • Privacy
    • Contact

    No promotions: identity, legal links and contact.

    Variants, states and code

    The close of every page: brand and links.

    Variants

    Singular Beacon
    • Legal notice
    • Privacy
    • Contact
    Light

    Usage rule No promotions: identity, legal links and contact.

    Code
    <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="#">Legal notice</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </footer>

    Form fields

    Every field with a visible label; the error is said in words, not only in colour.

    Variants, states and code

    Text, email and selection fields with their label, hint and error.

    States

    Normal
    Focus
    Error
    Disabled

    Usage rule Every field with a visible label; the error is said in words, not only in colour.

    Code
    <form class="bb-c-form bb-c-form--base">
                <label class="bb-c-field">
                    <span class="bb-c-field__label">Name</span>
                    <input class="bb-c-field__input" type="text" value="Singular Beacon"/>
                </label>
                <label class="bb-c-field">
                    <span class="bb-c-field__label">Email</span>
                    <input class="bb-c-field__input" type="email"/>
                    <span class="bb-c-field__hint">Only to answer you.</span>
                </label>
                <label class="bb-c-field">
                    <span class="bb-c-field__label">Topic</span>
                    <select class="bb-c-field__input">
                        <option>Singular Beacon</option>
                    </select>
                </label>
            </form>

    Selection

    Topic

    One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.

    Variants, states and code

    Choosing one option among cards, or several with checkboxes.

    Variants

    Topic
    Checkboxes

    States

    Topic
    Normal
    Topic
    Focus
    Topic
    Disabled

    Usage rule One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.

    Code
    <fieldset class="bb-c-choice bb-c-choice--tarjetas">
                <legend class="bb-c-field__label">Topic</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>

    Alerts

    Guiding Business

    One sentence that says what happened and what to do; colour is never the only signal.

    Variants, states and code

    A short message about what has just happened.

    Variants

    Received: the Singular Beacon team will answer you.

    Success

    It could not be sent. Try again in a few minutes.

    Error

    Usage rule One sentence that says what happened and what to do; colour is never the only signal.

    Code
    <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>

    Badges

    Brand Version 3 Current

    One or two words; never as a button.

    Variants, states and code

    Short labels for state, kind or category.

    Variants

    Brand Version 3 Current

    Compact

    Usage rule One or two words; never as a button.

    Code
    <p class="bb-c-badges bb-c-badges--base">
                <span class="bb-c-badge bb-c-badge--acento">Brand</span>
                <span class="bb-c-badge">Version 3</span>
                <span class="bb-c-badge bb-c-badge--borde">Current</span>
            </p>

    Table

    StyleSizeUse
    Title display61 pxTitles
    Title 149 pxPage or section title
    Title 239 pxSubtitle and card title
    Title 331 pxMinor title inside a block
    Title 425 pxTitles

    Only for data that is compared; the header always says what each column is.

    Variants, states and code

    Data in rows and columns, with header.

    Variants

    StyleSizeUse
    Title display61 pxTitles
    Title 149 pxPage or section title
    Title 239 pxSubtitle and card title
    Title 331 pxMinor title inside a block
    Title 425 pxTitles
    Striped

    Usage rule Only for data that is compared; the header always says what each column is.

    Code
    <table class="bb-c-table bb-c-table--superficie">
                <thead><tr><th scope="col">Style</th><th scope="col">Size</th><th scope="col">Use</th></tr></thead>
                <tbody>
                    <tr>
                        <td>Title display</td><td><code>61 px</code></td><td>Titles</td>
                    </tr><tr>
                        <td>Title 1</td><td><code>49 px</code></td><td>Page or section title</td>
                    </tr><tr>
                        <td>Title 2</td><td><code>39 px</code></td><td>Subtitle and card title</td>
                    </tr><tr>
                        <td>Title 3</td><td><code>31 px</code></td><td>Minor title inside a block</td>
                    </tr><tr>
                        <td>Title 4</td><td><code>25 px</code></td><td>Titles</td>
                    </tr>
                </tbody>
            </table>

    Progress

    Own to the brand in this book95 %

    Always with the figure in text next to the bar.

    Variants, states and code

    How far something has gone, as a bar and as a figure.

    Variants

    Own to the brand in this book95 %

    Outline

    Usage rule Always with the figure in text next to the bar.

    Code
    <div class="bb-c-progress bb-c-progress--acento">
                <p class="bb-c-progress__head"><span>Own to the brand in this book</span><strong>95 %</strong></p>
                <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="95" aria-label="Own to the brand in this book">
                    <span class="bb-c-progress__bar" style="width: 95%"></span>
                </div>
            </div>
    07

    Documents

    Paper, templates and covers

    Brand templates

    Word letterhead

    A4 with the logo, the company foot, the brand styles and placeholders to write over.

    Download .docx

    08

    Signature

    The brand's email signature

    The email signature closes every message from the brand: the logo, the person's name and job title, contact details and, if the brand publishes them, a banner and a legal notice. It is generated from the brand's published version, so it changes when the brand does.

    Singular Beacon

    First Last

    Job title

    Phone · email

    Puede ponerse en contacto con nosotros a través de estos [canales](https://www.singularbeacon.com/contacto). Para valorar la atención recibida o la calidad de nuestros servicios, por favor rellene este [formulario de calidad](https://www.singularbeacon.com/survey/start/5e1fbc24-3736-4f4d-9e93-e760ba84643b). Si recibe este mensaje por error, por favor notifíquelo al remitente y proceda a eliminarlo de forma segura (incluyendo la bandeja de eliminados).

    Preview with fictitious data

    Team members generate their signature from their Odoo Preferences, signed in as an employee.

    09

    Presentations

    This brand's skin and the common structure

    Brand templates

    PowerPoint 16:9

    Cover, divider, content, two columns, picture and text, figure or quote and closing with contact, each with its placeholders.

    Download .pptx

    Skin

    Colours

    • Paper #F4F4F4
    • Ink #0E0E0E
    • Heading #003E58
    • Accent #006EB7
    • Signal #CD3E19
    • Surface #FFFFFF
    • Stage #006EB7
    • Stage ink #F4F4F4

    Lowest text contrast: 4.87:1

    Composition

    Headings
    Open Sans
    Text
    Open Sans
    Margin
    1.25 in
    Gap
    0.35 in
    Card radius
    0.042 in
    Scale: cover, title, label
    40 · 30 · 22 pt

    Download a sample of the deck. Fictitious content, with no client data.

    Structure

    1. SB Cover Cover: title, client, reference, date and client logo
    2. SB Agenda Contents, with more than two sections
    3. SB Section Divider, with 4 slides or more in a section
    4. SB Content The included sections, in their order
    5. SB Closing Closing: thanks and contact of the owner

    Template layouts

    Cover
    SB Cover
    Contents
    SB Agenda
    Divider
    SB Section
    Text
    SB Content
    Two columns
    SB Two Columns
    Three columns
    SB Three Columns
    KPIs
    SB KPI Tiles
    Table
    SB Table
    Gantt
    SB Gantt
    Team
    SB Team
    Closing
    SB Closing
    Blank
    SB Blank

    Sections with their own slides

    • Goals, Requirements and Scope
    • Planning and Milestones
    • Governance Model
    • Team
    • Success Stories
    • Fees
    • Payment Terms
    • Terms and Conditions
    10

    Proposals

    The pieces that are printed

    Pieces

    Cover

    Full bleed, with the house art.

    Body

    The included sections, numbered, with the head and foot of the document system.

    Acceptance

    Full bleed, with the boxes where the client signs.

    Back cover

    Full bleed, with the art and the legal foot.

    Sections the body can carry

    • Background
    • State of the Art
    • Goals, Requirements and Scope
    • Planning and Milestones
    • Methodology
    • Governance Model
    • Team
    • Client Team
    • Success Stories
    • Fees
    • Payment Terms
    • Terms and Conditions
    • Custom
    11

    Templates

    Where the brand's templates live

    The brand's templates live in the Applications sections: each one shows the real piece.

    07 Documents 09 Presentations 10 Proposals
    12

    People

    Who makes the brand

    Pending

    Team pending consent

    Team members will appear here once they consent to being shown publicly.

    13

    Downloads

    Generated tokens and files

    tokens.css Brand CSS variables tokens.json Machine-readable tokens

    Files

    • Horizontal · Color

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Horizontal · Black

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Horizontal · White on black

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Horizontal · Light

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Icon · Color

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Icon · Black

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Icon · White on black

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Icon · Light

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Stacked · Color

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Stacked · Black

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Stacked · White on black

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    • Stacked · Light

      With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

      Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

    14

    For agents

    Content in Spanish

    The context an agent receives

    What is published for this audience, as an agent reads it: what is mandatory comes first.

    Communication style

    14 / 20 lines within the limit

    Context
    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.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.legal-firma.es: Este mensaje y sus adjuntos son confidenciales y se dirigen exclusivamente a su destinatario. Si usted no es el destinatario previsto, le informamos que está prohibida su divulgación, copia o distribución sin autorización. Si ha recibido este mensaje por error, le rogamos nos lo comunique inmediatamente y proceda a su eliminación. En cumplimiento del Reglamento (UE) 2016/679 (RGPD) y la Ley Orgánica 3/2018 (LOPD-GDD), le informamos de que sus datos serán tratados por Singular Beacon, S.L. con el fin de mantener la relación profesional o comercial. Puede ejercer sus derechos en [email protected]. Más información: Política de Privacidad.
    declaracion.legal-firma.en: This message and its attachments are confidential and intended solely for its addressee. If you are not the intended recipient, any disclosure, copy or distribution is prohibited. If you have received this message in error, please notify us immediately and delete it. In compliance with EU Regulation 2016/679 (GDPR) and Spanish Law 3/2018, your data will be processed by Singular Beacon, S.L. to maintain a professional or commercial relationship. You may exercise your rights at [email protected]. More info: Privacy Policy.
    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
    … 6 lines cut by the limit, 0 mandatory: request a larger max_chars.
    How to request it
    env["sb.brand"].sb_context("singular-beacon", purpose="redactar", language="en_US")

    Guidelines for image agents

    39 / 63 lines within the limit

    Context
    NEVER accessibility color.prohibido.1: No usar #006EB7 sobre #003E58: contraste 2.13:1, por debajo de AA.
    NEVER accessibility color.prohibido.2: No usar #003E58 sobre #0E0E0E: contraste 1.68:1, por debajo de AA.
    NEVER accessibility color.prohibido.3: No usar #006EB7 sobre #0E0E0E: contraste 3.59:1, por debajo de AA.
    NEVER logo logo.no-recrear: No recrees el logotipo desde cero, utiliza estos.
    NEVER logo logo.solo-colores-dados: Los logotipos solo deben usarse en los colores proporcionados.
    NEVER 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 lines cut by the limit, 0 mandatory: request a larger max_chars.
    How to request it
    env["sb.brand"].sb_context("singular-beacon", purpose="imagen", language="en_US")
    15

    Versions

    Published history

    1. v3 2026-11-04 Approved Current 14 keys changed
    2. v2 2026-11-04 Approved 188 keys changed
    3. v1 2026-11-03 Approved

    The Tech Guardian

    Innovation and technology, all in one place.

    Innovation and technology news in Spanish.

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

    Follow us

    The publication

    • Sections
    • The idea
    • Where it stands

    The Tech Guardian

    • About us
    • Who is behind it
    • Work with us

    Resources

    • The group
    • Singular Media
    • The group's five divisions

    Contact

    • Contact
    • Pitch a story

    Part of The Beacon Holding

    Singular Beacon, S.L. · Tax ID (CIF) ES B67869644 · Registered with the Registro Mercantil de Madrid (Madrid Commercial Registry), Tomo 42.891, Folio 36, Inscripción 1, Hoja M-758246.

    • Privacy
    • Cookies
    • Terms of use
    The Beacon Holding

    Breadth of vision, unity of purpose

    • Singular Services

      • Singular Beacon
      • The Singular Academy
      • Singular Jobs In development
      • 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 In development
      • EngArch In development
    • Singular Media

      • Singular Works
        • Profesionales Excepcionales
        • Outstarting
        • Polemizando
      • Singular Editorial
        • Para Toda una Vida
        • The Tech Guardian
      • Singular Pictures In development
    • Singular Investments

      • Singular Ventures
        • the0racle
        • HybridMeM
      • Investor relations
        • Singular Beacon, S.L.
        • Digital Branding Ltd
      • Open rounds
    • Singular Community

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

    We use cookies to provide you a better user experience on this website. Cookie Policy

    Only essentials I agree