Skip to Content
TecWarden
  • News
  • Sections
  • About us
  • Group
  • 0
  • Follow us
  • Español English
  • Contact
TecWarden
  • 0
    • News
    • Sections
    • About us
    • Group
  • Follow us
  • Español English
  • Contact
Singular Beacon
Brands
All brands
  • 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
Sign in to see more

    Brand

    • 01 Identity
      • Values

    Foundations

    • 02 Logo
      • Variants
      • Forbidden uses
      • Brand resources
    • 03 Color
      • Ramps
      • Palette
      • Roles
      • Contrasts
    • 04 Typography
      • Families
      • Styles
    • 05 Spacing and shape
      • Radii
      • Elevation
    • 06 Iconography
      • Files

    Components

    • 07 Components

    Resources

    • 08 Animations
    • 09 Image generator
    • 10 Downloads
    • 11 For agents
      • Communication style
      • Guidelines for image agents
    • 12 Versions
    Singular Beacon

    Design system

    Guiding Business

    • Version15
    • ScopeBrand
    • Date2026-11-09
    • Part ofSingular Services
    • 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 Iconography Icon system 07 Components Standard web parts of the group 08 Animations 09 Image generator 10 Downloads Generated tokens and files 11 For agents The context an agent receives 12 Versions Published history
    01

    Identity

    Purpose, mission, vision and values

    Guiding Business

    Slogan

    Mission

    Singular Beacon, S.L.'s mission is to help its clients develop their full digital potential through an ecosystem of services and solutions that simplify management, optimize processes and help make better-informed decisions.

    Leitmotif

    • The lighthouse that guides through the world of digitalisation: a steady, high light that points the way through the fog of technology, so that every client reaches port on a course of its own. It is the hearth's fire set on the tower.

    History

    • More than ten years of experience: we were born in London as Digital Branding Ltd in 2015 and in November 2021 we were incorporated in Spain as Singular Beacon, S.L.

    Institutional text

    • [Singular Beacon, S.L.'s] corporate purpose is the provision of advisory, consulting, marketing, integration, development, implementation, maintenance and support services for digital solutions.
    • We are passionate about bringing technology and ideas together to create digital solutions that drive growth and innovation.
    • Odoo implementation (ERP, CRM, projects, HR, accounting) from start to finish; data, analytics, BI and AI; process digitalization; training with The Singular Academy; Kit Digital and Kit Consulting (Acelera Pyme).
    • Martínez Villergas 49 V-1º, 28027 Madrid. Spain. [email protected]
    • www.singularbeacon.com; the company, Singular Beacon, S.L., at singularbeacon.sl.
    • This includes but is not limited to: - Business Intelligence and Advanced Analytics: Business Management Consulting, Data Extraction and Transformation (ETL) Processes, Report Development, Dashboards, Analytical Models and Algorithms using Big Data, Machine Learning and Artificial Intelligence techniques. - Digital and Cloud Solutions: Corporate and Office Solutions, Corporate and Commercial Management Systems (ERP and CRM), Specialized Software, Domains, Digital Infrastructure and Cloud Computing, both in-house and third-party. - Cybersecurity and Regulatory Compliance: Risk Assessment, Vulnerability Analysis (PenTesting), IT Security Certifications, Digital Forensics and Data Protection. - Marketing and Communication: Digital Strategy, Digital Advertising (SEM), Search Engine Optimization (SEO), Social Media Management (Community Management) and Content Development (Copywriting) - Graphic Design, User Experience (UX) and Interfaces (UI): Development of corporate identity and digital assets such as logos, videos, icons, template images and web or application interfaces.
    What it inherits Inherited from The Beacon Holding

    Purpose

    The group is the way to create a positive impact in the world

    Inherited from The Beacon Holding

    Values

    Inherited from The Beacon Holding

    Data to decide

    People at the center

    Technology as a means

    Project management, with unit margins

    The values, vision and professional ethics that guide us

    Under the Code of Ethics and Conduct, every employee and collaborator of the group acts with honesty, prevents wrongdoing and builds trust.

    Honesty: act honestly and transparently, in line with current legislation and the standards of professional ethics. Prevention: prevent criminal or unlawful acts in professional activity, with the necessary monitoring and control mechanisms. Trust: work ethically and honourably, and build relationships of trust within the group and with third parties.

    Values

    Inherited from The Beacon Holding

    Positive Impact

    We act in line with our values and our Code of Ethics, we treat all parties respectfully and pleasantly, we have social and environmental awareness and a clear determination to add value by building relationships we care for over the long term.

    Kindness, Honesty, Loyalty and Respect

    Value Contribution

    We offer high-quality solutions and work so that every euro our clients invest turns into value for their firm. We take responsibility for the full life cycle of projects, operating on the principles of efficiency and effectiveness, beginning with the end in mind and seeking synergies and win-win strategies.

    Vocation for Excellence and Results Orientation

    Adaptability

    Our sector, as well as our clients' needs, are constantly changing. We are aware of, considerate of and understanding about these needs. We are willing to help and we do so by being flexible about changes in initial requirements, deadlines and costs.

    Flexibility, Empathy and Transparency

    Institutional text 1
    • Digital Branding (London, 2015: origin of the group, not a division)
    02

    Logo

    Variants, clear space and usage

    The lighthouse that guides through the world of digitalisation: a steady, high light that points the way through the fog of technology, so that every client reaches port on a course of its own. It is the hearth's fire set on the tower.

    Leitmotif

    Variants

    Colour

    Colour

    Horizontal · Color

    Other SVGPDFPNG 745 px

    Light

    Light

    Horizontal · Light

    Other SVGPDFPNG 745 px

    Colour

    Colour

    Stacked · Color

    Other SVGPDFPNG 199 px

    Light

    Light

    Stacked · Light

    Other SVGPDFPNG 199 px

    Colour

    Colour

    Icon · Color

    Other SVGPDFPNG 155 px

    Light

    Light

    Icon · Light

    Other SVGPDFPNG 155 px

    Logo design Alba Espinosa (Estudio Nácar)

    Forbidden uses

    Not like thisThe lighthouse and the “Guiding Business” tagline are not redrawn, not recolored, not generated.
    • Do not recreate the logo from scratch, use these.

    • Logos must only be used in the colors provided.

    Brand resources

    Closed art: used as is, never recomposed

    Banner training

    Banner training

    SVGJPG

    03

    Color

    Ramps, roles and contrasts

    Ramps

    Primary

    900 #001C35
    800 #00355D
    700 #005189
    Source colour #006EB7 The brand's primary blue; primary buttons and links on a light background.
    500 #3B85C6
    400 #609CD4
    300 #82B3E2
    200 #A3CAF0
    100 #C5E2FE
    50 #F0F8FF

    Navy

    900 #041D2A
    Secondary #003E58 Navy; logo text, highlighted headlines and dark panel background.
    700 #25536C
    600 #416980
    500 #5C8094
    400 #7897A9
    300 #94AFBE
    200 #B1C7D4
    100 #CFE0EA
    50 #EEF9FF

    Neutral

    Dark #0E0E0E Brand black; main text on light and dark-theme background.
    800 #242423
    Dark grey #3C3C3B Dark gray (proposal, from KB 14); secondary text on light.
    600 #595958
    500 #777776
    400 #979796
    300 #B8B8B8
    Light grey #DADADA Light gray (proposal, from KB 14); secondary text on dark and rules.
    100 #E7E7E7
    Light #F4F4F4 Off-white; light page background and text on dark.

    Accent

    900 #370600
    800 #671400
    700 #9A2503
    Source colour #CD3E19 Accent orange (proposal, from KB 14); fills and accents, not text on light (4.44 : 1).
    500 #DB6042
    400 #E87D64
    300 #F49A84
    200 #FFB6A4
    100 #FFD6CB
    50 #FFF4F1

    Palette

    White #FFFFFF RGB 255, 255, 255 White; light card surface and icon detail.
    Sky #8FD3FF RGB 143, 211, 255 Sky; light blue for links, focus and primary in dark theme.
    Amber #FF9A62 RGB 255, 154, 98 Amber of the website; decoration, not text.
    Night #021620 RGB 2, 22, 32 Night of the website; very dark header backgrounds.
    Ink #05283A RGB 5, 40, 58 Ink of the website; gradient under text over photo and shadows.
    Overlap #56ABE2 RGB 86, 171, 226 Transparency overlap of the app icons (0.6 × #8FD3FF + 0.4 × #006EB7).
    Dark background #262A36 RGB 38, 42, 54 Dark background of the icon contact sheet.
    Shadow #02161F RGB 2, 22, 31 Photo duotone shadows (treatment under review).
    Medium #006088 RGB 0, 96, 136 Photo duotone midtones (treatment under review).
    Light #E2EEF4 RGB 226, 238, 244 Photo duotone highlights (treatment under review).
    Light #00672C RGB 0, 103, 44
    Light #6D5000 RGB 109, 80, 0
    Dark #7CD591 RGB 124, 213, 145
    Dark #E1B75C RGB 225, 183, 92

    Roles

    Light

    • Background #F4F4F4
    • Surface #FFFFFF
    • Surface high #F0F8FF
    • Ink #0E0E0E
    • Soft ink #3C3C3B
    • Ink on primary #F4F4F4
    • Primary #006EB7
    • Primary hover #003E58
    • Accent #CD3E19
    • Border #777776
    • Focus #003E58
    • Success #00672C
    • Warning #6D5000
    • Error #9A2503
    • Link #006EB7

    Dark

    • Background #0E0E0E
    • Surface #242423
    • Surface high #003E58
    • Ink #F4F4F4
    • Soft ink #DADADA
    • Ink on primary #0E0E0E
    • Primary #8FD3FF
    • Primary hover #609CD4
    • Accent #CD3E19
    • Border #777776
    • Focus #8FD3FF
    • Success #7CD591
    • Warning #E1B75C
    • Error #F49A84
    • Link #8FD3FF

    Contrasts

    Light theme

    Aa

    Secondary / Light

    10.43:1 AAA

    Aa

    Primary / Light

    4.87:1 AA

    Aa

    Dark / Light

    17.55:1 AAA

    Aa

    Ink / Surface

    19.30:1 AAA

    Aa

    Ink / Surface high

    17.99:1 AAA

    Aa

    Soft ink / Background

    10.04:1 AAA

    Aa

    Soft ink / Surface

    11.04:1 AAA

    Aa

    Soft ink / Surface high

    10.29:1 AAA

    Aa

    Link / Surface

    5.36:1 AA

    Aa

    Link / Surface high

    5.00:1 AA

    Aa

    Success / Background

    6.41:1 AA

    Aa

    Success / Surface

    7.05:1 AAA

    Aa

    Success / Surface high

    6.57:1 AA

    Aa

    Warning / Background

    6.82:1 AA

    Aa

    Warning / Surface

    7.50:1 AAA

    Aa

    Warning / Surface high

    6.99:1 AA

    Aa

    Error / Background

    7.23:1 AAA

    Aa

    Error / Surface

    7.95:1 AAA

    Aa

    Error / Surface high

    7.41:1 AAA

    Accent / Background

    4.44:1 AA, large text only

    Aa

    Accent / Surface

    4.88:1 AA

    Border / Background

    4.07:1 AA, large text only

    Border / Surface

    4.48:1 AA, large text only

    Aa

    Focus / Surface

    11.47:1 AAA

    Aa

    Focus / Surface high

    10.69:1 AAA

    Dark theme

    Aa

    Ink / Background

    17.55:1 AAA

    Aa

    Ink / Surface

    14.12:1 AAA

    Aa

    Ink / Surface high

    10.43:1 AAA

    Aa

    Soft ink / Background

    13.80:1 AAA

    Aa

    Soft ink / Surface

    11.11:1 AAA

    Aa

    Soft ink / Surface high

    8.20:1 AAA

    Aa

    Link / Background

    11.88:1 AAA

    Aa

    Link / Surface

    9.56:1 AAA

    Aa

    Link / Surface high

    7.06:1 AAA

    Aa

    Ink on primary / Primary hover

    6.62:1 AA

    Aa

    Success / Background

    10.83:1 AAA

    Aa

    Success / Surface

    8.71:1 AAA

    Aa

    Success / Surface high

    6.43:1 AA

    Aa

    Warning / Background

    10.23:1 AAA

    Aa

    Warning / Surface

    8.23:1 AAA

    Aa

    Warning / Surface high

    6.08:1 AA

    Aa

    Error / Background

    9.01:1 AAA

    Aa

    Error / Surface

    7.25:1 AAA

    Aa

    Error / Surface high

    5.35:1 AA

    Accent / Background

    3.95:1 AA, large text only

    Accent / Surface

    3.18:1 AA, large text only

    Border / Background

    4.30:1 AA, large text only

    Border / Surface

    3.46:1 AA, large text only

    Aa

    Light / Primary

    4.87:1 AA

    Primary / Dark

    3.59:1 AA, large text only

    Aa

    White / Accent

    4.88:1 AA

    Light / Accent

    4.44:1 AA, large text only

    Do not use

    Primary / Secondary

    2.13:1

    The brand forbids it

    Secondary / Dark

    1.68:1

    The brand forbids it

    Accent / Surface high

    2.34:1

    The brand forbids it

    Accent / Primary

    1.09:1

    Vibrates: a saturated red next to a saturated blue shimmers at the edge and tires the eye

    • Do not use #006EB7 on #003E58: contrast 2.13:1, below AA.

    • Do not use #003E58 on #0E0E0E: contrast 1.68:1, below AA.

    • Do not use #006EB7 on #0E0E0E: contrast 3.59:1, below AA.

    04

    Typography

    Families, specimens and scale

    Families

    Open Sans

    Primary

    Guiding Business

    400700

    Assistant

    Secondary

    Singular Beacon

    Arial

    Tertiary

    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

    Printed card name 9.1pt

    Guiding Business

    Printed 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

    Iconography

    Icon system

    Files

    • Signature: Facebook icon

      PNG

    • Signature: GitHub icon

      PNG

    • Signature: Instagram icon

      PNG

    • Signature: LinkedIn icon

      PNG

    • Signature: X icon

      PNG

    • Signature: YouTube icon

      PNG

    07

    Components

    Standard web parts of the group

    ButtonCardPage headerCall to actionQuoteStatisticFrequently asked questionsFooterForm fieldsSelectionAlertsBadgesTableProgress

    Button

    The action of a view.

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

    Variants

    Primary
    Secondary
    Ghost

    States

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

    Card

    A piece of content with title, text and link.

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

    Variants

    Brand

    Guiding Business

    Guiding Business

    Read more
    Surface

    Brand

    Guiding Business

    Guiding Business

    Read more
    Border

    Brand

    Guiding Business

    Guiding Business

    Read more
    Accent

    States

    Brand

    Guiding Business

    Guiding Business

    Read more
    Hover
    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

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

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

    Variants

    Brand

    Singular Beacon

    Guiding Business

    Surface

    Brand

    Singular Beacon

    Guiding Business

    Accent
    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

    The close of a page, with a single action.

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

    Variants

    Guiding Business

    Get in touch
    Accent

    Guiding Business

    Get in touch
    Surface
    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

    A highlighted sentence with its author.

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

    Variants

    Guiding Business

    Singular Beacon
    Rule

    Guiding Business

    Singular Beacon
    Surface
    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

    A figure with what it means.

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

    Variants

    209

    items published in its design system

    Surface

    209

    items published in its design system

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

    Frequently asked questions

    Questions that open and close without scripts.

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

    What is Singular Beacon?

    Guiding Business

    What drives it?

    Guiding Business

    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

    The close of every page: brand and links.

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

    Variants

    Singular Beacon
    • Legal notice
    • Privacy
    • Contact
    Dark
    Singular Beacon
    • Legal notice
    • Privacy
    • Contact
    Light
    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

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

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

    States

    Focus
    Error
    Disabled
    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

    Choosing one option among cards, or several with checkboxes.

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

    Variants

    Topic
    Option cards
    Topic
    Checkboxes

    States

    Topic
    Focus
    Topic
    Disabled
    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

    A short message about what has just happened.

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

    Variants

    Guiding Business

    Information

    Received: the Singular Beacon team will answer you.

    Success

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

    Error
    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

    Short labels for state, kind or category.

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

    Variants

    Brand Version 15 Current

    Base

    Brand Version 15 Current

    Compact
    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 15</span>
                <span class="bb-c-badge bb-c-badge--borde">Current</span>
            </p>

    Table

    Data in rows and columns, with header.

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

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

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

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

    Variants

    Own to the brand in this book93 %

    Accent

    Own to the brand in this book93 %

    Outline
    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>93 %</strong></p>
                <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="93" aria-label="Own to the brand in this book">
                    <span class="bb-c-progress__bar" style="width: 93%"></span>
                </div>
            </div>
    08

    Animations

    Constellation lighthouse · Singular Beacon

    Constellation lighthouse · Singular Beacon

    Practices pentagon · Singular Beacon

    Practices pentagon · Singular Beacon

    Woven network · Singular Beacon

    Woven network · Singular Beacon

    Fresnel rings · Singular Beacon

    Fresnel rings · Singular Beacon

    Rising data · Singular Beacon

    Rising data · Singular Beacon

    Heading · Singular Beacon

    Heading · Singular Beacon

    Beam divider · Singular Beacon

    Beam divider · Singular Beacon
    09

    Image generator

    A photo of a product or an object, with no background, framed and set on the brand's corporate background.

    1. Upload the image

    A product, an object or an illustration. Never a person: team portraits have their own tool.

    2. Gemini cuts it out

    It removes the background and frames the subject. Odoo sets it on the brand background.

    3. A person approves it

    Nothing goes out unless someone has looked at it. Once approved, it can be downloaded.

    The generator is for brand editors: sign in with your Odoo account.

    10

    Downloads

    Generated tokens and files

    tokens.css Brand CSS variables tokens.json Machine-readable tokens
    • Banner training

      SVGJPG

    Files

    • Horizontal · Color

      Other SVGPDFPNG 745 pxPNG 1488 px

    • Horizontal · Light

      Other SVGPDFPNG 745 pxPNG 1489 px

    • Stacked · Color

      Other SVGPDFPNG 199 pxPNG 397 px

    • Stacked · Light

      Other SVGPDFPNG 199 pxPNG 398 px

    • Icon · Color

      Other SVGPDFPNG 155 pxPNG 310 px

    • Icon · Light

      Other SVGPDFPNG 155 pxPNG 309 px

    11

    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

    17 / 20 lines within the limit

    Context
    declaracion.mision: Singular Beacon, S.L.'s mission is to help its clients develop their full digital potential through an ecosystem of services and solutions that simplify management, optimize processes and help make better-informed decisions.
    declaracion.objeto-social: [Singular Beacon, S.L.'s] corporate purpose is the provision of advisory, consulting, marketing, integration, development, implementation, maintenance and support services for digital solutions.
    declaracion.sobre-nosotros: We are passionate about bringing technology and ideas together to create digital solutions that drive growth and innovation.
    declaracion.slogan: Guiding Business
    declaracion.servicios: Odoo implementation (ERP, CRM, projects, HR, accounting) from start to finish; data, analytics, BI and AI; process digitalization; training with The Singular Academy; Kit Digital and Kit Consulting (Acelera Pyme).
    declaracion.contacto-postal: Martínez Villergas 49 V-1º, 28027 Madrid. Spain. [email protected]
    declaracion.proposito: The group is the way to create a positive impact in the world
    declaracion.leitmotiv: The lighthouse that guides through the world of digitalisation: a steady, high light that points the way through the fog of technology, so that every client reaches port on a course of its own. It is the hearth's fire set on the tower.
    declaracion.webs: www.singularbeacon.com; the company, Singular Beacon, S.L., at singularbeacon.sl.
    declaracion.origen: Digital Branding (London, 2015: origin of the group, not a division)
    declaracion.historia: More than ten years of experience: we were born in London as Digital Branding Ltd in 2015 and in November 2021 we were incorporated in Spain as Singular Beacon, S.L.
    declaracion.objeto-social.incluye: This includes but is not limited to: - Business Intelligence and Advanced Analytics: Business Management Consulting, Data Extraction and Transformation (ETL) Processes, Report Development, Dashboards, Analytical Models and Algorithms using Big Data, Machine Learning and Artificial Intelligence techniques. - Digital and Cloud Solutions: Corporate and Office Solutions, Corporate and Commercial Management Systems (ERP and CRM), Specialized Software, Domains, Digital Infrastructure and Cloud Computing, both in-house and third-party. - Cybersecurity and Regulatory Compliance: Risk Assessment, Vulnerability Analysis (PenTesting), IT Security Certifications, Digital Forensics and Data Protection. - Marketing and Communication: Digital Strategy, Digital Advertising (SEM), Search Engine Optimization (SEO), Social Media Management (Community Management) and Content Development (Copywriting) - Graphic Design, User Experience (UX) and Interfaces (UI): Development of corporate identity and digital assets such as logos, videos, icons, template images and web or application interfaces.
    valor.pilar.datos-para-decidir: Data to decide
    valor.pilar.personas-en-el-centro: People at the center
    valor.pilar.tecnologia-como-medio: Technology as a means
    valor.pilar.gestion-por-proyectos: Project management, with unit margins
    valor.pilar.valores-vision-etica: The values, vision and professional ethics that guide us · Honesty: act honestly and transparently, in line with current legislation and the standards of professional ethics. Prevention: prevent criminal or unlawful acts in professional activity, with the necessary monitoring and control mechanisms. Trust: work ethically and honourably, and build relationships of trust within the group and with third parties. · Under the Code of Ethics and Conduct, every employee and collaborator of the group acts with honesty, prevents wrongdoing and builds trust.
    … 3 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

    41 / 63 lines within the limit

    Context
    NEVER accessibility color.prohibido.1: Do not use #006EB7 on #003E58: contrast 2.13:1, below AA.
    NEVER accessibility color.prohibido.2: Do not use #003E58 on #0E0E0E: contrast 1.68:1, below AA.
    NEVER accessibility color.prohibido.3: Do not use #006EB7 on #0E0E0E: contrast 3.59:1, below AA.
    NEVER logo logo.no-recrear: Do not recreate the logo from scratch, use these.
    NEVER logo logo.solo-colores-dados: Logos must only be used in the colors provided.
    NEVER logo logo.no-redibujar: The lighthouse and the “Guiding Business” tagline are not redrawn, not recolored, not generated.
    color.primario: #006eb7 · Primary blue · The brand's primary blue; primary buttons and links on a light background.
    color.secundario: #003e58 · Navy · Navy; logo text, highlighted headlines and dark panel background.
    color.oscuro: #0e0e0e · Black · Brand black; main text on light and dark-theme background.
    color.claro: #f4f4f4 · Off-white · Off-white; light page background and text on dark.
    color.acento: #cd3e19 · Orange · Accent orange (proposal, from KB 14); fills and accents, not text on light (4.44 : 1).
    color.gris-oscuro: #3c3c3b · Dark gray · Dark gray (proposal, from KB 14); secondary text on light.
    color.gris-claro: #dadada · Light gray · Light gray (proposal, from KB 14); secondary text on dark and rules.
    color.blanco: #ffffff · White · White; light card surface and icon detail.
    color.cielo: #8fd3ff · Sky · Sky; light blue for links, focus and primary in dark theme.
    color.ambar: #ff9a62 · Amber · Amber of the website; decoration, not text.
    color.noche: #021620 · Night · Night of the website; very dark header backgrounds.
    color.tinta: #05283a · Ink · Ink of the website; gradient under text over photo and shadows.
    color.icono.solape: #56abe2 · Icon overlap · Transparency overlap of the app icons (0.6 × #8FD3FF + 0.4 × #006EB7).
    color.icono.fondo-oscuro: #262a36 · Dark icon-check background · Dark background of the icon contact sheet.
    color.duotono.sombra: #02161f · Duotone, shadows · Photo duotone shadows (treatment under review).
    color.duotono.medio: #006088 · Duotone, midtones · Photo duotone midtones (treatment under review).
    color.duotono.luz: #e2eef4 · Duotone, highlights · Photo duotone highlights (treatment under review).
    color.primario.50: #f0f8ff · Primary blue 50 · Ramp derived from primary blue (proposal): step 50.
    color.primario.100: #c5e2fe · Primary blue 100 · Ramp derived from primary blue (proposal): step 100.
    color.primario.200: #a3caf0 · Primary blue 200 · Ramp derived from primary blue (proposal): step 200.
    color.primario.300: #82b3e2 · Primary blue 300 · Ramp derived from primary blue (proposal): step 300.
    color.primario.400: #609cd4 · Primary blue 400 · Ramp derived from primary blue (proposal): step 400.
    color.primario.500: #3b85c6 · Primary blue 500 · Ramp derived from primary blue (proposal): step 500.
    color.primario.700: #005189 · Primary blue 700 · Ramp derived from primary blue (proposal): step 700.
    color.primario.800: #00355d · Primary blue 800 · Ramp derived from primary blue (proposal): step 800.
    color.primario.900: #001c35 · Primary blue 900 · Ramp derived from primary blue (proposal): step 900.
    color.marino.50: #eef9ff · Navy 50 · Ramp derived from navy (proposal): step 50.
    color.marino.100: #cfe0ea · Navy 100 · Ramp derived from navy (proposal): step 100.
    color.marino.200: #b1c7d4 · Navy 200 · Ramp derived from navy (proposal): step 200.
    color.marino.300: #94afbe · Navy 300 · Ramp derived from navy (proposal): step 300.
    color.marino.400: #7897a9 · Navy 400 · Ramp derived from navy (proposal): step 400.
    color.marino.500: #5c8094 · Navy 500 · Ramp derived from navy (proposal): step 500.
    color.marino.600: #416980 · Navy 600 · Ramp derived from navy (proposal): step 600.
    color.marino.700: #25536c · Navy 700 · Ramp derived from navy (proposal): step 700.
    color.marino.900: #041d2a · Navy 900 · Ramp derived from navy (proposal): step 900.
    … 22 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")
    12

    Versions

    Published history

    1. v15 2026-11-09 Approved Current

    TecWarden

    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

    TecWarden

    • 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
    • Singular Media

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

      • Singular Ventures
        • the0racle
        • HybridMeM
        • EngArch In development
        • ATLAS In development
        • Finite In development
        • autoWorks In development
        • loombiotech In development
      • 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 © TecWarden

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

    Only essentials I agree