Brands

All brands

Design system

Version6
ScopeDivision
Date2026-11-09
Part ofThe Beacon Holding
SourceOdoo, published version
Content languagePartly in Spanish

Identity

Purpose, mission, vision and values

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)

Logo

Variants, clear space and usage

Variants

Colour

Horizontal · Color

Other SVG PDF PNG 936 px

Light

Horizontal · Light

Other SVG PDF PNG 936 px

Colour

Stacked · Color

Other SVG PDF PNG 210 px

Light

Stacked · Light

Other SVG PDF PNG 210 px

Colour

Icon · Color

Inherited from The Beacon Holding

Other SVG PNG 1024 px

Light

Icon · Light

Inherited from The Beacon Holding

Other SVG PNG 1024 px

Color

Ramps, roles and contrasts

Palette

White #FFFFFF RGB 255, 255, 255 White; light card surface and icon detail.

Inherited from The Beacon Holding

Sky #8FD3FF RGB 143, 211, 255 Sky; light blue for links, focus and primary in dark theme.

Inherited from The Beacon Holding

Amber #FF9A62 RGB 255, 154, 98 Amber of the website; decoration, not text.

Inherited from The Beacon Holding

Night #021620 RGB 2, 22, 32 Night of the website; very dark header backgrounds.

Inherited from The Beacon Holding

Ink #05283A RGB 5, 40, 58 Ink of the website; gradient under text over photo and shadows.

Inherited from The Beacon Holding

Overlap #56ABE2 RGB 86, 171, 226 Transparency overlap of the app icons (0.6 × #8FD3FF + 0.4 × #006EB7).

Inherited from The Beacon Holding

Dark background #262A36 RGB 38, 42, 54 Dark background of the icon contact sheet.

Inherited from The Beacon Holding

Shadow #02161F RGB 2, 22, 31 Photo duotone shadows (treatment under review).

Inherited from The Beacon Holding

Medium #006088 RGB 0, 96, 136 Photo duotone midtones (treatment under review).

Inherited from The Beacon Holding

Light #E2EEF4 RGB 226, 238, 244 Photo duotone highlights (treatment under review).

Inherited from The Beacon Holding

Light #00672C RGB 0, 103, 44

Inherited from The Beacon Holding

Light #6D5000 RGB 109, 80, 0

Inherited from The Beacon Holding

Dark #7CD591 RGB 124, 213, 145

Inherited from The Beacon Holding

Dark #E1B75C RGB 225, 183, 92

Inherited from The Beacon Holding

Typography

Families, specimens and scale

Families

Tenor Sans

Primary

Singular Investments

400

Inherited from The Beacon Holding

Source Sans 3

Secondary

Singular Investments

300

Inherited from The Beacon Holding

Iconography

Pending

Icons

It is not published for this brand yet.

Components

Standard web parts of the group

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

Division

A shared design system

Surface

Division

A shared design system

Border

Division

A shared design system

Accent

States

Division

A shared design system

Hover

Code

<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">Division</p>
                <h3 class="bb-c-card__title">A shared design system</h3>
                <p class="bb-c-card__text">A shared design system</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

Division

Singular Investments

A shared design system

Surface

Division

Singular Investments

A shared design system

Accent

Code

<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Division</p>
            <h1 class="bb-c-header__title">Singular Investments</h1>
            <p class="bb-c-header__lede">A shared design system</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

Accent

Surface

Code

<aside class="bb-c-cta bb-c-cta--acento">
            <h2 class="bb-c-cta__title">A shared design system</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

A shared design system
Singular Investments

Rule

A shared design system
Singular Investments

Surface

Code

<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">A shared design system</p>
            <cite class="bb-c-quote__author">Singular Investments</cite>
        </blockquote>

Statistic

A figure with what it means.

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

Variants

items published in its design system

Surface

items published in its design system

Accent

Code

<div class="bb-c-stat bb-c-stat--superficie">
            <p class="bb-c-stat__value">36</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 Investments?

A shared design system

What drives it?

A shared design system

Code

<div class="bb-c-faq">
            <details class="bb-c-faq__item" open="open">
                <summary class="bb-c-faq__q">What is Singular Investments?</summary>
                <p class="bb-c-faq__a">A shared design system</p>
            </details>
            <details class="bb-c-faq__item">
                <summary class="bb-c-faq__q">What drives it?</summary>
                <p class="bb-c-faq__a">A shared design system</p>
            </details>
        </div>

Footer

The close of every page: brand and links.

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

Variants

Dark

Light

Code

<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
            <strong class="bb-c-footer__brand">Singular Investments</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 Investments"/>
            </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 Investments</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 Singular Investments Singular Investments

Option cards

Topic Singular Investments

Checkboxes

States

Topic Singular Investments Singular Investments

Focus

Topic Singular Investments Singular Investments

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 Investments</span>
                    <span class="bb-c-option__text">Singular Investments</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

A shared design system

Information

Received: the Singular Investments 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">A shared design system</p>
        </div>

Badges

Short labels for state, kind or category.

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

Variants

Division Version 6 Current

Base

Division Version 6 Current

Compact

Code

<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Division</span>
            <span class="bb-c-badge">Version 6</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

Style	Size	Use
Singular Investments	—	Division

Surface

Style	Size	Use
Singular Investments	—	Division

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>Singular Investments</td><td>—</td><td>Division</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 book11 %

Accent

Own to the brand in this book11 %

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

Brands

The brands under this one and its partners

Singular Ventures Brand

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.

Downloads

Generated tokens and files

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

Files

Horizontal · Color

Other SVG PDF PNG 936 px PNG 1871 px
Horizontal · Light

Other SVG PDF PNG 936 px PNG 1871 px
Stacked · Color

Other SVG PDF PNG 210 px PNG 419 px
Stacked · Light

Other SVG PDF PNG 210 px PNG 419 px
Icon · Color

Other SVG PNG 1024 px
Icon · Light

Other SVG PNG 1024 px

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

10 / 10 lines within the limit

Context

declaracion.proposito: The group is the way to create a positive impact in the world
declaracion.origen: Digital Branding (London, 2015: origin of the group, not a division)
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.
valor.impacto-positivo: Positive Impact · Kindness, Honesty, Loyalty and Respect · 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.
valor.aporte-de-valor: Value Contribution · Vocation for Excellence and Results Orientation · 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.
valor.adaptabilidad: Adaptability · Flexibility, Empathy and Transparency · 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.

How to request it

env["sb.brand"].sb_context("singular-investments", purpose="redactar", language="en_US")

Guidelines for image agents

16 / 16 lines within the limit

Context

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.exito.claro: #00672c · Success (light theme)
color.aviso.claro: #6d5000 · Warning (light theme)
color.exito.oscuro: #7cd591 · Success (dark theme)
color.aviso.oscuro: #e1b75c · Warning (dark theme)
fuente.primaria: Tenor Sans
fuente.secundaria: Source Sans 3

How to request it

env["sb.brand"].sb_context("singular-investments", purpose="imagen", language="en_US")

Versions

Published history

v6 2026-11-09 Approved Current