«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).
Steelman de ambos lados
«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.
Ideas sin corrección política
«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).
Leitmotiv
Las comillas de lo políticamente incorrecto: citan lo que otros no se atreven a decir y, al citarlo, lo ponen a prueba. Abren la conversación; no la cierran.
02
Logotipo
Variantes, área de respeto y usos
Las comillas de lo políticamente incorrecto: citan lo que otros no se atreven a decir y, al citarlo, lo ponen a prueba. Abren la conversación; no la cierran.
<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>
Cabecera de página
La apertura de una página: antetítulo, título y entradilla.
Regla de uso Un solo título principal por página, que diga de qué va en una línea.
Variantes
Programa
Polemizando
Un sistema de diseño compartido
Superficie
Programa
Polemizando
Un sistema de diseño compartido
Acento
Código
<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>
Llamada a la acción
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.
Variantes
Acento
Superficie
Código
<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>
Cita
Una frase destacada con su autoría.
Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.
Variantes
Un sistema de diseño compartido
Polemizando
Filete
Un sistema de diseño compartido
Polemizando
Superficie
Código
<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>
Estadística
Una cifra con lo que significa.
Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.
Variantes
156
elementos publicados en su sistema de diseño
Superficie
156
elementos publicados en su sistema de diseño
Acento
Código
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">156</p>
<p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
</div>
Preguntas frecuentes
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.
¿Qué es Polemizando?
Un sistema de diseño compartido
¿Qué la mueve?
Un sistema de diseño compartido
Código
<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>
Pie
El cierre de todas las páginas: marca y enlaces.
Regla de uso Sin promociones: identidad, enlaces legales y contacto.
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Variantes
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
Superficie
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
Rayada
Código
<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>
Progreso
Cuánto lleva algo hecho, como barra y como cifra.
Regla de uso Siempre con la cifra en texto junto a la barra.
Variantes
Propio de la marca en este libro91 %
Acento
Propio de la marca en este libro91 %
Línea
Código
<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>91 %</strong></p>
<div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="91" aria-label="Propio de la marca en este libro">
<span class="bb-c-progress__bar" style="width: 91%"></span>
</div>
</div>
Lo publicado para esta audiencia, tal como lo lee un agente: lo obligatorio va primero.
Estilo de comunicación
4 / 4 líneas dentro del tope
Contexto
declaracion.leitmotiv: Las comillas de lo políticamente incorrecto: citan lo que otros no se atreven a decir y, al citarlo, lo ponen a prueba. Abren la conversación; no la cierran.
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).
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).
… 28 líneas recortadas por el tope, 0 obligatorias: pide un max_chars mayor.