Propósito, misión, visión y valores
Parte de 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).
Variantes, área de respeto y usos
Horizontal · Blanco sobre negro
Con margen SVGPDFPNG 128 px
Sin margen SVGPDFPNG 128 px
Icono · Blanco sobre negro
Con margen SVGPDFPNG 128 px
Sin margen SVGPDFPNG 128 px
Apilado · Blanco sobre negro
Con margen SVGPDFPNG 128 px
Sin margen SVGPDFPNG 128 px
Rampas, roles y contrastes
#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, solo texto grande
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, solo texto grande
foco / fondo
7.37:1 AAA
borde / superficie
3.44:1 AA, solo texto grande
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 No usar
gris-claro / claro
1.61:1 No usar
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.
Familias, especímenes y escala
Primaria
Polemizando
400
Secundaria
Polemizando
300400700
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Polemizando
Escala, radios y elevación
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)
Sobre superficie clara, para que la sombra se vea en cualquier tema.
Todavía no está publicado para esta marca.
Piezas web estándar del grupo
Un solo botón principal por vista; lo demás, secundario o fantasma.
La acción de una vista.
Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.
<button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>Programa
Un sistema de diseño compartido
Seguir leyendoUna idea por tarjeta, y todas las de una fila del mismo alto.
Un contenido con título, texto y enlace.
Programa
Un sistema de diseño compartido
Seguir leyendoPrograma
Un sistema de diseño compartido
Seguir leyendoPrograma
Un sistema de diseño compartido
Seguir leyendoPrograma
Un sistema de diseño compartido
Seguir leyendoRegla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.
<article class="bb-c-card bb-c-card--superficie">
<p class="bb-c-card__over">Programa</p>
<h3 class="bb-c-card__title">Un sistema de diseño compartido</h3>
<p class="bb-c-card__text">Un sistema de diseño compartido</p>
<a class="bb-c-card__link" href="#">Seguir leyendo</a>
</article>Programa
Polemizando
Un sistema de diseño compartido
Un solo título principal por página, que diga de qué va en una línea.
La apertura de una página: antetítulo, título y entradilla.
Programa
Polemizando
Un sistema de diseño compartido
Regla de uso Un solo título principal por página, que diga de qué va en una línea.
<header class="bb-c-header bb-c-header--superficie">
<p class="bb-c-header__over">Programa</p>
<h1 class="bb-c-header__title">Polemizando</h1>
<p class="bb-c-header__lede">Un sistema de diseño compartido</p>
</header>Una por página, al final, con un verbo que diga qué pasa al pulsar.
El cierre de una página, con una sola acción.
Regla de uso Una por página, al final, con un verbo que diga qué pasa al pulsar.
<aside class="bb-c-cta bb-c-cta--acento">
<h2 class="bb-c-cta__title">Un sistema de diseño compartido</h2>
<a class="bb-c-button bb-c-button--primario" href="#">Contactar</a>
</aside>Un sistema de diseño compartido
Polemizando
Siempre con autoría; si no se puede atribuir, no es una cita.
Una frase destacada con su autoría.
Un sistema de diseño compartido
Polemizando
Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.
<blockquote class="bb-c-quote bb-c-quote--filete">
<p class="bb-c-quote__text">Un sistema de diseño compartido</p>
<cite class="bb-c-quote__author">Polemizando</cite>
</blockquote>143
elementos publicados en su sistema de diseño
Una cifra real y con fuente; si no hay dato, no hay estadística.
Una cifra con lo que significa.
143
elementos publicados en su sistema de diseño
Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">143</p>
<p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
</div>Un sistema de diseño compartido
Un sistema de diseño compartido
Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
Preguntas que se abren y se cierran sin scripts.
Regla de uso Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
<div class="bb-c-faq">
<details class="bb-c-faq__item" open="open">
<summary class="bb-c-faq__q">¿Qué es Polemizando?</summary>
<p class="bb-c-faq__a">Un sistema de diseño compartido</p>
</details>
<details class="bb-c-faq__item">
<summary class="bb-c-faq__q">¿Qué la mueve?</summary>
<p class="bb-c-faq__a">Un sistema de diseño compartido</p>
</details>
</div>Sin promociones: identidad, enlaces legales y contacto.
El cierre de todas las páginas: marca y enlaces.
Regla de uso Sin promociones: identidad, enlaces legales y contacto.
<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="#">Aviso legal</a></li>
<li><a href="#">Privacidad</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</footer>Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
Campos de texto, correo y selección con su etiqueta, su ayuda y su error.
Regla de uso Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.
<form class="bb-c-form bb-c-form--base">
<label class="bb-c-field">
<span class="bb-c-field__label">Nombre</span>
<input class="bb-c-field__input" type="text" value="Polemizando"/>
</label>
<label class="bb-c-field">
<span class="bb-c-field__label">Correo electrónico</span>
<input class="bb-c-field__input" type="email"/>
<span class="bb-c-field__hint">Solo para responderte.</span>
</label>
<label class="bb-c-field">
<span class="bb-c-field__label">Tema</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>Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.
Elegir una opción entre tarjetas, o varias con casillas.
Regla de uso Una elección, tarjetas de opción; varias, casillas. Toda la tarjeta se pulsa y la elección nunca se dice solo con color.
<fieldset class="bb-c-choice bb-c-choice--tarjetas">
<legend class="bb-c-field__label">Tema</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>Un sistema de diseño compartido
Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
Un mensaje breve sobre lo que acaba de pasar.
Recibido: te responde el equipo de Polemizando.
No se ha podido enviar. Inténtalo de nuevo en unos minutos.
Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.
<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">Un sistema de diseño compartido</p>
</div>Programa Versión 2 Vigente RigorSteelman de ambos lados
Una o dos palabras; nunca como botón.
Etiquetas cortas de estado, tipo o categoría.
Programa Versión 2 Vigente RigorSteelman de ambos lados
Regla de uso Una o dos palabras; nunca como botón.
<p class="bb-c-badges bb-c-badges--base">
<span class="bb-c-badge bb-c-badge--acento">Programa</span>
<span class="bb-c-badge">Versión 2</span>
<span class="bb-c-badge bb-c-badge--borde">Vigente</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>| Estilo | Tamaño | Uso |
|---|---|---|
| Título 1 | 61 px | Título de página o de sección |
| Título 2 | 49 px | Subtítulo y título de tarjeta |
| Título 3 | 39 px | Título menor dentro de un bloque |
| Título 4 | 31 px | Títulos |
| Título 5 | 25 px | Títulos |
Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Datos en filas y columnas, con cabecera.
| Estilo | Tamaño | Uso |
|---|---|---|
| Título 1 | 61 px | Título de página o de sección |
| Título 2 | 49 px | Subtítulo y título de tarjeta |
| Título 3 | 39 px | Título menor dentro de un bloque |
| Título 4 | 31 px | Títulos |
| Título 5 | 25 px | Títulos |
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
<table class="bb-c-table bb-c-table--superficie">
<thead><tr><th scope="col">Estilo</th><th scope="col">Tamaño</th><th scope="col">Uso</th></tr></thead>
<tbody>
<tr>
<td>Título 1</td><td><code>61 px</code></td><td>Título de página o de sección</td>
</tr><tr>
<td>Título 2</td><td><code>49 px</code></td><td>Subtítulo y título de tarjeta</td>
</tr><tr>
<td>Título 3</td><td><code>39 px</code></td><td>Título menor dentro de un bloque</td>
</tr><tr>
<td>Título 4</td><td><code>31 px</code></td><td>Títulos</td>
</tr><tr>
<td>Título 5</td><td><code>25 px</code></td><td>Títulos</td>
</tr>
</tbody>
</table>Propio de la marca en este libro100 %
Siempre con la cifra en texto junto a la barra.
Cuánto lleva algo hecho, como barra y como cifra.
Propio de la marca en este libro100 %
Regla de uso Siempre con la cifra en texto junto a la barra.
<div class="bb-c-progress bb-c-progress--acento">
<p class="bb-c-progress__head"><span>Propio de la marca en este libro</span><strong>100 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="Propio de la marca en este libro">
<span class="bb-c-progress__bar" style="width: 100%"></span>
</div>
</div>Papel, plantillas y portadas
A4 con el logotipo, el pie de la sociedad, los estilos de la marca y marcadores para escribir encima.
La firma de correo de la marca
La firma de correo es el cierre de cada mensaje de la marca: el logotipo, el nombre y el cargo de la persona, sus datos de contacto y, si la marca lo publica, un banner y un aviso legal. Se genera desde la versión publicada de la marca, así que cambia cuando cambia la marca.
Nombre Apellido
Cargo
Teléfono · correo electrónico
Las personas del equipo generan su firma desde sus Preferencias de Odoo, con una sesión de empleado.
La piel de esta marca y la estructura común
Portada, separador, contenido, dos columnas, imagen y texto, cifra o cita y cierre con contacto, cada una con sus marcadores.
#F4F4F4
#0E0E0E
#51100B
#922B21
#51100B
#E9E9E9
#922B21
#F4F4F4
Contraste mínimo de texto: 5.09:1
Descargar una muestra del deck. Contenido ficticio, sin ningún dato de cliente.
SB Cover Portada: título, cliente, referencia, fecha y logotipo del clienteSB Agenda Índice, con más de dos seccionesSB Section Separador, con 4 láminas o más en una secciónSB Content Las secciones incluidas, en su ordenSB Closing Cierre: agradecimiento y contacto del responsablePiezas que se imprimen
A sangre, con el arte de la casa.
Las secciones incluidas, numeradas, con cabecera y pie del sistema de documentos.
A sangre, con las casillas donde firma el cliente.
A sangre, con el arte y el pie legal.
Dónde están las plantillas de la marca
Las plantillas de la marca viven en las secciones de Aplicaciones: cada una enseña la pieza real.
Quién hace la marca
Las personas del equipo aparecerán aquí cuando den su consentimiento para hacerlo público.
Tokens generados y ficheros
El contexto que recibe un agente
Lo publicado para esta audiencia, tal como lo lee un agente: lo obligatorio va primero.
3 / 3 líneas dentro del tope
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")33 / 47 líneas dentro del tope
NUNCA accessibility color.prohibido.1: No usar #922B21 sobre #0E0E0E: contraste 2.38:1, por debajo de AA.
NUNCA accessibility color.prohibido.2: No usar #636363 sobre #0E0E0E: contraste 3.21:1, por debajo de AA.
NUNCA accessibility color.prohibido.3: No usar #C2C2C2 sobre #F4F4F4: contraste 1.61:1, por debajo de AA.
NUNCA 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).
… 14 líneas recortadas por el tope, 0 obligatorias: pide un max_chars mayor.env["sb.brand"].sb_context("polemizando", purpose="imagen")Historial publicado