Nuestras Causas · Design system

01

Identity

Purpose, mission, vision and values

What it inherits Inherited from The Beacon Holding

Purpose

El grupo es la forma de crear un impacto positivo en el mundo

Inherited from The Beacon Holding

Pillars

Inherited from The Beacon Holding

Datos para decidir
Personas en el centro
Tecnología como medio
Gestión por proyectos, con márgenes unitarios
Los valores, la visión y la ética profesional que nos guían

Values

Inherited from The Beacon Holding

Impacto Positivo

Actuamos conforme a nuestros valores y nuestro Código Ético, tratamos de forma respetuosa y agradable a todas las partes, tenemos conciencia social y ambiental y una clara determinación de aportar valor construyendo relaciones que cuidamos en el largo plazo.

Bondad, Honestidad, Lealtad y Respeto

Aporte de Valor

Ofrecemos soluciones de alta calidad y trabajamos para que cada euro invertido por nuestros clientes se transforme en valor para su firma. Nos responsabilizamos del ciclo de vida completo de los proyectos operando conforme a los principios de eficiencia y eficacia, comenzando con el final en mente y buscando sinergias y estrategias win-win.

Vocación de Excelencia y Orientación a Resultados

Adaptabilidad

Nuestro sector, así como las necesidades de nuestros clientes están en constante cambio. Somos conscientes, considerados y comprensivos con estas necesidades. Tenemos voluntad de ayudar y lo hacemos siendo flexibles en cuanto a cambios en los requisitos iniciales, plazos y costes.

Flexibilidad, Empatía y Transparencia

Institutional text 1

Digital Branding (Londres, 2015: origen del grupo, no es división)

02

Logo

Variants, clear space and usage

Variants

Colour

Horizontal · Color

Other SVG PNG 1024 px

Claro

Horizontal · Light

Other SVG PNG 1024 px

Colour

Icon · Color

Other SVG PNG 1024 px

Claro

Icon · Light

Other SVG PNG 1024 px

Colour

Stacked · Color

Inherited from The Beacon Holding

Other SVG PNG 1024 px

Claro

Stacked · Light

Inherited from The Beacon Holding

Other SVG PNG 1024 px

03

Color

Pending

Colours

It is not published for this brand yet.

04

Typography

Pending

Typography

It is not published for this brand yet.

05

Iconography

Pending

Icons

It is not published for this brand yet.

06

Components

Standard web parts of the group

Button

A single primary button per view; the rest, secondary or ghost.

Variants, states and code

The action of a view.

Variants

Secondary

Ghost

States

Normal

Hover

Active

Disabled

Usage rule A single primary button per view; the rest, secondary or ghost.

Code

<button type="button" class="bb-c-button bb-c-button--primario">Get in touch</button>

Card

Brand

A shared design system

One idea per card, and all cards in a row the same height.

Variants, states and code

A piece of content with title, text and link.

Variants

Brand

A shared design system

Border

Brand

A shared design system

Accent

States

Brand

A shared design system

Normal

Brand

A shared design system

Hover

Usage rule One idea per card, and all cards in a row the same height.

Code

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

Page header

Brand

Nuestras Causas

A shared design system

A single main title per page, saying what it is about in one line.

Variants, states and code

The opening of a page: eyebrow, title and lead.

Variants

Brand

Nuestras Causas

A shared design system

Accent

Usage rule A single main title per page, saying what it is about in one line.

Code

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

Call to action

One per page, at the end, with a verb that says what happens on click.

Variants, states and code

The close of a page, with a single action.

Variants

Surface

Usage rule One per page, at the end, with a verb that says what happens on click.

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 shared design system
Nuestras Causas

Always with its author; if it cannot be attributed, it is not a quote.

Variants, states and code

A highlighted sentence with its author.

Variants

A shared design system
Nuestras Causas

Surface

Usage rule Always with its author; if it cannot be attributed, it is not a quote.

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">Nuestras Causas</cite>
        </blockquote>

Statistic

16

items published in its design system

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

Variants, states and code

A figure with what it means.

Variants

16

items published in its design system

Accent

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

Code

<div class="bb-c-stat bb-c-stat--superficie">
            <p class="bb-c-stat__value">16</p>
            <p class="bb-c-stat__label">items published in its design system</p>
        </div>

Frequently asked questions

What is Nuestras Causas?

A shared design system

What drives it?

A shared design system

Questions people really ask, with the answer in the first line.

Variants, states and code

Questions that open and close without scripts.

Usage rule Questions people really ask, with the answer in the first line.

Code

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

Footer

No promotions: identity, legal links and contact.

Variants, states and code

The close of every page: brand and links.

Variants

Light

Usage rule No promotions: identity, legal links and contact.

Code

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

Form fields

Every field with a visible label; the error is said in words, not only in colour.

Variants, states and code

Text, email and selection fields with their label, hint and error.

States

Normal

Focus

Error

Disabled

Usage rule Every field with a visible label; the error is said in words, not only in colour.

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="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>

Selection

Topic Nuestras Causas Nuestras Causas

One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.

Variants, states and code

Choosing one option among cards, or several with checkboxes.

Variants

Topic Nuestras Causas

Checkboxes

States

Topic Nuestras Causas Nuestras Causas

Normal

Topic Nuestras Causas Nuestras Causas

Focus

Topic Nuestras Causas Nuestras Causas

Disabled

Usage rule One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.

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">Nuestras Causas</span>
                    <span class="bb-c-option__text">Nuestras Causas</span>
                </label>
        </fieldset>

Alerts

A shared design system

One sentence that says what happened and what to do; colour is never the only signal.

Variants, states and code

A short message about what has just happened.

Variants

Received: the Nuestras Causas team will answer you.

Success

It could not be sent. Try again in a few minutes.

Error

Usage rule One sentence that says what happened and what to do; colour is never the only signal.

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

Brand Version 2 Current

One or two words; never as a button.

Variants, states and code

Short labels for state, kind or category.

Variants

Brand Version 2 Current

Compact

Usage rule One or two words; never as a button.

Code

<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 2</span>
            <span class="bb-c-badge bb-c-badge--borde">Current</span>
        </p>

Table

Style	Size	Use
Nuestras Causas	—	Brand

Only for data that is compared; the header always says what each column is.

Variants, states and code

Data in rows and columns, with header.

Variants

Style	Size	Use
Nuestras Causas	—	Brand

Striped

Usage rule Only for data that is compared; the header always says what each column is.

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>Nuestras Causas</td><td>—</td><td>Brand</td></tr>
            </tbody>
        </table>

Progress

Own to the brand in this book25 %

Always with the figure in text next to the bar.

Variants, states and code

How far something has gone, as a bar and as a figure.

Variants

Own to the brand in this book25 %

Outline

Usage rule Always with the figure in text next to the bar.

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

07

Signature

The brand's email signature

The email signature closes every message from the brand: the logo, the person's name and job title, contact details and, if the brand publishes them, a banner and a legal notice. It is generated from the brand's published version, so it changes when the brand does.

First Last

Job title

Phone · email

Preview with fictitious data

Team members generate their signature from their Odoo Preferences, signed in as an employee.

08

Presentations

This brand's skin and the common structure

Skin

Lowest text contrast: 21.0:1

Composition

Headings: Open Sans Semibold
Text: Open Sans
Margin: 1.25 in
Gap: 0.35 in
Card radius: 0 in
Scale: cover, title, label: 40 · 32 · 24 pt

Download a sample of the deck. Fictitious content, with no client data.

Structure

SB Cover Cover: title, client, reference, date and client logo
SB Agenda Contents, with more than two sections
SB Section Divider, with 4 slides or more in a section
SB Content The included sections, in their order
SB Closing Closing: thanks and contact of the owner

Template layouts

Cover: SB Cover
Contents: SB Agenda
Divider: SB Section
Text: SB Content
Two columns: SB Two Columns
Three columns: SB Three Columns
KPIs: SB KPI Tiles
Table: SB Table
Gantt: SB Gantt
Team: SB Team
Closing: SB Closing
Blank: SB Blank

Sections with their own slides

Goals, Requirements and Scope
Planning and Milestones
Governance Model
Team
Success Stories
Fees
Payment Terms
Terms and Conditions

09

Proposals

The pieces that are printed

Pieces

Cover

Full bleed, with the house art.

Body

The included sections, numbered, with the head and foot of the document system.

Acceptance

Full bleed, with the boxes where the client signs.

Back cover

Full bleed, with the art and the legal foot.

Sections the body can carry

Background
State of the Art
Goals, Requirements and Scope
Planning and Milestones
Methodology
Governance Model
Team
Client Team
Success Stories
Fees
Payment Terms
Terms and Conditions
Custom

10

Templates

Where the brand's templates live

The brand's templates live in the Applications sections: each one shows the real piece.

11

People

Who makes the brand

Pending

Team pending consent

Team members will appear here once they consent to being shown publicly.

12

Downloads

Generated tokens and files

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

Files

Horizontal · Color

Other SVG PNG 1024 px
Horizontal · Light

Other SVG PNG 1024 px
Icon · Color

Other SVG PNG 1024 px
Icon · Light

Other SVG PNG 1024 px
Stacked · Color

Other SVG PNG 1024 px
Stacked · Light

Other SVG PNG 1024 px

13

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: El grupo es la forma de crear un impacto positivo en el mundo
declaracion.origen: Digital Branding (Londres, 2015: origen del grupo, no es división)
valor.pilar.datos-para-decidir: Datos para decidir
valor.pilar.personas-en-el-centro: Personas en el centro
valor.pilar.tecnologia-como-medio: Tecnología como medio
valor.pilar.gestion-por-proyectos: Gestión por proyectos, con márgenes unitarios
valor.pilar.valores-vision-etica: Los valores, la visión y la ética profesional que nos guían
valor.impacto-positivo: Impacto Positivo · Bondad, Honestidad, Lealtad y Respeto · Actuamos conforme a nuestros valores y nuestro Código Ético, tratamos de forma respetuosa y agradable a todas las partes, tenemos conciencia social y ambiental y una clara determinación de aportar valor construyendo relaciones que cuidamos en el largo plazo.
valor.aporte-de-valor: Aporte de Valor · Vocación de Excelencia y Orientación a Resultados · Ofrecemos soluciones de alta calidad y trabajamos para que cada euro invertido por nuestros clientes se transforme en valor para su firma. Nos responsabilizamos del ciclo de vida completo de los proyectos operando conforme a los principios de eficiencia y eficacia, comenzando con el final en mente y buscando sinergias y estrategias win-win.
valor.adaptabilidad: Adaptabilidad · Flexibilidad, Empatía y Transparencia · Nuestro sector, así como las necesidades de nuestros clientes están en constante cambio. Somos conscientes, considerados y comprensivos con estas necesidades. Tenemos voluntad de ayudar y lo hacemos siendo flexibles en cuanto a cambios en los requisitos iniciales, plazos y costes.

How to request it

env["sb.brand"].sb_context("nuestras-causas", purpose="redactar", language="en_US")

14

Versions

Published history

v2 2026-11-05 Approved Current 6 keys changed
v1 2026-11-05 Approved