Ir al contenido
TecWarden
  • Noticias
  • Secciones
  • Nosotros
  • Grupo
  • 0
  • Síganos
  • Español English
  • Contacto
TecWarden
  • 0
    • Noticias
    • Secciones
    • Nosotros
    • Grupo
  • Síganos
  • Español English
  • Contacto
Polemizando
Marcas
Todas las marcas
  • The Beacon Holding
  • Singular Community
  • Nuestras Causas
  • Singular Club
  • The Singular Hub
  • Singular Investments
  • Singular Ventures
  • ATLAS
  • EngArch
  • Finite
  • HybridMeM
  • autoWorks
  • loombiotech
  • the0racle
  • Singular Media
  • Singular Editorial
  • Para Toda una Vida
  • TecWarden
  • Singular Pictures
  • Singular Works
  • Outstarting
  • Polemizando
  • Profesionales Excepcionales
  • Singular Services
  • Digital Branding
  • Singular Beacon
  • Singular Events
  • Singular Jobs
  • The Singular Academy
  • Singular Solutions
  • Observatorio 360º
  • Observatorio de Absentismo
  • Observatorio de Bienestar
  • Observatorio de Compensación
  • Observatorio de Rotación
  • Observatorio de Talento
  • SingularARX
Entrar para ver más

    Marca

    • 01 Identidad
      • Valores

    Fundamentos

    • 02 Logotipo
      • Variantes
      • Usos prohibidos
    • 03 Color
      • Rampas
      • Paleta
      • Roles
      • Contrastes
    • 04 Tipografía
      • Familias
      • Estilos
    • 05 Espaciado y forma
      • Radios
      • Elevación
    • 06 Iconografía

    Componentes

    • 07 Componentes

    Aplicaciones

    • 08 Audiovisual
      • Vídeos

    Recursos

    • 09 Animaciones
    • 10 Generador de imágenes
    • 11 Descargas
    • 12 Para agentes
      • Estilo de comunicación
      • Directrices para agentes de imágenes
    • 13 Versiones
    Polemizando

    Sistema de diseño

    • Versión18
    • AlcancePrograma
    • Fecha2026-11-09
    • Pertenece aSingular Works
    • OrigenOdoo, versión publicada
    01 Identidad Propósito, misión, visión y valores 02 Logotipo Variantes, área de respeto y usos 03 Color Rampas, roles y contrastes 04 Tipografía Familias, especímenes y escala 05 Espaciado y forma Escala, radios y elevación 06 Iconografía 07 Componentes Piezas web estándar del grupo 08 Audiovisual Pódcast, vídeo y sonido 09 Animaciones 10 Generador de imágenes 11 Descargas Tokens generados y ficheros 12 Para agentes El contexto que recibe un agente 13 Versiones Historial publicado
    01

    Identidad

    Propósito, misión, visión y valores

    Parte de Singular Works

    Valores

    Rigor

    «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.

    Leitmotiv

    Variantes

    Color

    Color

    Horizontal · Color

    Otros SVGPDFPNG 526 px

    Claro

    Claro

    Horizontal · Claro

    Otros SVGPDFPNG 525 px

    Color

    Color

    Apilado · Color

    Otros SVGPDFPNG 258 px

    Claro

    Claro

    Apilado · Claro

    Otros SVGPDFPNG 257 px

    Color

    Color

    Icono · Color

    Otros SVGPDFPNG 171 px

    Claro

    Claro

    Icono · Claro

    Otros SVGPDFPNG 171 px

    Diseño del logotipo Carlos Pascual (Singular Beacon)

    Usos prohibidos

    Así noNo colocar la variante en color (con rojo #922B21) sobre #0E0E0E.
    Así noEl icono no es cuadrado (1,80:1): para favicon o avatar hay que componer un cuadrado aparte, no deformarlo.
    03

    Color

    Rampas, roles y contrastes

    Rampas

    Primario

    900 #2F0403
    800 #51100B
    Color de origen #922B21 Rampa del rojo de marca, paso 700: rojo de marca #922B21 (AI)
    600 #A7463A
    500 #BF6659
    400 #D9897C
    300 #EFAA9E
    200 #FEC4BB
    100 #FFE2DD
    50 #FFF4F2

    Neutro

    Oscuro #0E0E0E Rampa neutra de la paleta, paso 900: negro #0E0E0E (AI)
    800 #2B2B2B
    700 #4D4D4D
    Primario monocromo #636363 Rampa neutra de la paleta, paso 600: rojo en monocromo #636363 (AI)
    500 #838383
    400 #A1A1A1
    Gris claro #C2C2C2 Rampa neutra de la paleta, paso 300: gris claro #C2C2C2 (AI)
    200 #D4D4D4
    100 #E9E9E9
    Claro #F4F4F4 Rampa neutra de la paleta, paso 50: blanco roto #F4F4F4 (AI)

    Éxito

    900 #001D00
    800 #013601
    700 #015F02
    600 #028004
    500 #0E970E Rampa verde, paso 500: verde de aprobado #0E970E de la hoja de contrastes (AI)
    400 #5DBA57
    300 #88D482
    200 #AAE7A5
    100 #CCF7C8
    50 #E7FFE4

    Aviso

    900 #201300
    800 #3B2701
    700 #664603
    600 #8A6006
    500 #AB7814
    400 #D09523
    300 #F0B142
    200 #FECB79
    100 #FFE6C0
    50 #FFF5E8

    Paleta

    Blanco #FFFFFF RGB 255, 255, 255 Blanco; superficie de tarjeta clara y detalle de iconos.
    Heredado de Singular Works
    Cielo #8FD3FF RGB 143, 211, 255 Cielo; azul claro para enlaces, foco y primario en tema oscuro.
    Heredado de Singular Works
    Ámbar #FF9A62 RGB 255, 154, 98 Ámbar de la web; decoración, no texto.
    Heredado de Singular Works
    Noche #021620 RGB 2, 22, 32 Noche de la web; fondos muy oscuros de cabecera.
    Heredado de Singular Works
    Tinta #05283A RGB 5, 40, 58 Tinta de la web; degradado bajo texto sobre foto y sombras.
    Heredado de Singular Works
    Solape #56ABE2 RGB 86, 171, 226 Solape por transparencia de los iconos de app (0,6 × #8FD3FF + 0,4 × #006EB7).
    Heredado de Singular Works
    Fondo oscuro #262A36 RGB 38, 42, 54 Fondo oscuro de la hoja de contacto de iconos.
    Heredado de Singular Works
    Sombra #02161F RGB 2, 22, 31 Sombras del duotono de foto (tratamiento en revisión).
    Heredado de Singular Works
    Medio #006088 RGB 0, 96, 136 Medios tonos del duotono de foto (tratamiento en revisión).
    Heredado de Singular Works
    Luz #E2EEF4 RGB 226, 238, 244 Luces del duotono de foto (tratamiento en revisión).
    Heredado de Singular Works
    Claro #00672C RGB 0, 103, 44
    Heredado de Singular Works
    Claro #6D5000 RGB 109, 80, 0
    Heredado de Singular Works
    Oscuro #7CD591 RGB 124, 213, 145
    Heredado de Singular Works
    Oscuro #E1B75C RGB 225, 183, 92
    Heredado de Singular Works

    Roles

    Claro

    • Fondo #F4F4F4
    • Superficie #F4F4F4
    • Superficie alta #E9E9E9
    • Tinta #0E0E0E
    • Tinta suave #636363
    • Tinta sobre primario #F4F4F4
    • Primario #922B21
    • Primario hover #51100B
    • Acento #922B21
    • Borde #838383
    • Foco #922B21
    • Éxito #015F02
    • Aviso #8A6006
    • Error #922B21
    • Enlace #922B21

    Oscuro

    • Fondo #0E0E0E
    • Superficie #0E0E0E
    • Superficie alta #2B2B2B
    • Tinta #F4F4F4
    • Tinta suave #C2C2C2
    • Tinta sobre primario #0E0E0E
    • Primario #D9897C
    • Primario hover #EFAA9E
    • Acento #C2C2C2
    • Borde #838383
    • Foco #D9897C
    • Éxito #5DBA57
    • Aviso #D09523
    • Error #D9897C
    • Enlace #D9897C

    Contrastes

    Tema claro

    Aa

    Oscuro / Claro

    17.55:1 AAA

    Aa

    Primario / Claro

    7.37:1 AAA

    Aa

    Primario monocromo / Claro

    5.46:1 AA

    Aa

    Gris claro / Primario

    4.55:1 AA

    Aa

    Gris claro / Oscuro

    10.83:1 AAA

    Aa

    Éxito / Fondo

    7.23:1 AAA

    Aa

    Aviso / Fondo

    5.08:1 AA

    Aa

    Tinta / Superficie alta

    15.90:1 AAA

    Aa

    Tinta suave / Superficie alta

    4.94:1 AA

    Aa

    Primario / Superficie alta

    6.67:1 AA

    Aa

    Éxito / Superficie alta

    6.55:1 AA

    Aa

    Aviso / Superficie alta

    4.60:1 AA

    Aa

    Tinta sobre primario / Primario hover

    13.36:1 AAA

    Borde / Fondo

    3.44:1 AA, solo texto grande

    Tema oscuro

    Aa

    Claro / Primario

    7.37:1 AAA

    Aa

    Gris claro / Primario

    4.55:1 AA

    Aa

    Claro / Oscuro

    17.55:1 AAA

    Aa

    Gris claro / Oscuro

    10.83:1 AAA

    Primario monocromo / Oscuro

    3.21:1 AA, solo texto grande

    Aa

    Primario / Fondo

    7.18:1 AAA

    Aa

    Éxito / Fondo

    7.93:1 AAA

    Aa

    Aviso / Fondo

    7.35:1 AAA

    Aa

    Tinta / Superficie alta

    12.87:1 AAA

    Aa

    Tinta suave / Superficie alta

    7.94:1 AAA

    Aa

    Primario / Superficie alta

    5.27:1 AA

    Aa

    Éxito / Superficie alta

    5.81:1 AA

    Aa

    Aviso / Superficie alta

    5.39:1 AA

    Aa

    Tinta sobre primario / Primario hover

    10.03:1 AAA

    Aa

    Borde / Fondo

    5.09:1 AA

    No usar

    Primario / Oscuro

    2.38:1

    La marca lo prohíbe

    Gris claro / Claro

    1.61:1

    La marca lo prohíbe

    • 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.

    04

    Tipografía

    Familias, especímenes y escala

    Familias

    Bebas Neue

    Primaria

    Polemizando

    400

    Lato

    Secundaria

    Polemizando

    300400700

    Estilos

    Título 1 61px · 400 · 1.05 Título de página o de sección

    Polemizando

    Título 2 49px · 400 · 1.06 Subtítulo y título de tarjeta

    Polemizando

    Título 3 39px · 400 · 1.13 Título menor dentro de un bloque

    Polemizando

    Título 4 31px · 400 · 1.16 Títulos

    Polemizando

    Título 5 25px · 400 · 1.28 Títulos

    Polemizando

    Etiqueta 20px · 400 · 1.2 Antetítulos, etiquetas y metadatos

    Polemizando

    Cuerpo grande 20px · 300 · 1.4 Texto corrido de la interfaz

    Polemizando

    Cuerpo 16px · 300 · 1.5 Texto corrido de la interfaz

    Polemizando

    Cuerpo pequeño 14px · 400 · 1.43 Texto corrido de la interfaz

    Polemizando

    Nota 12px · 400 · 1.33

    Polemizando

    05

    Espaciado y forma

    Escala, radios y elevación

    Radios

    00px
    12px
    24px

    Elevación

    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.

    06

    Iconografía

    Pendiente

    Iconos

    Todavía no está publicado para esta marca.

    07

    Componentes

    Piezas web estándar del grupo

    BotónTarjetaCabecera de páginaLlamada a la acciónCitaEstadísticaPreguntas frecuentesPieCampos de formularioSelecciónAvisosInsigniasTablaProgreso

    Botón

    La acción de una vista.

    Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.

    Variantes

    Primario
    Secundario
    Fantasma

    Estados

    Encima
    Activo
    Deshabilitado
    Código
    <button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>

    Tarjeta

    Un contenido con título, texto y enlace.

    Regla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.

    Variantes

    Programa

    Un sistema de diseño compartido

    Un sistema de diseño compartido

    Seguir leyendo
    Superficie

    Programa

    Un sistema de diseño compartido

    Un sistema de diseño compartido

    Seguir leyendo
    Borde

    Programa

    Un sistema de diseño compartido

    Un sistema de diseño compartido

    Seguir leyendo
    Acento

    Estados

    Programa

    Un sistema de diseño compartido

    Un sistema de diseño compartido

    Seguir leyendo
    Encima
    Código
    <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

    Un sistema de diseño compartido

    Contactar
    Acento

    Un sistema de diseño compartido

    Contactar
    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.

    Variantes

    Polemizando
    • Aviso legal
    • Privacidad
    • Contacto
    Oscuro
    Polemizando
    • Aviso legal
    • Privacidad
    • Contacto
    Claro
    Código
    <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>

    Campos de formulario

    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.

    Estados

    Foco
    Error
    Deshabilitado
    Código
    <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>

    Selección

    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.

    Variantes

    Tema
    Tarjetas de opción
    Tema
    Casillas

    Estados

    Tema
    Foco
    Tema
    Deshabilitado
    Código
    <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>

    Avisos

    Un mensaje breve sobre lo que acaba de pasar.

    Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.

    Variantes

    Un sistema de diseño compartido

    Información

    Recibido: te responde el equipo de Polemizando.

    Éxito

    No se ha podido enviar. Inténtalo de nuevo en unos minutos.

    Error
    Código
    <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>

    Insignias

    Etiquetas cortas de estado, tipo o categoría.

    Regla de uso Una o dos palabras; nunca como botón.

    Variantes

    Programa Versión 18 Vigente RigorSteelman de ambos lados

    Base

    Programa Versión 18 Vigente RigorSteelman de ambos lados

    Compacta
    Código
    <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 18</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>

    Tabla

    Datos en filas y columnas, con cabecera.

    Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.

    Variantes

    EstiloTamañoUso
    Título 161 pxTítulo de página o de sección
    Título 249 pxSubtítulo y título de tarjeta
    Título 339 pxTítulo menor dentro de un bloque
    Título 431 pxTítulos
    Título 525 pxTítulos
    Superficie
    EstiloTamañoUso
    Título 161 pxTítulo de página o de sección
    Título 249 pxSubtítulo y título de tarjeta
    Título 339 pxTítulo menor dentro de un bloque
    Título 431 pxTítulos
    Título 525 pxTí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>
    08

    Audiovisual

    Pódcast, vídeo y sonido

    Vídeos

    • Vídeo de intro del programa

      MP4MP4

    • Vídeo de intro del programa

      MP4MP4

    • Vídeo de cierre del programa

      MP4MP4

    • Vídeo de cierre del programa

      MP4MP4

    09

    Animaciones

    Polemizando — Intro

    Polemizando — Intro

    Polemizando - Intro v7

    Polemizando - Intro v7
    10

    Generador de imágenes

    Una foto de un producto o un objeto, sin fondo, encuadrada y sobre el fondo corporativo de la marca.

    1. Subes la imagen

    Un producto, un objeto o una ilustración. Nunca una persona: para el equipo están los retratos.

    2. Gemini la recorta

    Quita el fondo y encuadra el sujeto. Odoo lo pone sobre el fondo de la marca.

    3. Una persona la aprueba

    Nada sale sin que alguien la mire. Una vez aprobada, se descarga.

    El generador es para quien edita la marca: entra con tu sesión de Odoo.

    11

    Descargas

    Tokens generados y ficheros

    tokens.css Variables CSS de la marca tokens.json Tokens legibles por máquina

    Ficheros

    • Horizontal · Color

      Otros SVGPDFPNG 526 pxPNG 1050 px

    • Horizontal · Claro

      Otros SVGPDFPNG 525 pxPNG 1050 px

    • Apilado · Color

      Otros SVGPDFPNG 258 pxPNG 515 px

    • Apilado · Claro

      Otros SVGPDFPNG 257 pxPNG 514 px

    • Icono · Color

      Otros SVGPDFPNG 171 pxPNG 342 px

    • Icono · Claro

      Otros SVGPDFPNG 171 pxPNG 341 px

    12

    Para agentes

    El contexto que recibe un agente

    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).
    Cómo pedirlo
    env["sb.brand"].sb_context("polemizando", purpose="redactar")

    Directrices para agentes de imágenes

    33 / 61 líneas dentro del tope

    Contexto
    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.
    Cómo pedirlo
    env["sb.brand"].sb_context("polemizando", purpose="imagen")
    13

    Versiones

    Historial publicado

    1. v18 2026-11-09 Aprobación Vigente

    TecWarden

    Innovación y tecnología, en un mismo lugar.

    Novedades de innovación y tecnología en español.

    • +34 910 47 90 47
    • [email protected]
    • Av. Ciudad de Barcelona 132, 1ª, 28007 Madrid

    Síguenos

    La publicación

    • Secciones
    • La idea
    • En qué punto está

    TecWarden

    • Nosotros
    • De quién es
    • Trabaja con nosotros

    Recursos

    • El grupo
    • Singular Media
    • Las cinco divisiones del grupo

    Contacto

    • Contacto
    • Proponer un tema

    Un proyecto de The Beacon Holding

    Singular Beacon, S.L. · CIF ES B67869644 · Inscrita en el Registro Mercantil de Madrid Tomo 42.891, Folio 36, Inscripción 1, Hoja M-758246

    • Privacidad
    • Cookies
    • Condiciones de uso
    The Beacon Holding

    Amplitud de visión, unidad de propósito

    • Singular Services

      • Singular Beacon
      • The Singular Academy
      • Singular Jobs En desarrollo
      • Singular Events
    • Singular Solutions

      • Odoo Apps
      • Observatorio 360º
        • Observatorio de Bienestar
        • Observatorio de Rotación
        • Observatorio de Compensación
        • Observatorio de Talento
        • Observatorio de Absentismo
      • SingularARX En desarrollo
    • Singular Media

      • Singular Works
        • Profesionales Excepcionales
        • Outstarting
        • Polemizando
      • Singular Editorial
        • Para Toda una Vida
        • TecWarden
      • Singular Pictures En desarrollo
    • Singular Investments

      • Singular Ventures
        • the0racle
        • HybridMeM
        • EngArch En desarrollo
        • ATLAS En desarrollo
        • Finite En desarrollo
        • autoWorks En desarrollo
        • loombiotech En desarrollo
      • Relación con inversores
        • Singular Beacon, S.L.
        • Digital Branding Ltd
      • Rondas abiertas
    • Singular Community

      • Singular Community
      • Nuestras Causas
      • The Singular Hub
      • Singular Club
    Español | English
    Copyright © TecWarden

    Utilizamos cookies para proporcionarle una mejor experiencia de usuario en este sitio web. Política de cookies

    Solo las necesarias Acepto