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 Alba Espinosa (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
Dark gray (proposal, from KB 14); secondary text on light.
#595958
#777776
#979796
#B8B8B8
#DADADA
Light gray (proposal, from KB 14); secondary text on dark and rules.
#E7E7E7
#F4F4F4
Off-white; light page background and text on dark.
#370600
#671400
#9A2503
#CD3E19
Accent orange (proposal, from KB 14); fills and accents, not text on light (4.44 : 1).
#DB6042
#E87D64
#F49A84
#FFB6A4
#FFD6CB
#FFF4F1
#FFFFFF
RGB 255, 255, 255
White; light card surface and icon detail.
#8FD3FF
RGB 143, 211, 255
Sky; light blue for links, focus and primary in dark theme.
#FF9A62
RGB 255, 154, 98
Amber of the website; decoration, not text.
#021620
RGB 2, 22, 32
Night of the website; very dark header backgrounds.
#05283A
RGB 5, 40, 58
Ink of the website; gradient under text over photo and shadows.
#56ABE2
RGB 86, 171, 226
Transparency overlap of the app icons (0.6 × #8FD3FF + 0.4 × #006EB7).
#262A36
RGB 38, 42, 54
Dark background of the icon contact sheet.
#02161F
RGB 2, 22, 31
Photo duotone shadows (treatment under review).
#006088
RGB 0, 96, 136
Photo duotone midtones (treatment under review).
#E2EEF4
RGB 226, 238, 244
Photo duotone highlights (treatment under review).
#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
#CD3E19
#777776
#003E58
#00672C
#6D5000
#9A2503
#006EB7
#0E0E0E
#242423
#003E58
#F4F4F4
#DADADA
#0E0E0E
#8FD3FF
#609CD4
#CD3E19
#777776
#8FD3FF
#7CD591
#E1B75C
#F49A84
#8FD3FF
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
Accent / Background
4.44:1 AA, large text only
Accent / Surface
4.88:1 AA
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
11.88:1 AAA
Link / Surface
9.56:1 AAA
Link / Surface high
7.06: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
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
Light / Primary
4.87:1 AA
Primary / Dark
3.59:1 AA, large text only
White / Accent
4.88:1 AA
Light / Accent
4.44: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
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.
Families, specimens and scale
Primary
Guiding Business
400700
Secondary
Singular Beacon
Tertiary
Guiding Business
400700
61px · 700 · 1.11
Titles
Guiding Business
49px · 700 · 1.14
Page or section title
Singular Beacon
39px · 700 · 1.23
Subtitle and card title
Guiding Business
31px · 700 · 1.29
Minor title inside a block
Singular Beacon
25px · 700 · 1.28
Titles
Guiding Business
20px · 700 · 1.4
Titles
Singular Beacon
16px · 400 · 1.5
Running interface text
Guiding Business
16px · 700 · 1.5
Running interface text
Singular Beacon
14px · 400 · 1.43
Running interface text
Guiding Business
12px · 400 · 1.33
Eyebrows, labels and metadata
Singular Beacon
9.1pt
Guiding Business
6.5pt
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
Standard web parts of the group
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.
209
items published in its design system
209
items published in its design system
<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>
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 15 Current
Brand Version 15 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 15</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 book93 %
Own to the brand in this book93 %
<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>
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.
Generated tokens and files
The context an agent receives
What is published for this audience, as an agent reads it: what is mandatory comes first.
17 / 20 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.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.
env["sb.brand"].sb_context("singular-beacon", purpose="redactar", language="en_US")
41 / 63 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 · 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.
env["sb.brand"].sb_context("singular-beacon", purpose="imagen", language="en_US")
Published history
We use cookies to provide you a better user experience on this website. Cookie Policy