Purpose, mission, vision and values
Part of Singular Works
«debate de ideas con rigor» (KB 2220). Lo que se afirma se sostiene.
Las afirmaciones relevantes se apoyan en datos o en evidencia; lo que no se puede sostener se dice como opinión. El formato incluye una campana de falacias y una guía, «Falacias Argumentativas», que la respalda (KB 2220).
«con steelman de ambos lados» (KB 2220). Cada postura se presenta en su mejor versión antes de discutirla.
Se expone la versión más fuerte de cada postura, de las dos partes del debate, y solo después se somete a discusión. No se caricaturiza al otro lado.
«Las ideas, sin corrección política»: «un espacio libre de corrección política» (KB 2220).
Se discute la idea tal como es, sin eufemismos que la suavicen para no incomodar. Los límites editoriales de este valor no están definidos en ninguna fuente y los fija el fundador (ver huecos).
Variants, clear space and usage
Horizontal · White on black
With margin SVGPDFPNG 128 px
Without margin SVGPDFPNG 128 px
Icon · White on black
With margin SVGPDFPNG 128 px
Without margin SVGPDFPNG 128 px
Stacked · White on black
With margin SVGPDFPNG 128 px
Without margin SVGPDFPNG 128 px
Ramps, roles and contrasts
#2F0403
#51100B
#922B21
Rampa del rojo de marca, paso 700: rojo de marca #922B21 (AI)
#A7463A
#BF6659
#D9897C
#EFAA9E
#FEC4BB
#FFE2DD
#FFF4F2
#0E0E0E
Rampa neutra de la paleta, paso 900: negro #0E0E0E (AI)
#2B2B2B
#4D4D4D
#636363
Rampa neutra de la paleta, paso 600: rojo en monocromo #636363 (AI)
#838383
#A1A1A1
#C2C2C2
Rampa neutra de la paleta, paso 300: gris claro #C2C2C2 (AI)
#D4D4D4
#E9E9E9
#F4F4F4
Rampa neutra de la paleta, paso 50: blanco roto #F4F4F4 (AI)
#001D00
#013601
#015F02
#028004
#0E970E
Rampa verde, paso 500: verde de aprobado #0E970E de la hoja de contrastes (AI)
#5DBA57
#88D482
#AAE7A5
#CCF7C8
#E7FFE4
#201300
#3B2701
#664603
#8A6006
#AB7814
#D09523
#F0B142
#FECB79
#FFE6C0
#FFF5E8
#F4F4F4
#F4F4F4
#E9E9E9
#0E0E0E
#636363
#F4F4F4
#922B21
#51100B
#922B21
#838383
#922B21
#015F02
#8A6006
#922B21
#922B21
#0E0E0E
#0E0E0E
#2B2B2B
#F4F4F4
#C2C2C2
#0E0E0E
#D9897C
#EFAA9E
#C2C2C2
#838383
#D9897C
#5DBA57
#D09523
#D9897C
#D9897C
oscuro / claro
17.55:1 AAA
primario / claro
7.37:1 AAA
primario-monocromo / claro
5.46:1 AA
claro / primario
7.37:1 AAA
gris-claro / primario
4.55:1 AA
claro / oscuro
17.55:1 AAA
gris-claro / oscuro
10.83:1 AAA
claro / primario
7.37:1 AAA
gris-claro / primario
4.55:1 AA
claro / oscuro
17.55:1 AAA
gris-claro / oscuro
10.83:1 AAA
primario-monocromo / oscuro
3.21:1 AA, large text only
tinta / fondo
17.55:1 AAA
tinta-suave / fondo
5.46:1 AA
primario / fondo
7.37:1 AAA
enlace / fondo
7.37:1 AAA
exito / fondo
7.23:1 AAA
aviso / fondo
5.08:1 AA
error / fondo
7.37:1 AAA
tinta / superficie
17.55:1 AAA
tinta-suave / superficie
5.46:1 AA
primario / superficie
7.37:1 AAA
enlace / superficie
7.37:1 AAA
exito / superficie
7.23:1 AAA
aviso / superficie
5.08:1 AA
error / superficie
7.37:1 AAA
tinta / superficie-alta
15.90:1 AAA
tinta-suave / superficie-alta
4.94:1 AA
primario / superficie-alta
6.67:1 AA
enlace / superficie-alta
6.67:1 AA
exito / superficie-alta
6.55:1 AA
aviso / superficie-alta
4.60:1 AA
error / superficie-alta
6.67:1 AA
tinta-sobre-primario / primario
7.37:1 AAA
tinta-sobre-primario / primario-hover
13.36:1 AAA
acento / fondo
7.37:1 AAA
acento / superficie
7.37:1 AAA
acento / superficie-alta
6.67:1 AA
tinta-sobre-primario / acento
7.37:1 AAA
borde / fondo
3.44:1 AA, large text only
foco / fondo
7.37:1 AAA
borde / superficie
3.44:1 AA, large text only
foco / superficie
7.37:1 AAA
tinta / fondo
17.55:1 AAA
tinta-suave / fondo
10.83:1 AAA
primario / fondo
7.18:1 AAA
enlace / fondo
7.18:1 AAA
exito / fondo
7.93:1 AAA
aviso / fondo
7.35:1 AAA
error / fondo
7.18:1 AAA
tinta / superficie
17.55:1 AAA
tinta-suave / superficie
10.83:1 AAA
primario / superficie
7.18:1 AAA
enlace / superficie
7.18:1 AAA
exito / superficie
7.93:1 AAA
aviso / superficie
7.35:1 AAA
error / superficie
7.18:1 AAA
tinta / superficie-alta
12.87:1 AAA
tinta-suave / superficie-alta
7.94:1 AAA
primario / superficie-alta
5.27:1 AA
enlace / superficie-alta
5.27:1 AA
exito / superficie-alta
5.81:1 AA
aviso / superficie-alta
5.39:1 AA
error / superficie-alta
5.27:1 AA
tinta-sobre-primario / primario
7.18:1 AAA
tinta-sobre-primario / primario-hover
10.03:1 AAA
acento / fondo
10.83:1 AAA
acento / superficie
10.83:1 AAA
acento / superficie-alta
7.94:1 AAA
borde / fondo
5.09:1 AA
foco / fondo
7.18:1 AAA
borde / superficie
5.09:1 AA
foco / superficie
7.18:1 AAA
primario / oscuro
2.38:1 Do not use
gris-claro / claro
1.61:1 Do not use
No usar #922B21 sobre #0E0E0E: contraste 2.38:1, por debajo de AA.
No usar #636363 sobre #0E0E0E: contraste 3.21:1, por debajo de AA.
No usar #C2C2C2 sobre #F4F4F4: contraste 1.61:1, por debajo de AA.
Families, specimens and scale
Primaria
Polemizando
400
Secundaria
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.
Standard web parts of the group
A single primary button per view; the rest, secondary or ghost.
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>Show
A shared design system
Read moreOne idea per card, and all cards in a row the same height.
A piece of content with title, text and link.
Usage rule One idea per card, and all cards in a row the same height.
<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>Show
Polemizando
A shared design system
A single main title per page, saying what it is about in one line.
The opening of a page: eyebrow, title and lead.
Show
Polemizando
A shared design system
Usage rule A single main title per page, saying what it is about in one line.
<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>One per page, at the end, with a verb that says what happens on click.
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 shared design system
Polemizando
Always with its author; if it cannot be attributed, it is not a quote.
A highlighted sentence with its author.
A shared design system
Polemizando
Usage rule Always with its author; if it cannot be attributed, it is not a quote.
<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>143
items published in its design system
A real figure with its source; no data, no statistic.
A figure with what it means.
143
items published in its design system
Usage rule A real figure with its source; no data, no statistic.
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">143</p>
<p class="bb-c-stat__label">items published in its design system</p>
</div>A shared design system
A shared design system
Questions people really ask, with the answer in the first line.
Questions that open and close without scripts.
Usage rule Questions people really ask, with the answer in the first line.
<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>No promotions: identity, legal links and contact.
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>Every field with a visible label; the error is said in words, not only in colour.
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 de ambos lados</option><option>Ideas sin corrección política</option>
</select>
</label>
</form>One choice, option cards; several, checkboxes. The whole card is clickable and the choice is never said only in colour.
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 de ambos lados</span>
<span class="bb-c-option__text">Polemizando</span>
</label>
</fieldset>A shared design system
One sentence that says what happened and what to do; colour is never the only signal.
A short message about what has just happened.
Received: the Polemizando team will answer you.
It could not be sent. Try again in a few minutes.
Usage rule One sentence that says what happened and what to do; colour is never the only signal.
<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>Show Version 2 Current RigorSteelman de ambos lados
One or two words; never as a button.
Short labels for state, kind or category.
Show Version 2 Current RigorSteelman de ambos lados
Usage rule One or two words; never as a button.
<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 2</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 de ambos lados</span>
</p>| 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 |
Only for data that is compared; the header always says what each column is.
Data in rows and columns, with header.
| 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 |
Usage rule Only for data that is compared; the header always says what each column is.
<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>Own to the brand in this book100 %
Always with the figure in text next to the bar.
How far something has gone, as a bar and as a figure.
Own to the brand in this book100 %
Usage rule Always with the figure in text next to the bar.
<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>Paper, templates and covers
A4 with the logo, the company foot, the brand styles and placeholders to write over.
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
Team members generate their signature from their Odoo Preferences, signed in as an employee.
This brand's skin and the common structure
Cover, divider, content, two columns, picture and text, figure or quote and closing with contact, each with its placeholders.
#F4F4F4
#0E0E0E
#51100B
#922B21
#51100B
#E9E9E9
#922B21
#F4F4F4
Lowest text contrast: 5.09:1
Download a sample of the deck. Fictitious content, with no client data.
SB Cover Cover: title, client, reference, date and client logoSB Agenda Contents, with more than two sectionsSB Section Divider, with 4 slides or more in a sectionSB Content The included sections, in their orderSB Closing Closing: thanks and contact of the ownerThe pieces that are printed
Full bleed, with the house art.
The included sections, numbered, with the head and foot of the document system.
Full bleed, with the boxes where the client signs.
Full bleed, with the art and the legal foot.
Where the brand's templates live
The brand's templates live in the Applications sections: each one shows the real piece.
Who makes the brand
Team members will appear here once they consent to being shown publicly.
Generated tokens and files
The context an agent receives
What is published for this audience, as an agent reads it: what is mandatory comes first.
3 / 3 lines within the limit
valor.rigor: Rigor · Las afirmaciones relevantes se apoyan en datos o en evidencia; lo que no se puede sostener se dice como opinión. El formato incluye una campana de falacias y una guía, «Falacias Argumentativas», que la respalda (KB 2220). · «debate de ideas con rigor» (KB 2220). Lo que se afirma se sostiene.
valor.steelman-de-ambos-lados: Steelman de ambos lados · Se expone la versión más fuerte de cada postura, de las dos partes del debate, y solo después se somete a discusión. No se caricaturiza al otro lado. · «con steelman de ambos lados» (KB 2220). Cada postura se presenta en su mejor versión antes de discutirla.
valor.ideas-sin-correccion-politica: Ideas sin corrección política · Se discute la idea tal como es, sin eufemismos que la suavicen para no incomodar. Los límites editoriales de este valor no están definidos en ninguna fuente y los fija el fundador (ver huecos). · «Las ideas, sin corrección política»: «un espacio libre de corrección política» (KB 2220).env["sb.brand"].sb_context("polemizando", purpose="redactar", language="en_US")34 / 47 lines within the limit
NEVER accessibility color.prohibido.1: No usar #922B21 sobre #0E0E0E: contraste 2.38:1, por debajo de AA.
NEVER accessibility color.prohibido.2: No usar #636363 sobre #0E0E0E: contraste 3.21:1, por debajo de AA.
NEVER accessibility color.prohibido.3: No usar #C2C2C2 sobre #F4F4F4: contraste 1.61:1, por debajo de AA.
NEVER logo directriz.logo.never.no-colocar-la-variante-en-color: No colocar la variante en color (con rojo #922B21) sobre #0E0E0E. (Contraste de 2,38:1, por debajo de AA (hoja de contrastes de Illustrator).)
color.primario.50: #fff4f2 · Rojo 50 · Rampa del rojo de marca, paso 50: derivado en OKLCH con el tono fijo (propuesta).
color.primario.100: #ffe2dd · Rojo 100 · Rampa del rojo de marca, paso 100: derivado en OKLCH con el tono fijo (propuesta).
color.primario.200: #fec4bb · Rojo 200 · Rampa del rojo de marca, paso 200: derivado en OKLCH con el tono fijo (propuesta).
color.primario.300: #efaa9e · Rojo 300 · Rampa del rojo de marca, paso 300: derivado en OKLCH con el tono fijo (propuesta).
color.primario.400: #d9897c · Rojo 400 · Rampa del rojo de marca, paso 400: derivado en OKLCH con el tono fijo (propuesta).
color.primario.500: #bf6659 · Rojo 500 · Rampa del rojo de marca, paso 500: derivado en OKLCH con el tono fijo (propuesta).
color.primario.600: #a7463a · Rojo 600 · Rampa del rojo de marca, paso 600: derivado en OKLCH con el tono fijo (propuesta).
color.primario: #922b21 · Rojo · Rampa del rojo de marca, paso 700: rojo de marca #922B21 (AI)
color.primario.800: #51100b · Rojo 800 · Rampa del rojo de marca, paso 800: derivado en OKLCH con el tono fijo (propuesta).
color.primario.900: #2f0403 · Rojo 900 · Rampa del rojo de marca, paso 900: derivado en OKLCH con el tono fijo (propuesta).
color.claro: #f4f4f4 · Blanco roto · Rampa neutra de la paleta, paso 50: blanco roto #F4F4F4 (AI)
color.neutro.100: #e9e9e9 · Neutro 100 · Rampa neutra de la paleta, paso 100: derivado en OKLCH con el tono fijo (propuesta).
color.neutro.200: #d4d4d4 · Neutro 200 · Rampa neutra de la paleta, paso 200: derivado en OKLCH con el tono fijo (propuesta).
color.gris-claro: #c2c2c2 · Gris claro · Rampa neutra de la paleta, paso 300: gris claro #C2C2C2 (AI)
color.neutro.400: #a1a1a1 · Neutro 400 · Rampa neutra de la paleta, paso 400: derivado en OKLCH con el tono fijo (propuesta).
color.neutro.500: #838383 · Neutro 500 · Rampa neutra de la paleta, paso 500: derivado en OKLCH con el tono fijo (propuesta).
color.primario-monocromo: #636363 · Rojo en monocromo · Rampa neutra de la paleta, paso 600: rojo en monocromo #636363 (AI)
color.neutro.700: #4d4d4d · Neutro 700 · Rampa neutra de la paleta, paso 700: derivado en OKLCH con el tono fijo (propuesta).
color.neutro.800: #2b2b2b · Neutro 800 · Rampa neutra de la paleta, paso 800: derivado en OKLCH con el tono fijo (propuesta).
color.oscuro: #0e0e0e · Negro · Rampa neutra de la paleta, paso 900: negro #0E0E0E (AI)
color.exito.50: #e7ffe4 · Verde 50 · Rampa verde, paso 50: derivado en OKLCH con el tono fijo (propuesta).
color.exito.100: #ccf7c8 · Verde 100 · Rampa verde, paso 100: derivado en OKLCH con el tono fijo (propuesta).
color.exito.200: #aae7a5 · Verde 200 · Rampa verde, paso 200: derivado en OKLCH con el tono fijo (propuesta).
color.exito.300: #88d482 · Verde 300 · Rampa verde, paso 300: derivado en OKLCH con el tono fijo (propuesta).
color.exito.400: #5dba57 · Verde 400 · Rampa verde, paso 400: derivado en OKLCH con el tono fijo (propuesta).
color.exito.500: #0e970e · Verde de aprobado · Rampa verde, paso 500: verde de aprobado #0E970E de la hoja de contrastes (AI)
color.exito.600: #028004 · Verde 600 · Rampa verde, paso 600: derivado en OKLCH con el tono fijo (propuesta).
color.exito.700: #015f02 · Verde 700 · Rampa verde, paso 700: derivado en OKLCH con el tono fijo (propuesta).
color.exito.800: #013601 · Verde 800 · Rampa verde, paso 800: derivado en OKLCH con el tono fijo (propuesta).
fuente.secundaria: Lato
… 13 lines cut by the limit, 0 mandatory: request a larger max_chars.env["sb.brand"].sb_context("polemizando", purpose="imagen", language="en_US")Published history