Our goal is to back ideas that drive social progress and turn them into real projects. At Nuestras Causas we want to encourage and foster initiatives that make our world a better place. Size does not matter: however small, any gesture made out of kindness has a positive impact.
Purpose, mission, vision and values
Our goal is to back ideas that drive social progress and turn them into real projects. At Nuestras Causas we want to encourage and foster initiatives that make our world a better place. Size does not matter: however small, any gesture made out of kindness has a positive impact.
They say the flutter of a butterfly's wings can cause a hurricane on the other side of the world. The philosophy that moves us is the impact small projects have on the world. We believe that with care, dedication and commitment we can make a positive contribution to future generations.
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
Logo design (Estudio Nácar)
Ramps, roles and contrasts
#2F2D2A
RGB 47, 45, 42
#EFEAE0
RGB 239, 234, 224
#0E0E0E
RGB 14, 14, 14
#F4F4F4
RGB 244, 244, 244
#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
Families, specimens and scale
Primary
Nuestras Causas
400700
Secondary
Nuestras Causas
Tertiary
Nuestras Causas
400700
It is not published for this brand yet.
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
A shared design system
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">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>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
Nuestras Causas
A shared design system
Brand
Nuestras Causas
A shared design system
<header class="bb-c-header bb-c-header--superficie">
<p class="bb-c-header__over">Brand</p>
<h1 class="bb-c-header__title">Nuestras Causas</h1>
<p class="bb-c-header__lede">A shared design system</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">A shared design system</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.
A shared design system
Nuestras Causas
A shared design system
Nuestras Causas
<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">Nuestras Causas</cite>
</blockquote>A figure with what it means.
Usage rule A real figure with its source; no data, no statistic.
44
items published in its design system
44
items published in its design system
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">44</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.
A shared design system
A shared design system
<div class="bb-c-faq">
<details class="bb-c-faq__item" open="open">
<summary class="bb-c-faq__q">What is Nuestras Causas?</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>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">Nuestras Causas</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="Nuestras Causas"/>
</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>Nuestras Causas</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">Nuestras Causas</span>
<span class="bb-c-option__text">Nuestras Causas</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.
A shared design system
Received: the Nuestras Causas 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">A shared design system</p>
</div>Short labels for state, kind or category.
Usage rule One or two words; never as a button.
Brand Version 12 Current
Brand Version 12 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 12</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 |
|---|---|---|
| Nuestras Causas | — | Brand |
| Style | Size | Use |
|---|---|---|
| Nuestras Causas | — | Brand |
<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>Nuestras Causas</td><td>—</td><td>Brand</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 book55 %
Own to the brand in this book55 %
<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>55 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55" aria-label="Own to the brand in this book">
<span class="bb-c-progress__bar" style="width: 55%"></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
Other SVGPNG 1024 px
Other SVGPNG 1024 px
Other SVGPNG 1024 px
Other SVGPNG 1024 px
The context an agent receives
What is published for this audience, as an agent reads it: what is mandatory comes first.
12 / 12 lines within the limit
declaracion.proposito: The group is the way to create a positive impact in the world
declaracion.mision: Our goal is to back ideas that drive social progress and turn them into real projects. At Nuestras Causas we want to encourage and foster initiatives that make our world a better place. Size does not matter: however small, any gesture made out of kindness has a positive impact.
declaracion.vision: They say the flutter of a butterfly's wings can cause a hurricane on the other side of the world. The philosophy that moves us is the impact small projects have on the world. We believe that with care, dedication and commitment we can make a positive contribution to future generations.
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.env["sb.brand"].sb_context("nuestras-causas", purpose="redactar", language="en_US")21 / 21 lines within the limit
color.primario: #2f2d2a
color.crema: #efeae0
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.primaria: Open Sans
fuente.secundaria: Assistant
fuente.terciaria: Arialenv["sb.brand"].sb_context("nuestras-causas", purpose="imagen", language="en_US")Published history