Skip to Content
Brands
All brands

Design system

  • Version13
  • ScopeObservatory
  • Date2026-11-09
  • Part ofObservatorio 360º
  • SourceOdoo, published version
01

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)
02

Logo

Variants, clear space and usage

Variants

03

Color

Ramps, roles and contrasts

Palette

Secondary #26343B RGB 38, 52, 59
Primary #95C11F RGB 149, 193, 31
Deep primary #577600 RGB 87, 118, 0
Light primary #CFF270 RGB 207, 242, 112
Dark primary #769C0E RGB 118, 156, 14
Dark #0E0E0E RGB 14, 14, 14
Light #F4F4F4 RGB 244, 244, 244
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
04

Typography

Families, specimens and scale

Families

Source Sans 3

Secondary

Observatorio de Talento

300

Inherited from The Beacon Holding

Source Sans 3

Primary

Observatorio de Talento

400

05

Iconography

Pending

Icons

It is not published for this brand yet.

06

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

Observatory

A shared design system

A shared design system

Read more
Surface

Observatory

A shared design system

A shared design system

Read more
Border

Observatory

A shared design system

A shared design system

Read more
Accent

States

Observatory

A shared design system

A shared design system

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

Observatory

Observatorio de Talento

A shared design system

Surface

Observatory

Observatorio de Talento

A shared design system

Accent
Code 
<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Observatory</p>
            <h1 class="bb-c-header__title">Observatorio de Talento</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

Observatorio de Talento
Rule

A shared design system

Observatorio de Talento
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">Observatorio de Talento</cite>
        </blockquote>

Statistic

A figure with what it means.

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

Variants

46

items published in its design system

Surface

46

items published in its design system

Accent
Code 
<div class="bb-c-stat bb-c-stat--superficie">
            <p class="bb-c-stat__value">46</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 Observatorio de Talento?

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 Observatorio de Talento?</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">Observatorio de Talento</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="Observatorio de Talento"/>
            </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>Observatorio de Talento</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">Observatorio de Talento</span>
                    <span class="bb-c-option__text">Observatorio de Talento</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 Observatorio de Talento team will answer you.

Success
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

Observatory Version 13 Current

Base

Observatory Version 13 Current

Compact
Code 
<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Observatory</span>
            <span class="bb-c-badge">Version 13</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
Observatorio de Talento—Observatory
Surface
StyleSizeUse
Observatorio de Talento—Observatory
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>Observatorio de Talento</td><td>—</td><td>Observatory</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 book37 %

Accent

Own to the brand in this book37 %

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

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.

08

Downloads

Generated tokens and files

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

Files

09

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("observatorio-de-talento", purpose="redactar", language="en_US")

Guidelines for image agents

23 / 23 lines within the limit

Context 
color.secundario: #26343b
color.primario: #95c11f
color.primario-profundo: #577600
color.primario-claro: #cff270
color.primario-oscuro: #769c0e
color.oscuro: #0e0e0e
color.claro: #f4f4f4
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.secundaria: Source Sans 3
fuente.primaria: Source Sans 3
How to request it 
env["sb.brand"].sb_context("observatorio-de-talento", purpose="imagen", language="en_US")
10

Versions

Published history

  1. v13 2026-11-09 Approved Current