Purpose
The group is the way to create a positive impact in the world
Inherited from The Beacon HoldingDesign system
- Version14
- ScopeObservatory
- Date2026-11-09
- Part ofObservatorio 360º
- SourceOdoo, published version
Identity
Purpose, mission, vision and values
What it inherits 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
Logo design (Estudio Nácar)
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
Inherited from The Beacon Holding
#FFFFFF
RGB 255, 255, 255
White; light card surface and icon detail.
Sky
Inherited from The Beacon Holding
#8FD3FF
RGB 143, 211, 255
Sky; light blue for links, focus and primary in dark theme.
Amber
Inherited from The Beacon Holding
#FF9A62
RGB 255, 154, 98
Amber of the website; decoration, not text.
Night
Inherited from The Beacon Holding
#021620
RGB 2, 22, 32
Night of the website; very dark header backgrounds.
Ink
Inherited from The Beacon Holding
#05283A
RGB 5, 40, 58
Ink of the website; gradient under text over photo and shadows.
Overlap
Inherited from The Beacon Holding
#56ABE2
RGB 86, 171, 226
Transparency overlap of the app icons (0.6 × #8FD3FF + 0.4 × #006EB7).
Dark background
Inherited from The Beacon Holding
#262A36
RGB 38, 42, 54
Dark background of the icon contact sheet.
Shadow
Inherited from The Beacon Holding
#02161F
RGB 2, 22, 31
Photo duotone shadows (treatment under review).
Medium
Inherited from The Beacon Holding
#006088
RGB 0, 96, 136
Photo duotone midtones (treatment under review).
Light
Inherited from The Beacon Holding
#E2EEF4
RGB 226, 238, 244
Photo duotone highlights (treatment under review).
Light
Inherited from The Beacon Holding
#00672C
RGB 0, 103, 44
Light
Inherited from The Beacon Holding
#6D5000
RGB 109, 80, 0
Dark
Inherited from The Beacon Holding
#7CD591
RGB 124, 213, 145
Dark
Inherited from The Beacon Holding
#E1B75C
RGB 225, 183, 92
Typography
Families, specimens and scale
Families
Source Sans 3
Secondary
Observatorio de Bienestar
300
Inherited from The Beacon HoldingSource Sans 3
Primary
Observatorio de Bienestar
400
Iconography
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
States
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
States
Observatory
A shared design system
A shared design system
Read moreCode
<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 Bienestar
A shared design system
Observatory
Observatorio de Bienestar
A shared design system
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 Bienestar</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
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 Bienestar
A shared design system
Observatorio de Bienestar
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 Bienestar</cite>
</blockquote>Statistic
A figure with what it means.
Usage rule A real figure with its source; no data, no statistic.
Variants
47
items published in its design system
47
items published in its design system
Code
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">47</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 Bienestar?
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 Bienestar?</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
Code
<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
<strong class="bb-c-footer__brand">Observatorio de Bienestar</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
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 Bienestar"/>
</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 Bienestar</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
States
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 Bienestar</span>
<span class="bb-c-option__text">Observatorio de Bienestar</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
Received: the Observatorio de Bienestar team will answer you.
It could not be sent. Try again in a few minutes.
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 14 Current
Observatory Version 14 Current
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 14</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 |
|---|---|---|
| Observatorio de Bienestar | — | Observatory |
| Style | Size | Use |
|---|---|---|
| Observatorio de Bienestar | — | Observatory |
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 Bienestar</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 book38 %
Own to the brand in this book38 %
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>38 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="38" aria-label="Own to the brand in this book">
<span class="bb-c-progress__bar" style="width: 38%"></span>
</div>
</div>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
Files
- Horizontal · Color
- Horizontal · Light
- Horizontal · Black
- Stacked · Color
- Stacked · Light
- Stacked · Black
-
Icon · Color
Other SVGPNG 1024 px
-
Icon · Light
Other SVGPNG 1024 px
-
Icon · Black
Other SVGPNG 1024 px
For agents
Content in SpanishThe 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-bienestar", 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 3How to request it
env["sb.brand"].sb_context("observatorio-de-bienestar", purpose="imagen", language="en_US")Versions
Published history
- v14 2026-11-09 Approved Current