Skip to Content
TecWarden
  • News
  • Sections
  • About us
  • Group
  • 0
  • Follow us
  • Español English
  • Contact
TecWarden
  • 0
    • News
    • Sections
    • About us
    • Group
  • Follow us
  • Español English
  • Contact
Singular Events
Brands
All brands
  • The Beacon Holding
  • Singular Community
  • Nuestras Causas
  • Singular Club
  • The Singular Hub
  • Singular Investments
  • Singular Ventures
  • ATLAS
  • EngArch
  • Finite
  • HybridMeM
  • autoWorks
  • loombiotech
  • the0racle
  • Singular Media
  • Singular Editorial
  • Para Toda una Vida
  • TecWarden
  • Singular Pictures
  • Singular Works
  • Outstarting
  • Polemizando
  • Profesionales Excepcionales
  • Singular Services
  • Digital Branding
  • Singular Beacon
  • Singular Events
  • Singular Jobs
  • The Singular Academy
  • Singular Solutions
  • Observatorio 360º
  • Observatorio de Absentismo
  • Observatorio de Bienestar
  • Observatorio de Compensación
  • Observatorio de Rotación
  • Observatorio de Talento
  • SingularARX
Sign in to see more

    Brand

    • 01 Identity
      • Values

    Foundations

    • 02 Logo
      • Variants
    • 03 Color
      • Palette
    • 04 Typography
      • Families
    • 05 Iconography

    Components

    • 06 Components

    Resources

    • 07 Image generator
    • 08 Downloads
    • 09 For agents
      • Communication style
      • Guidelines for image agents
    • 10 Versions
    Singular Events

    Design system

    • Version13
    • ScopeBrand
    • Date2026-11-09
    • Part ofSingular Services
    • SourceOdoo, published version
    • Content languagePartly in Spanish
    01 Identity Purpose, mission, vision and values 02 Logo Variants, clear space and usage 03 Color Ramps, roles and contrasts 04 Typography Families, specimens and scale 05 Iconography 06 Components Standard web parts of the group 07 Image generator 08 Downloads Generated tokens and files 09 For agents The context an agent receives 10 Versions Published history
    01

    Identity

    Purpose, mission, vision and values

    Leitmotif

    • The «em» of event management, with the brand mark on the e of event: the management that holds the moment up, so the event only has to happen.
    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

    Institutional text 1
    • Digital Branding (London, 2015: origin of the group, not a division)
    02

    Logo

    Variants, clear space and usage

    The «em» of event management, with the brand mark on the e of event: the management that holds the moment up, so the event only has to happen.

    Leitmotif

    Variants

    Colour

    Colour

    Stacked · Color

    Other SVGPNG 1024 px

    Colour

    Colour

    Horizontal · Color

    Other SVGPDFPNG 1109 px

    Light

    Light

    Horizontal · Light

    Other SVGPDFPNG 1110 px

    Light

    Light

    Stacked · Light

    Other SVGPDFPNG 191 px

    Colour

    Colour

    Icon · Color

    Other SVGPDFPNG 151 px

    Light

    Light

    Icon · Light

    Other SVGPDFPNG 151 px

    Logo design Alba Espinosa (Estudio Nácar) and Carlos Pascual (Singular Beacon)

    03

    Color

    Ramps, roles and contrasts

    Palette

    Dark #1D1D1B RGB 29, 29, 27
    Primary #AC0000 RGB 172, 0, 0
    Staff #26CFB9 RGB 38, 207, 185
    Sound light #E6007E RGB 230, 0, 126
    Light #F6F6F6 RGB 246, 246, 246
    White #FFFFFF RGB 255, 255, 255 White; light card surface and icon detail.
    Inherited from The Beacon Holding
    Sky #8FD3FF RGB 143, 211, 255 Sky; light blue for links, focus and primary in dark theme.
    Inherited from The Beacon Holding
    Amber #FF9A62 RGB 255, 154, 98 Amber of the website; decoration, not text.
    Inherited from The Beacon Holding
    Night #021620 RGB 2, 22, 32 Night of the website; very dark header backgrounds.
    Inherited from The Beacon Holding
    Ink #05283A RGB 5, 40, 58 Ink of the website; gradient under text over photo and shadows.
    Inherited from The Beacon Holding
    Overlap #56ABE2 RGB 86, 171, 226 Transparency overlap of the app icons (0.6 × #8FD3FF + 0.4 × #006EB7).
    Inherited from The Beacon Holding
    Dark background #262A36 RGB 38, 42, 54 Dark background of the icon contact sheet.
    Inherited from The Beacon Holding
    Shadow #02161F RGB 2, 22, 31 Photo duotone shadows (treatment under review).
    Inherited from The Beacon Holding
    Medium #006088 RGB 0, 96, 136 Photo duotone midtones (treatment under review).
    Inherited from The Beacon Holding
    Light #E2EEF4 RGB 226, 238, 244 Photo duotone highlights (treatment under review).
    Inherited from The Beacon Holding
    Light #00672C RGB 0, 103, 44
    Inherited from The Beacon Holding
    Light #6D5000 RGB 109, 80, 0
    Inherited from The Beacon Holding
    Dark #7CD591 RGB 124, 213, 145
    Inherited from The Beacon Holding
    Dark #E1B75C RGB 225, 183, 92
    Inherited from The Beacon Holding
    04

    Typography

    Families, specimens and scale

    Families

    Source Sans 3

    Secondary

    Singular Events

    300

    Inherited from The Beacon Holding

    Akzidenz-Grotesk BQ

    Primary

    Singular Events

    300

    05

    Iconography

    Pending

    Icons

    It is not published for this brand yet.

    06

    Components

    Standard web parts of the group

    ButtonCardPage headerCall to actionQuoteStatisticFrequently asked questionsFooterForm fieldsSelectionAlertsBadgesTableProgress

    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

    A shared design system

    A shared design system

    Read more
    Surface

    Brand

    A shared design system

    A shared design system

    Read more
    Border

    Brand

    A shared design system

    A shared design system

    Read more
    Accent

    States

    Brand

    A shared design system

    A shared design system

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

    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

    Singular Events

    A shared design system

    Surface

    Brand

    Singular Events

    A shared design system

    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">Singular Events</h1>
                <p class="bb-c-header__lede">A shared design system</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

    A shared design system

    Get in touch
    Accent

    A shared design system

    Get in touch
    Surface
    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 highlighted sentence with its author.

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

    Variants

    A shared design system

    Singular Events
    Rule

    A shared design system

    Singular Events
    Surface
    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">Singular Events</cite>
            </blockquote>

    Statistic

    A figure with what it means.

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

    Variants

    45

    items published in its design system

    Surface

    45

    items published in its design system

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

    A shared design system

    What drives it?

    A shared design system

    Code
    <div class="bb-c-faq">
                <details class="bb-c-faq__item" open="open">
                    <summary class="bb-c-faq__q">What is Singular Events?</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

    The close of every page: brand and links.

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

    Variants

    Singular Events
    • Legal notice
    • Privacy
    • Contact
    Dark
    Singular Events
    • Legal notice
    • Privacy
    • Contact
    Light
    Code
    <footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
                <strong class="bb-c-footer__brand">Singular Events</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="Singular Events"/>
                </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 Events</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">Singular Events</span>
                        <span class="bb-c-option__text">Singular Events</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

    A shared design system

    Information

    Received: the Singular Events team will answer you.

    Success

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

    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">A shared design system</p>
            </div>

    Badges

    Short labels for state, kind or category.

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

    Variants

    Brand Version 13 Current

    Base

    Brand Version 13 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 13</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
    Singular Events—Brand
    Surface
    StyleSizeUse
    Singular Events—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>Singular Events</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 book36 %

    Accent

    Own to the brand in this book36 %

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

    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.

    08

    Downloads

    Generated tokens and files

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

    Files

    • Stacked · Color

      Other SVGPNG 1024 px

    • Horizontal · Color

      Other SVGPDFPNG 1109 pxPNG 2218 px

    • Horizontal · Light

      Other SVGPDFPNG 1110 pxPNG 2218 px

    • Stacked · Light

      Other SVGPDFPNG 191 pxPNG 382 px

    • Icon · Color

      Other SVGPDFPNG 151 pxPNG 302 px

    • Icon · Light

      Other SVGPDFPNG 151 pxPNG 302 px

    09

    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 «em» of event management, with the brand mark on the e of event: the management that holds the moment up, so the event only has to happen.
    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.
    How to request it
    env["sb.brand"].sb_context("singular-events", purpose="redactar", language="en_US")

    Guidelines for image agents

    21 / 21 lines within the limit

    Context
    color.oscuro: #1d1d1b
    color.primario: #ac0000
    color.vertical.staff: #26cfb9
    color.vertical.sound-light: #e6007e
    color.claro: #f6f6f6
    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.secundaria: Source Sans 3
    fuente.primaria: Akzidenz-Grotesk BQ
    How to request it
    env["sb.brand"].sb_context("singular-events", purpose="imagen", language="en_US")
    10

    Versions

    Published history

    1. v13 2026-11-09 Approved Current

    TecWarden

    Innovation and technology, all in one place.

    Innovation and technology news in Spanish.

    • +34 910 47 90 47
    • [email protected]
    • Av. Ciudad de Barcelona 132, 1ª, 28007 Madrid

    Follow us

    The publication

    • Sections
    • The idea
    • Where it stands

    TecWarden

    • About us
    • Who is behind it
    • Work with us

    Resources

    • The group
    • Singular Media
    • The group's five divisions

    Contact

    • Contact
    • Pitch a story

    Part of The Beacon Holding

    Singular Beacon, S.L. · Tax ID (CIF) ES B67869644 · Registered with the Registro Mercantil de Madrid (Madrid Commercial Registry), Tomo 42.891, Folio 36, Inscripción 1, Hoja M-758246.

    • Privacy
    • Cookies
    • Terms of use
    The Beacon Holding

    Breadth of vision, unity of purpose

    • Singular Services

      • Singular Beacon
      • The Singular Academy
      • Singular Jobs In development
      • Singular Events
    • Singular Solutions

      • Odoo Apps
      • Observatorio 360º
        • Observatorio de Bienestar
        • Observatorio de Rotación
        • Observatorio de Compensación
        • Observatorio de Talento
        • Observatorio de Absentismo
      • SingularARX In development
    • Singular Media

      • Singular Works
        • Profesionales Excepcionales
        • Outstarting
        • Polemizando
      • Singular Editorial
        • Para Toda una Vida
        • TecWarden
      • Singular Pictures In development
    • Singular Investments

      • Singular Ventures
        • the0racle
        • HybridMeM
        • EngArch In development
        • ATLAS In development
        • Finite In development
        • autoWorks In development
        • loombiotech In development
      • Investor relations
        • Singular Beacon, S.L.
        • Digital Branding Ltd
      • Open rounds
    • Singular Community

      • Singular Community
      • Nuestras Causas
      • The Singular Hub
      • Singular Club
    Español | English
    Copyright © TecWarden

    We use cookies to provide you a better user experience on this website. Cookie Policy

    Only essentials I agree