Skip to Content
Brands
All brands

Design system

Engineering and Architecture powered by AI

  • Version1
  • ScopeBrand
  • Date2026-11-09
  • Part ofSingular Ventures
  • SourceOdoo, published version
01

Identity

Purpose, mission, vision and values

Engineering and Architecture powered by AI

Slogan

Leitmotif

  • The E and the A joined in a geometric composition: engineering and architecture fitting together as parts of the same plan.
What it inherits Inherited from The Beacon Holding

Purpose

The group is the way to create a positive impact in the world

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

02

Logo

Variants, clear space and usage

The E and the A joined in a geometric composition: engineering and architecture fitting together as parts of the same plan.

Leitmotif

Variants

Logo design Carlos Pascual (Singular Beacon)

03

Color

Ramps, roles and contrasts

Palette

Dark #0E0E0E RGB 14, 14, 14
Light #F4F4F4 RGB 244, 244, 244
Primary #C75000 RGB 199, 80, 0 Logo fill on paper.
Light primary #E35C01 RGB 227, 92, 1 Left leg of the A, and the logo on ink.
04

Typography

Families, specimens and scale

Families

Montserrat

Primary

EngArch

400600

05

Iconography
Pending

Icons

It is not published for this brand yet.

06

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

Primary
Secondary
Ghost

States

Hover
Active
Disabled
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

Brand

Engineering and Architecture powered by AI

Engineering and Architecture powered by AI

Read more
Surface

Brand

Engineering and Architecture powered by AI

Engineering and Architecture powered by AI

Read more
Border

Brand

Engineering and Architecture powered by AI

Engineering and Architecture powered by AI

Read more
Accent

States

Brand

Engineering and Architecture powered by AI

Engineering and Architecture powered by AI

Read more
Hover
Code 
<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">Brand</p>
                <h3 class="bb-c-card__title">Engineering and Architecture powered by AI</h3>
                <p class="bb-c-card__text">Engineering and Architecture powered by AI</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

Brand

EngArch

Engineering and Architecture powered by AI

Surface

Brand

EngArch

Engineering and Architecture powered by AI

Accent
Code 
<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Brand</p>
            <h1 class="bb-c-header__title">EngArch</h1>
            <p class="bb-c-header__lede">Engineering and Architecture powered by AI</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

Accent
Surface
Code 
<aside class="bb-c-cta bb-c-cta--acento">
            <h2 class="bb-c-cta__title">Engineering and Architecture powered by AI</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

Engineering and Architecture powered by AI

EngArch
Rule

Engineering and Architecture powered by AI

EngArch
Surface
Code 
<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">Engineering and Architecture powered by AI</p>
            <cite class="bb-c-quote__author">EngArch</cite>
        </blockquote>

Statistic

A figure with what it means.

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

Variants

34

items published in its design system

Surface

34

items published in its design system

Accent
Code 
<div class="bb-c-stat bb-c-stat--superficie">
            <p class="bb-c-stat__value">34</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 EngArch?

Engineering and Architecture powered by AI

What drives it?

Engineering and Architecture powered by AI

Code 
<div class="bb-c-faq">
            <details class="bb-c-faq__item" open="open">
                <summary class="bb-c-faq__q">What is EngArch?</summary>
                <p class="bb-c-faq__a">Engineering and Architecture powered by AI</p>
            </details>
            <details class="bb-c-faq__item">
                <summary class="bb-c-faq__q">What drives it?</summary>
                <p class="bb-c-faq__a">Engineering and Architecture powered by AI</p>
            </details>
        </div>

Footer

The close of every page: brand and links.

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

Variants

Dark
Light
Code 
<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
            <strong class="bb-c-footer__brand">EngArch</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

Focus
Error
Disabled
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="EngArch"/>
            </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>EngArch</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

Topic
Option cards
Topic
Checkboxes

States

Topic
Focus
Topic
Disabled
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">EngArch</span>
                    <span class="bb-c-option__text">EngArch</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

Engineering and Architecture powered by AI

Information

Received: the EngArch team will answer you.

Success
Error
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">Engineering and Architecture powered by AI</p>
        </div>

Badges

Short labels for state, kind or category.

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

Variants

Brand Version 1 Current

Base

Brand Version 1 Current

Compact
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 1</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

StyleSizeUse
EngArch—Brand
Surface
StyleSizeUse
EngArch—Brand
Striped
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>EngArch</td><td>—</td><td>Brand</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 book62 %

Accent

Own to the brand in this book62 %

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

Animations

Construction · EngArch (cover prototype)

Construction · EngArch (cover prototype)
08

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.

09

Downloads

Generated tokens and files
tokens.css Brand CSS variables tokens.json Machine-readable tokens

Files

10

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

11 / 11 lines within the limit

Context 
declaracion.proposito: The group is the way to create a positive impact in the world
declaracion.leitmotiv: The E and the A joined in a geometric composition: engineering and architecture fitting together as parts of the same plan.
declaracion.slogan: Engineering and Architecture powered by AI
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("engarch", purpose="redactar", language="en_US")

Guidelines for image agents

5 / 5 lines within the limit

Context 
color.oscuro: #0e0e0e
color.claro: #f4f4f4
color.primario: #c75000 · Orange on light · Logo fill on paper.
color.primario-claro: #e35c01 · Orange on dark · Left leg of the A, and the logo on ink.
fuente.primaria: Montserrat
How to request it 
env["sb.brand"].sb_context("engarch", purpose="imagen", language="en_US")
11

Versions

Published history
  1. v1 2026-11-09 Approved Current