Purpose, mission, vision and values
Part of Singular Works
“debate of ideas with rigor” (KB 2220). What is claimed is backed up.
Relevant claims are backed by data or evidence; what cannot be sustained is stated as opinion. The format includes a fallacy bell and a guide, “Argumentative Fallacies”, that supports it (KB 2220).
“with steelman of both sides” (KB 2220). Each position is presented in its best version before it is discussed.
The strongest version of each position, from both sides of the debate, is set out and only then put up for discussion. The other side is not caricatured.
“Ideas, without political correctness”: “a political-correctness-free space” (KB 2220).
The idea is discussed as it is, without euphemisms that soften it to avoid discomfort. The editorial limits of this value are not defined in any source and are set by the founder (see gaps).
Variants, clear space and usage
The quotation marks of the politically incorrect: they quote what others do not dare to say and, by quoting it, put it to the test. They open the conversation; they do not close it.
Leitmotif
Logo design (Singular Beacon)
Do not place the color variant (with red #922B21) on #0E0E0E.
Ramps, roles and contrasts
#2F0403
#51100B
#922B21
Brand red ramp, step 700: brand red #922B21 (AI)
#A7463A
#BF6659
#D9897C
#EFAA9E
#FEC4BB
#FFE2DD
#FFF4F2
#0E0E0E
Palette neutral ramp, step 900: Black #0E0E0E (AI)
#2B2B2B
#4D4D4D
#636363
Palette neutral ramp, step 600: Monochrome red #636363 (AI)
#838383
#A1A1A1
#C2C2C2
Palette neutral ramp, step 300: Light gray #C2C2C2 (AI)
#D4D4D4
#E9E9E9
#F4F4F4
Palette neutral ramp, step 50: Off-white #F4F4F4 (AI)
#001D00
#013601
#015F02
#028004
#0E970E
Green ramp, step 500: approval green #0E970E from the contrast sheet (AI)
#5DBA57
#88D482
#AAE7A5
#CCF7C8
#E7FFE4
#201300
#3B2701
#664603
#8A6006
#AB7814
#D09523
#F0B142
#FECB79
#FFE6C0
#FFF5E8
#493531
RGB 73, 53, 49
placas y bordes del formato común
#F4F4F4
#F4F4F4
#E9E9E9
#0E0E0E
#636363
#F4F4F4
#922B21
#51100B
#922B21
#838383
#922B21
#015F02
#8A6006
#922B21
#922B21
#0E0E0E
#0E0E0E
#2B2B2B
#F4F4F4
#C2C2C2
#0E0E0E
#D9897C
#EFAA9E
#EFAA9E
#838383
#D9897C
#5DBA57
#D09523
#D9897C
#D9897C
Dark / Light
17.55:1 AAA
Primary / Light
7.37:1 AAA
Primary monochrome / Light
5.46:1 AA
Light grey / Primary
4.55:1 AA
Light grey / Dark
10.83:1 AAA
Success / Background
7.23:1 AAA
Warning / Background
5.08:1 AA
Ink / Surface high
15.90:1 AAA
Soft ink / Surface high
4.94:1 AA
Primary / Surface high
6.67:1 AA
Success / Surface high
6.55:1 AA
Warning / Surface high
4.60:1 AA
Ink on primary / Primary hover
13.36:1 AAA
Border / Background
3.44:1 AA, large text only
Light / Primary
7.37:1 AAA
Light grey / Primary
4.55:1 AA
Light / Dark
17.55:1 AAA
Light grey / Dark
10.83:1 AAA
Primary monochrome / Dark
3.21:1 AA, large text only
Primary / Background
7.18:1 AAA
Success / Background
7.93:1 AAA
Warning / Background
7.35:1 AAA
Ink / Surface high
12.87:1 AAA
Soft ink / Surface high
7.94:1 AAA
Primary / Surface high
5.27:1 AA
Success / Surface high
5.81:1 AA
Warning / Surface high
5.39:1 AA
Ink on primary / Primary hover
10.03:1 AAA
Accent / Surface high
7.35:1 AAA
Border / Background
5.09:1 AA
Primary / Dark
2.38:1
The brand forbids it
Light grey / Light
1.61:1
The brand forbids it
Do not use #922B21 on #0E0E0E: contrast 2.38:1, below AA.
Do not use #636363 on #0E0E0E: contrast 3.21:1, below AA.
Do not use #C2C2C2 on #F4F4F4: contrast 1.61:1, below AA.
Families, specimens and scale
Tertiary
Polemizando
400
Primary
Polemizando
400
Secondary
Polemizando
300400700
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Scale, radii and elevation
00px
12px
24px
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.22)
On a light surface, so the shadow shows in any theme.
It is not published for this brand yet.
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.
Show
A shared design system
Read more<article class="bb-c-card bb-c-card--superficie">
<p class="bb-c-card__over">Show</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.
Show
Polemizando
A shared design system
Show
Polemizando
A shared design system
<header class="bb-c-header bb-c-header--superficie">
<p class="bb-c-header__over">Show</p>
<h1 class="bb-c-header__title">Polemizando</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
Polemizando
A shared design system
Polemizando
<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">Polemizando</cite>
</blockquote>A figure with what it means.
Usage rule A real figure with its source; no data, no statistic.
150
items published in its design system
150
items published in its design system
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">150</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 Polemizando?</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">Polemizando</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="Polemizando"/>
</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>Rigor</option><option>Steelman of both sides</option><option>Ideas without political correctness</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">Rigor</span>
<span class="bb-c-option__text">Polemizando</span>
</label><label class="bb-c-option">
<input type="radio" name="bb-c-choice-normal"/>
<span class="bb-c-option__title">Steelman of both sides</span>
<span class="bb-c-option__text">Polemizando</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 Polemizando 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.
Show Version 1 Current RigorSteelman of both sides
Show Version 1 Current RigorSteelman of both sides
<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">Rigor</span><span class="bb-c-badge bb-c-badge--borde">Steelman of both sides</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 |
|---|---|---|
| Title 1 | 61 px | Page or section title |
| Title 2 | 49 px | Subtitle and card title |
| Title 3 | 39 px | Minor title inside a block |
| Title 4 | 31 px | Titles |
| Title 5 | 25 px | Titles |
| Style | Size | Use |
|---|---|---|
| Title 1 | 61 px | Page or section title |
| Title 2 | 49 px | Subtitle and card title |
| Title 3 | 39 px | Minor title inside a block |
| Title 4 | 31 px | Titles |
| Title 5 | 25 px | Titles |
<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>Title 1</td><td><code>61 px</code></td><td>Page or section title</td>
</tr><tr>
<td>Title 2</td><td><code>49 px</code></td><td>Subtitle and card title</td>
</tr><tr>
<td>Title 3</td><td><code>39 px</code></td><td>Minor title inside a block</td>
</tr><tr>
<td>Title 4</td><td><code>31 px</code></td><td>Titles</td>
</tr><tr>
<td>Title 5</td><td><code>25 px</code></td><td>Titles</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 book100 %
Own to the brand in this book100 %
<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>Podcast, video and sound
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.
What is published for this audience, as an agent reads it: what is mandatory comes first.
4 / 4 lines within the limit
declaracion.leitmotiv: The quotation marks of the politically incorrect: they quote what others do not dare to say and, by quoting it, put it to the test. They open the conversation; they do not close it.
valor.rigor: Rigor · Relevant claims are backed by data or evidence; what cannot be sustained is stated as opinion. The format includes a fallacy bell and a guide, “Argumentative Fallacies”, that supports it (KB 2220). · “debate of ideas with rigor” (KB 2220). What is claimed is backed up.
valor.steelman-de-ambos-lados: Steelman of both sides · The strongest version of each position, from both sides of the debate, is set out and only then put up for discussion. The other side is not caricatured. · “with steelman of both sides” (KB 2220). Each position is presented in its best version before it is discussed.
valor.ideas-sin-correccion-politica: Ideas without political correctness · The idea is discussed as it is, without euphemisms that soften it to avoid discomfort. The editorial limits of this value are not defined in any source and are set by the founder (see gaps). · “Ideas, without political correctness”: “a political-correctness-free space” (KB 2220).env["sb.brand"].sb_context("polemizando", purpose="redactar", language="en_US")37 / 49 lines within the limit
NEVER accessibility color.prohibido.1: Do not use #922B21 on #0E0E0E: contrast 2.38:1, below AA.
NEVER accessibility color.prohibido.2: Do not use #636363 on #0E0E0E: contrast 3.21:1, below AA.
NEVER accessibility color.prohibido.3: Do not use #C2C2C2 on #F4F4F4: contrast 1.61:1, below AA.
NEVER logo directriz.logo.never.no-colocar-la-variante-en-color: Do not place the color variant (with red #922B21) on #0E0E0E. (Contrast of 2.38:1, below AA (Illustrator contrast sheet).)
color.secundario: #493531 · placas y bordes del formato común
color.primario.50: #fff4f2 · Red 50 · Brand red ramp, step 50: derived in OKLCH with the fixed hue (proposal).
color.primario.100: #ffe2dd · Red 100 · Brand red ramp, step 100: derived in OKLCH with the fixed hue (proposal).
color.primario.200: #fec4bb · Red 200 · Brand red ramp, step 200: derived in OKLCH with the fixed hue (proposal).
color.primario.300: #efaa9e · Red 300 · Brand red ramp, step 300: derived in OKLCH with the fixed hue (proposal).
color.primario.400: #d9897c · Red 400 · Brand red ramp, step 400: derived in OKLCH with the fixed hue (proposal).
color.primario.500: #bf6659 · Red 500 · Brand red ramp, step 500: derived in OKLCH with the fixed hue (proposal).
color.primario.600: #a7463a · Red 600 · Brand red ramp, step 600: derived in OKLCH with the fixed hue (proposal).
color.primario: #922b21 · Red · Brand red ramp, step 700: brand red #922B21 (AI)
color.primario.800: #51100b · Red 800 · Brand red ramp, step 800: derived in OKLCH with the fixed hue (proposal).
color.primario.900: #2f0403 · Red 900 · Brand red ramp, step 900: derived in OKLCH with the fixed hue (proposal).
color.claro: #f4f4f4 · Off-white · Palette neutral ramp, step 50: Off-white #F4F4F4 (AI)
color.neutro.100: #e9e9e9 · Neutral 100 · Palette neutral ramp, step 100: derived in OKLCH with the fixed hue (proposal).
color.neutro.200: #d4d4d4 · Neutral 200 · Palette neutral ramp, step 200: derived in OKLCH with the fixed hue (proposal).
color.gris-claro: #c2c2c2 · Light gray · Palette neutral ramp, step 300: Light gray #C2C2C2 (AI)
color.neutro.400: #a1a1a1 · Neutral 400 · Palette neutral ramp, step 400: derived in OKLCH with the fixed hue (proposal).
color.neutro.500: #838383 · Neutral 500 · Palette neutral ramp, step 500: derived in OKLCH with the fixed hue (proposal).
color.primario-monocromo: #636363 · Monochrome red · Palette neutral ramp, step 600: Monochrome red #636363 (AI)
color.neutro.700: #4d4d4d · Neutral 700 · Palette neutral ramp, step 700: derived in OKLCH with the fixed hue (proposal).
color.neutro.800: #2b2b2b · Neutral 800 · Palette neutral ramp, step 800: derived in OKLCH with the fixed hue (proposal).
color.oscuro: #0e0e0e · Black · Palette neutral ramp, step 900: Black #0E0E0E (AI)
color.exito.50: #e7ffe4 · Green 50 · Green ramp, step 50: derived in OKLCH with the fixed hue (proposal).
color.exito.100: #ccf7c8 · Green 100 · Green ramp, step 100: derived in OKLCH with the fixed hue (proposal).
color.exito.200: #aae7a5 · Green 200 · Green ramp, step 200: derived in OKLCH with the fixed hue (proposal).
color.exito.300: #88d482 · Green 300 · Green ramp, step 300: derived in OKLCH with the fixed hue (proposal).
color.exito.400: #5dba57 · Green 400 · Green ramp, step 400: derived in OKLCH with the fixed hue (proposal).
color.exito.500: #0e970e · Approval green · Green ramp, step 500: approval green #0E970E from the contrast sheet (AI)
color.exito.600: #028004 · Green 600 · Green ramp, step 600: derived in OKLCH with the fixed hue (proposal).
color.exito.700: #015f02 · Green 700 · Green ramp, step 700: derived in OKLCH with the fixed hue (proposal).
color.exito.800: #013601 · Green 800 · Green ramp, step 800: derived in OKLCH with the fixed hue (proposal).
color.exito.900: #001d00 · Green 900 · Green ramp, step 900: derived in OKLCH with the fixed hue (proposal).
fuente.terciaria: Barlow Condensed
fuente.primaria: Bebas Neue
… 12 lines cut by the limit, 0 mandatory: request a larger max_chars.env["sb.brand"].sb_context("polemizando", purpose="imagen", language="en_US")