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.
Guiding Business
Purpose, mission, vision and values
Guiding Business
Slogan
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.
The group is the way to create a positive impact in the world
Inherited from The Beacon HoldingInherited from The Beacon Holding
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.
Inherited from The Beacon Holding
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
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
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
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
Logo design (Estudio Nácar)
Do not recreate the logo from scratch, use these.
Logos must only be used in the colors provided.
Closed art: used as is, never recomposed
Ramps, roles and contrasts
#001C35
#00355D
#005189
#006EB7
The brand's primary blue; primary buttons and links on a light background.
#3B85C6
#609CD4
#82B3E2
#A3CAF0
#C5E2FE
#F0F8FF
#041D2A
#003E58
Navy; logo text, highlighted headlines and dark panel background.
#25536C
#416980
#5C8094
#7897A9
#94AFBE
#B1C7D4
#CFE0EA
#EEF9FF
#0E0E0E
Brand black; main text on light and dark-theme background.
#242423
#3C3C3B
Secondary text on light.
#595958
#777776
#979796
#B8B8B8
#DADADA
Secondary text on dark, and rules.
#E7E7E7
#F4F4F4
Off-white; light page background and text on dark.
#9A2503
Error messages only, light theme.
#F49A84
Error messages only, dark theme.
#9A2503
RGB 154, 37, 3
Marginal-use accent: the eyebrow dot and small details; never a background or running text.
#FFFFFF
RGB 255, 255, 255
White; light card surface and icon detail.
#00672C
RGB 0, 103, 44
#6D5000
RGB 109, 80, 0
#7CD591
RGB 124, 213, 145
#E1B75C
RGB 225, 183, 92
#F4F4F4
#FFFFFF
#F0F8FF
#0E0E0E
#3C3C3B
#F4F4F4
#006EB7
#003E58
#006EB7
#777776
#003E58
#00672C
#6D5000
#9A2503
#006EB7
#0E0E0E
#242423
#003E58
#F4F4F4
#DADADA
#0E0E0E
#82B3E2
#609CD4
#82B3E2
#777776
#C5E2FE
#7CD591
#E1B75C
#F49A84
#C5E2FE
Secondary / Light
10.43:1 AAA
Primary / Light
4.87:1 AA
Dark / Light
17.55:1 AAA
Ink / Surface
19.30:1 AAA
Ink / Surface high
17.99:1 AAA
Soft ink / Background
10.04:1 AAA
Soft ink / Surface
11.04:1 AAA
Soft ink / Surface high
10.29:1 AAA
Link / Surface
5.36:1 AA
Link / Surface high
5.00:1 AA
Success / Background
6.41:1 AA
Success / Surface
7.05:1 AAA
Success / Surface high
6.57:1 AA
Warning / Background
6.82:1 AA
Warning / Surface
7.50:1 AAA
Warning / Surface high
6.99:1 AA
Error / Background
7.23:1 AAA
Error / Surface
7.95:1 AAA
Error / Surface high
7.41:1 AAA
Border / Background
4.07:1 AA, large text only
Border / Surface
4.48:1 AA, large text only
Focus / Surface
11.47:1 AAA
Focus / Surface high
10.69:1 AAA
Ink / Background
17.55:1 AAA
Ink / Surface
14.12:1 AAA
Ink / Surface high
10.43:1 AAA
Soft ink / Background
13.80:1 AAA
Soft ink / Surface
11.11:1 AAA
Soft ink / Surface high
8.20:1 AAA
Link / Background
14.41:1 AAA
Link / Surface
11.60:1 AAA
Link / Surface high
8.57:1 AAA
Ink on primary / Primary
8.72:1 AAA
Ink on primary / Primary hover
6.62:1 AA
Success / Background
10.83:1 AAA
Success / Surface
8.71:1 AAA
Success / Surface high
6.43:1 AA
Warning / Background
10.23:1 AAA
Warning / Surface
8.23:1 AAA
Warning / Surface high
6.08:1 AA
Error / Background
9.01:1 AAA
Error / Surface
7.25:1 AAA
Error / Surface high
5.35:1 AA
Primary / Surface
7.02:1 AAA
Border / Background
4.30:1 AA, large text only
Border / Surface
3.46:1 AA, large text only
Light / Primary
4.87:1 AA
Primary / Dark
3.59:1 AA, large text only
Primary / Secondary
2.13:1
The brand forbids it
Secondary / Dark
1.68:1
The brand forbids it
Accent / Surface high
5.18:1
The brand forbids it
Primary / Accent
1.48: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.
Families, specimens and scale
Primary
Guiding Business
400700
Secondary
Singular Beacon
Guiding Business
Singular Beacon
Guiding Business
Singular Beacon
Guiding Business
Singular Beacon
Guiding Business
Singular Beacon
Guiding Business
Singular Beacon
Guiding Business
Singular Beacon
Scale, radii and elevation
00px
22px
44px
Circulo50%
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.
Icon system
The action of a view.
Usage rule A single primary button per view; the rest, secondary or ghost.
<button type="button" class="bb-c-button bb-c-button--primario">Get in touch</button>
A piece of content with title, text and link.
Usage rule One idea per card, and all cards in a row the same height.
Brand
Guiding Business
Read more<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>
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.
Brand
Singular Beacon
Guiding Business
Brand
Singular Beacon
Guiding Business
<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>
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.
<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>
A highlighted sentence with its author.
Usage rule Always with its author; if it cannot be attributed, it is not a quote.
Guiding Business
Singular Beacon
Guiding Business
Singular Beacon
<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>
A figure with what it means.
Usage rule A real figure with its source; no data, no statistic.
191
items published in its design system
191
items published in its design system
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">191</p>
<p class="bb-c-stat__label">items published in its design system</p>
</div>
Questions that open and close without scripts.
Usage rule Questions people really ask, with the answer in the first line.
Guiding Business
Guiding Business
<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>
The close of every page: brand and links.
Usage rule No promotions: identity, legal links and contact.
<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>
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.
<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>
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.
<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>
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.
Guiding Business
Received: the Singular Beacon team will answer you.
It could not be sent. Try again in a few minutes.
<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>
Short labels for state, kind or category.
Usage rule One or two words; never as a button.
Brand Version 4 Current
Brand Version 4 Current
<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 4</span>
<span class="bb-c-badge bb-c-badge--borde">Current</span>
</p>
Data in rows and columns, with header.
Usage rule Only for data that is compared; the header always says what each column is.
| Style | Size | Use |
|---|---|---|
| Title display | 61 px | Titles |
| Title 1 | 49 px | Page or section title |
| Title 2 | 39 px | Subtitle and card title |
| Title 3 | 31 px | Minor title inside a block |
| Title 4 | 25 px | Titles |
| Style | Size | Use |
|---|---|---|
| Title display | 61 px | Titles |
| Title 1 | 49 px | Page or section title |
| Title 2 | 39 px | Subtitle and card title |
| Title 3 | 31 px | Minor title inside a block |
| Title 4 | 25 px | Titles |
<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>
How far something has gone, as a bar and as a figure.
Usage rule Always with the figure in text next to the bar.
Own to the brand in this book92 %
Own to the brand in this book92 %
<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>92 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" aria-label="Own to the brand in this book">
<span class="bb-c-progress__bar" style="width: 92%"></span>
</div>
</div>
A photo of a product or an object, with no background, framed and set on the brand's corporate background.
A product, an object or an illustration. Never a person: team portraits have their own tool.
It removes the background and frames the subject. Odoo sets it on the brand background.
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.
What is published for this audience, as an agent reads it: what is mandatory comes first.
15 / 15 lines within the limit
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.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 Singular Academy; Kit Digital and Kit Consulting (Acelera Pyme).
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.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.
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.
env["sb.brand"].sb_context("singular-beacon", purpose="redactar", language="en_US")
43 / 46 lines within the limit
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 · Ink · Brand black; main text on light and dark-theme background.
color.claro: #f4f4f4 · Paper · Off-white; light page background and text on dark.
color.acento: #9a2503 · Red · Marginal-use accent: the eyebrow dot and small details; never a background or running text.
color.gris-oscuro: #3c3c3b · Dark grey · Secondary text on light.
color.gris-claro: #dadada · Light grey · Secondary text on dark, and rules.
color.blanco: #ffffff · White · White; light card surface and icon detail.
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.
color.acento.300: #f49a84 · Error (dark theme) · Error messages only, dark theme.
color.acento.700: #9a2503 · Error · Error messages only, light theme.
color.neutro.100: #e7e7e7 · Neutral 100 · Neutral ramp between off-white and black (proposal): step 100.
color.neutro.300: #b8b8b8 · Neutral 300 · Neutral ramp between off-white and black (proposal): step 300.
color.neutro.400: #979796 · Neutral 400 · Neutral ramp between off-white and black (proposal): step 400.
color.neutro.500: #777776 · Neutral 500 · Neutral ramp between off-white and black (proposal): step 500.
color.neutro.600: #595958 · Neutral 600 · Neutral ramp between off-white and black (proposal): step 600.
color.neutro.800: #242423 · Neutral 800 · Neutral ramp between off-white and black (proposal): step 800.
color.exito.claro: #00672c · Success (light theme)
color.aviso.claro: #6d5000 · Warning (light theme)
color.exito.oscuro: #7cd591 · Success (dark theme)
… 3 lines cut by the limit, 0 mandatory: request a larger max_chars.
env["sb.brand"].sb_context("singular-beacon", purpose="imagen", language="en_US")