Skip to Content

Design system

Real stories · Honest voices · No bullshit

  • Version1
  • ScopeShow
  • Date2026-11-09
  • Part ofSingular Works
  • SourceOdoo, published version
  • Content languagePartly in Spanish
01

Identity

Purpose, mission, vision and values

Part of Singular Works

Real stories · Honest voices · No bullshit

Slogan

Values

Real stories

What is told has happened: a specific project and a specific person. It is the first clause of the tagline and the meaning of “the projects and those who start them up”.

Each piece starts from a named project and from the person who started it. Cases are not invented nor several merged into one. The fact (when, with what, what happened) comes before the adjective.

Honest voices

The one who starts up speaks, in their own words, and also says what went wrong or was not known. It is the second clause of the tagline and the meaning of “starting up, told by the one who starts up”.

The project's person is the one who tells, in the first person. The mistake, the doubt and what remains unresolved are left in. Quotation marks are reserved for literal quotes. The brand does not speak for them.

No bullshit

No posturing, no jargon and no inflated success story. It is the third clause of the tagline.

Direct, concrete sentences. If a sentence could be in a brochure, it is rewritten. No formulas or results are promised. Inflated words (“disruptive”, “benchmark”, “inspiring”) and the press-release tone are avoided.

Leitmotif

  • The asterisk: the small print of real entrepreneurship. It points to what never makes the headline, the effort, the risk and the failures, which is what really counts.

Institutional text

  • the projects and those who start them up; a Singular Works program — content label
02

Logo

Variants, clear space and usage

The asterisk: the small print of real entrepreneurship. It points to what never makes the headline, the effort, the risk and the failures, which is what really counts.

Leitmotif

Variants

Logo design Carlos Pascual (Singular Beacon)

Forbidden uses

Not like thisDo not distort or rotate the logo; do not add shadow, outline or effect to it; do not separate the S from the rest of the name or move the asterisk. On photography it only fits on a flat area where the chosen tone meets 4.5:1 with what is behind it.
  • On a light background, never the .W or .O.B variants (cream and white on #F4F4F4 are unreadable); on a dark background, never the color ones or the .B ones.

03

Color

Ramps, roles and contrasts

Ramps

Primary

900 #150D00
800 #302203
700 #4D3805
600 #6D510B
Secondary #8C6B20 Exact from Illustrator (color.secundario). Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
400 #AF8932
Source colour #D4A843 Exact from Illustrator (color.primario). Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
200 #E7C889
100 #F8E8C9
50 #FFF9EC

Neutral

Dark #0E0E0E Exact from Illustrator (color.oscuro). Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.
800 #242424
700 #3C3C3C
600 #555555
Grey #707070 Field borders and dividers with a function. Derived proposal.
400 #8C8C8C
Primary monochrome #AAAAAA Exact from Illustrator (color.primario-monocromo). Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.
200 #C7C7C7
100 #E5E5E5
Light #F4F4F4 Exact from Illustrator (color.claro). Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.
White #FFFFFF Derived pure white: light-theme surface. Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.

Cream

900 #12100D
800 #2A2620
700 #433E35
600 #5E574C
500 #7A7265
400 #978F81
300 #B5ADA0
200 #D0CABF
Source colour #EDE8E0 Exact from Illustrator (color.crema). Cream ramp. Step 100 = color.crema (#EDE8E0), exact from Illustrator; the others, derived.
50 #FAF8F3

Success

500 #1B7B3C
300 #66BE7B

Warning

500 #9E5A0F
300 #EE9748

Error

500 #C13C36
300 #FD8C80

Roles

Light

  • Background #F4F4F4
  • Surface #FFFFFF
  • Surface high #FFFFFF
  • Ink #0E0E0E
  • Soft ink #707070
  • Ink on primary #F4F4F4
  • Primary #8C6B20
  • Primary hover #6D510B
  • Accent #8C6B20
  • Border #707070
  • Focus #8C6B20
  • Success #1B7B3C
  • Warning #9E5A0F
  • Error #C13C36
  • Link #0E0E0E

Dark

  • Background #0E0E0E
  • Surface #242424
  • Surface high #3C3C3C
  • Ink #EDE8E0
  • Soft ink #AAAAAA
  • Ink on primary #0E0E0E
  • Primary #D4A843
  • Primary hover #E7C889
  • Accent #D4A843
  • Border #707070
  • Focus #D4A843
  • Success #66BE7B
  • Warning #EE9748
  • Error #FD8C80
  • Link #EDE8E0

Contrasts

Light theme

Aa

Dark / Light

17.55:1 AAA

Aa

Secondary / Light

4.50:1 AA

Aa

Grey / Light

4.50:1 AA

Aa

Cream / Dark

15.82:1 AAA

Aa

Primary / Dark

8.71:1 AAA

Aa

Primary monochrome / Dark

8.30:1 AAA

Aa

Ink / Surface

19.30:1 AAA

Aa

Soft ink / Surface

4.95:1 AA

Aa

Ink on primary / Primary hover

6.74:1 AA

Aa

Success / Background

4.83:1 AA

Aa

Success / Surface

5.32:1 AA

Aa

Warning / Background

4.86:1 AA

Aa

Warning / Surface

5.35:1 AA

Aa

Error / Background

4.81:1 AA

Aa

Error / Surface

5.29:1 AA

Aa

Focus / Surface

4.95:1 AA

Dark theme

Aa

Ink / Background

15.82:1 AAA

Aa

Ink / Surface

12.72:1 AAA

Aa

Ink / Surface high

9.04:1 AAA

Aa

Soft ink / Background

8.30:1 AAA

Aa

Soft ink / Surface

6.68:1 AA

Aa

Soft ink / Surface high

4.74:1 AA

Aa

Ink on primary / Primary

8.71:1 AAA

Aa

Ink on primary / Primary hover

11.96:1 AAA

Aa

Success / Background

8.47:1 AAA

Aa

Success / Surface

6.81:1 AA

Aa

Success / Surface high

4.84:1 AA

Aa

Warning / Background

8.41:1 AAA

Aa

Warning / Surface

6.76:1 AA

Aa

Warning / Surface high

4.80:1 AA

Aa

Error / Background

8.49:1 AAA

Aa

Error / Surface

6.82:1 AA

Aa

Error / Surface high

4.85:1 AA

Border / Background

3.89:1 AA, large text only

Border / Surface

3.13:1 AA, large text only

Aa

Focus / Surface

7.00:1 AAA

Do not use

  • Do not use #D4A843 on #F4F4F4: contrast 2.01:1, below AA.

  • Do not use #AAAAAA on #F4F4F4: contrast 2.11:1, below AA.

  • Do not use #8C6B20 on #0E0E0E: contrast 3.89:1, below AA.

  • Do not use #707070 on #0E0E0E: contrast 3.89:1, below AA.

04

Typography

Families, specimens and scale

Families

Barlow Condensed

Primary

Outstarting

400800

Styles

Display 61px · 700 · 1 Covers, title cards and big figures

Real stories · Honest voices · No bullshit

Title 1 49px · 700 · 1.05 Page or section title

Outstarting

Title 2 39px · 700 · 1.1 Subtitle and card title

Real stories · Honest voices · No bullshit

Title 3 31px · 700 · 1.15 Minor title inside a block

Outstarting

Title 4 25px · 700 · 1.2 Titles

Real stories · Honest voices · No bullshit

Title 5 20px · 700 · 1.25 Titles

Outstarting

Body l 20px · 400 · 1.5 Running interface text

Real stories · Honest voices · No bullshit

Body 16px · 400 · 1.5 Running interface text

Outstarting

Body s 14px · 400 · 1.45 Notes, captions and secondary text

Real stories · Honest voices · No bullshit

Label 12px · 700 · 1.35 Eyebrows, labels and metadata

Outstarting

Slogan 14px · 400 · 1.3

Real stories · Honest voices · No bullshit

05

Spacing and shape

Scale, radii and elevation

Radii

00px
22px
44px
Marco5.55%

Elevation

1 0 1px 2px rgba(14,14,14,0.12)
2 0 4px 12px rgba(14,14,14,0.16)
3 0 12px 32px rgba(14,14,14,0.24)

On a light surface, so the shadow shows in any theme.

06

Iconography

Pending

Icons

It is not published for this brand yet.

07

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

Show

Real stories · Honest voices · No bullshit

Real stories · Honest voices · No bullshit

Read more
Surface

Show

Real stories · Honest voices · No bullshit

Real stories · Honest voices · No bullshit

Read more
Border

Show

Real stories · Honest voices · No bullshit

Real stories · Honest voices · No bullshit

Read more
Accent

States

Show

Real stories · Honest voices · No bullshit

Real stories · Honest voices · No bullshit

Read more
Hover
Code
<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">Show</p>
                <h3 class="bb-c-card__title">Real stories · Honest voices · No bullshit</h3>
                <p class="bb-c-card__text">Real stories · Honest voices · No bullshit</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

Show

Outstarting

Real stories · Honest voices · No bullshit

Surface

Show

Outstarting

Real stories · Honest voices · No bullshit

Accent
Code
<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Show</p>
            <h1 class="bb-c-header__title">Outstarting</h1>
            <p class="bb-c-header__lede">Real stories · Honest voices · No bullshit</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">Real stories · Honest voices · No bullshit</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

Real stories · Honest voices · No bullshit

Outstarting
Rule

Real stories · Honest voices · No bullshit

Outstarting
Surface
Code
<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">Real stories · Honest voices · No bullshit</p>
            <cite class="bb-c-quote__author">Outstarting</cite>
        </blockquote>

Statistic

A figure with what it means.

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

Variants

133

items published in its design system

Surface

133

items published in its design system

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

Real stories · Honest voices · No bullshit

What drives it?

Real stories · Honest voices · No bullshit

Code
<div class="bb-c-faq">
            <details class="bb-c-faq__item" open="open">
                <summary class="bb-c-faq__q">What is Outstarting?</summary>
                <p class="bb-c-faq__a">Real stories · Honest voices · No bullshit</p>
            </details>
            <details class="bb-c-faq__item">
                <summary class="bb-c-faq__q">What drives it?</summary>
                <p class="bb-c-faq__a">Real stories · Honest voices · No bullshit</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">Outstarting</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="Outstarting"/>
            </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>Real stories</option><option>Honest voices</option><option>No bullshit</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">Real stories</span>
                    <span class="bb-c-option__text">Outstarting</span>
                </label><label class="bb-c-option">
                    <input type="radio" name="bb-c-choice-normal"/>
                    <span class="bb-c-option__title">Honest voices</span>
                    <span class="bb-c-option__text">Outstarting</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

Real stories · Honest voices · No bullshit

Information

Received: the Outstarting 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">Real stories · Honest voices · No bullshit</p>
        </div>

Badges

Short labels for state, kind or category.

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

Variants

Show Version 1 Current Real storiesHonest voices

Base

Show Version 1 Current Real storiesHonest voices

Compact
Code
<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Show</span>
            <span class="bb-c-badge">Version 1</span>
            <span class="bb-c-badge bb-c-badge--borde">Current</span>
            <span class="bb-c-badge bb-c-badge--borde">Real stories</span><span class="bb-c-badge bb-c-badge--borde">Honest voices</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
Display61 pxCovers, title cards and big figures
Title 149 pxPage or section title
Title 239 pxSubtitle and card title
Title 331 pxMinor title inside a block
Title 425 pxTitles
Surface
StyleSizeUse
Display61 pxCovers, title cards and big figures
Title 149 pxPage or section title
Title 239 pxSubtitle and card title
Title 331 pxMinor title inside a block
Title 425 pxTitles
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>Display</td><td><code>61 px</code></td><td>Covers, title cards and big figures</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>

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

Accent

Own to the brand in this book100 %

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

Audiovisual

Podcast, video and sound

Videos

09

Animations

Outstarting — Intro

Outstarting — Intro
10

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.

11

Downloads

Generated tokens and files

Files

12

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

6 / 6 lines within the limit

Context
declaracion.slogan: Real stories · Honest voices · No bullshit
declaracion.institutional: the projects and those who start them up; a Singular Works program — content label
declaracion.leitmotiv: The asterisk: the small print of real entrepreneurship. It points to what never makes the headline, the effort, the risk and the failures, which is what really counts.
valor.real-stories: Real stories · Each piece starts from a named project and from the person who started it. Cases are not invented nor several merged into one. The fact (when, with what, what happened) comes before the adjective. · What is told has happened: a specific project and a specific person. It is the first clause of the tagline and the meaning of “the projects and those who start them up”.
valor.honest-voices: Honest voices · The project's person is the one who tells, in the first person. The mistake, the doubt and what remains unresolved are left in. Quotation marks are reserved for literal quotes. The brand does not speak for them. · The one who starts up speaks, in their own words, and also says what went wrong or was not known. It is the second clause of the tagline and the meaning of “starting up, told by the one who starts up”.
valor.no-bullshit: No bullshit · Direct, concrete sentences. If a sentence could be in a brochure, it is rewritten. No formulas or results are promised. Inflated words (“disruptive”, “benchmark”, “inspiring”) and the press-release tone are avoided. · No posturing, no jargon and no inflated success story. It is the third clause of the tagline.
How to request it
env["sb.brand"].sb_context("outstarting", purpose="redactar", language="en_US")

Guidelines for image agents

20 / 45 lines within the limit

Context
NEVER accessibility color.prohibido.1: Do not use #D4A843 on #F4F4F4: contrast 2.01:1, below AA.
NEVER accessibility color.prohibido.2: Do not use #AAAAAA on #F4F4F4: contrast 2.11:1, below AA.
NEVER accessibility color.prohibido.3: Do not use #8C6B20 on #0E0E0E: contrast 3.89:1, below AA.
NEVER accessibility color.prohibido.4: Do not use #707070 on #0E0E0E: contrast 3.89:1, below AA.
NEVER logo directriz.logo.never.sobre-fondo-claro-nunca-las-variantes: On a light background, never the .W or .O.B variants (cream and white on #F4F4F4 are unreadable); on a dark background, never the color ones or the .B ones. (Deduced from each variant's colors: cream letters #EDE8E0 on #F4F4F4 give a contrast below 1.2:1 (calculated).)
NEVER logo directriz.logo.never.no-deformar-ni-girar-el-logotipo: Do not distort or rotate the logo; do not add shadow, outline or effect to it; do not separate the S from the rest of the name or move the asterisk. On photography it only fits on a flat area where the chosen tone meets 4.5:1 with what is behind it. (Consequence of “not redrawn or recolored”: each variant is a closed file. The contrast condition applies to the letters, which are what is read.)
color.primario.50: #fff9ec · Gold 50 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.100: #f8e8c9 · Gold 100 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.200: #e7c889 · Gold 200 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario: #d4a843 · Gold · Exact from Illustrator (color.primario). Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.400: #af8932 · Gold 400 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.secundario: #8c6b20 · Dark gold · Exact from Illustrator (color.secundario). Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.600: #6d510b · Gold 600 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.700: #4d3805 · Gold 700 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.800: #302203 · Gold 800 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.primario.900: #150d00 · Gold 900 · Derived in OKLCH. Gold ramp. Step 300 = color.primario (#D4A843) and step 500 = color.secundario (#8C6B20), exact from Illustrator; the others, derived.
color.claro: #f4f4f4 · Off-white · Exact from Illustrator (color.claro). Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.
color.neutro.100: #e5e5e5 · Neutral 100 · Derived in OKLCH. Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.
color.neutro.200: #c7c7c7 · Neutral 200 · Derived in OKLCH. Neutral ramp. Steps 50, 300, 500 and 900 = color.claro, color.primario-monocromo, color.gris and color.oscuro, exact from Illustrator; the others, derived.
color.gris: #707070 · Gray · Field borders and dividers with a function. Derived proposal.
… 25 lines cut by the limit, 0 mandatory: request a larger max_chars.
How to request it
env["sb.brand"].sb_context("outstarting", purpose="imagen", language="en_US")
13

Versions

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