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
Outstarting
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
    Outstarting

    Sistema de diseño

    Real stories · Honest voices · No bullshit

    • Versión16
    • 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

    Real stories · Honest voices · No bullshit

    Eslogan

    Valores

    Real stories

    Lo que se cuenta ha pasado: un proyecto concreto y una persona concreta. Es la primera cláusula del eslogan y el sentido de «los proyectos y quien los emprende».

    Cada pieza parte de un proyecto con nombre y de quien lo emprende. No se inventan casos ni se componen varios en uno. Se da el hecho (cuándo, con qué, qué pasó) antes que el adjetivo.

    Honest voices

    Habla quien emprende, con sus palabras, y dice también lo que salió mal o no se sabía. Es la segunda cláusula del eslogan y el sentido de «emprender, contado por quien emprende».

    La persona del proyecto es quien cuenta, en primera persona. Se deja el error, la duda y lo que sigue sin resolverse. Las comillas se reservan para citas literales. La marca no habla por ella.

    No bullshit

    Sin postureo, sin jerga y sin relato de éxito inflado. Es la tercera cláusula del eslogan.

    Frases directas y concretas. Si una frase podría estar en un folleto, se reescribe. No se prometen fórmulas ni resultados. Se evitan las palabras infladas («disruptivo», «referente», «inspirador») y el tono de nota de prensa.

    Leitmotiv

    • El asterisco: la letra pequeña de emprender de verdad. Remite a lo que no sale en el titular, el esfuerzo, el riesgo y los fallos, que es lo que cuenta.

    Texto institucional

    • los proyectos y quien los emprende; programa de Singular Works — sello de contenidos
    02

    Logotipo

    Variantes, área de respeto y usos

    El asterisco: la letra pequeña de emprender de verdad. Remite a lo que no sale en el titular, el esfuerzo, el riesgo y los fallos, que es lo que cuenta.

    Leitmotiv

    Variantes

    Color

    Color

    Horizontal · Color

    Otros SVGPDFPNG 554 px

    Claro

    Claro

    Horizontal · Claro

    Otros SVGPDFPNG 554 px

    Color

    Color

    Apilado · Color

    Otros SVGPDFPNG 257 px

    Claro

    Claro

    Apilado · Claro

    Otros SVGPDFPNG 257 px

    Color

    Color

    Icono · Color

    Otros SVGPDFPNG 111 px

    Claro

    Claro

    Icono · Claro

    Otros SVGPDFPNG 111 px

    Diseño del logotipo Carlos Pascual (Singular Beacon)

    Usos prohibidos

    Así noSobre fondo claro, nunca las variantes .W ni .O.B (crema y blanco sobre #F4F4F4 no se leen); sobre fondo oscuro, nunca las de color ni las .B.
    Así noNo deformar ni girar el logotipo; no añadirle sombra, contorno ni efecto; no separar la S del resto del nombre ni cambiar el asterisco de sitio. Sobre fotografía solo cabe en una zona plana donde el tono elegido cumpla 4,5:1 con lo que tiene detrás.
    03

    Color

    Rampas, roles y contrastes

    Rampas

    Primario

    900 #150D00
    800 #302203
    700 #4D3805
    600 #6D510B
    Secundario #8C6B20 Exacto de Illustrator (color.secundario). Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    400 #AF8932
    Color de origen #D4A843 Exacto de Illustrator (color.primario). Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    200 #E7C889
    100 #F8E8C9
    50 #FFF9EC

    Neutro

    Oscuro #0E0E0E Exacto de Illustrator (color.oscuro). Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.
    800 #242424
    700 #3C3C3C
    600 #555555
    Gris #707070 Bordes de campos y separadores con función. Propuesta derivada.
    400 #8C8C8C
    Primario monocromo #AAAAAA Exacto de Illustrator (color.primario-monocromo). Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.
    200 #C7C7C7
    100 #E5E5E5
    Claro #F4F4F4 Exacto de Illustrator (color.claro). Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.
    Blanco #FFFFFF Blanco puro derivado: superficie del tema claro. Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.

    Crema

    900 #12100D
    800 #2A2620
    700 #433E35
    600 #5E574C
    500 #7A7265
    400 #978F81
    300 #B5ADA0
    200 #D0CABF
    Color de origen #EDE8E0 Exacto de Illustrator (color.crema). Rampa de la crema. Paso 100 = color.crema (#EDE8E0), exacto de Illustrator; los demás, derivados.
    50 #FAF8F3

    Éxito

    500 #1B7B3C
    300 #66BE7B

    Aviso

    500 #9E5A0F
    300 #EE9748

    Error

    500 #C13C36
    300 #FD8C80

    Paleta

    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 #FFFFFF
    • Superficie alta #FFFFFF
    • Tinta #0E0E0E
    • Tinta suave #707070
    • Tinta sobre primario #F4F4F4
    • Primario #8C6B20
    • Primario hover #6D510B
    • Acento #8C6B20
    • Borde #707070
    • Foco #8C6B20
    • Éxito #1B7B3C
    • Aviso #9E5A0F
    • Error #C13C36
    • Enlace #0E0E0E

    Oscuro

    • Fondo #0E0E0E
    • Superficie #242424
    • Superficie alta #3C3C3C
    • Tinta #EDE8E0
    • Tinta suave #AAAAAA
    • Tinta sobre primario #0E0E0E
    • Primario #D4A843
    • Primario hover #E7C889
    • Acento #D4A843
    • Borde #707070
    • Foco #D4A843
    • Éxito #66BE7B
    • Aviso #EE9748
    • Error #FD8C80
    • Enlace #EDE8E0

    Contrastes

    Tema claro

    Aa

    Oscuro / Claro

    17.55:1 AAA

    Aa

    Secundario / Claro

    4.50:1 AA

    Aa

    Gris / Claro

    4.50:1 AA

    Aa

    Crema / Oscuro

    15.82:1 AAA

    Aa

    Primario / Oscuro

    8.71:1 AAA

    Aa

    Primario monocromo / Oscuro

    8.30:1 AAA

    Aa

    Tinta / Superficie

    19.30:1 AAA

    Aa

    Tinta suave / Superficie

    4.95:1 AA

    Aa

    Tinta sobre primario / Primario hover

    6.74:1 AA

    Aa

    Éxito / Fondo

    4.83:1 AA

    Aa

    Éxito / Superficie

    5.32:1 AA

    Aa

    Aviso / Fondo

    4.86:1 AA

    Aa

    Aviso / Superficie

    5.35:1 AA

    Aa

    Error / Fondo

    4.81:1 AA

    Aa

    Error / Superficie

    5.29:1 AA

    Aa

    Foco / Superficie

    4.95:1 AA

    Tema oscuro

    Aa

    Tinta / Fondo

    15.82:1 AAA

    Aa

    Tinta / Superficie

    12.72:1 AAA

    Aa

    Tinta / Superficie alta

    9.04:1 AAA

    Aa

    Tinta suave / Fondo

    8.30:1 AAA

    Aa

    Tinta suave / Superficie

    6.68:1 AA

    Aa

    Tinta suave / Superficie alta

    4.74:1 AA

    Aa

    Tinta sobre primario / Primario

    8.71:1 AAA

    Aa

    Tinta sobre primario / Primario hover

    11.96:1 AAA

    Aa

    Éxito / Fondo

    8.47:1 AAA

    Aa

    Éxito / Superficie

    6.81:1 AA

    Aa

    Éxito / Superficie alta

    4.84:1 AA

    Aa

    Aviso / Fondo

    8.41:1 AAA

    Aa

    Aviso / Superficie

    6.76:1 AA

    Aa

    Aviso / Superficie alta

    4.80:1 AA

    Aa

    Error / Fondo

    8.49:1 AAA

    Aa

    Error / Superficie

    6.82:1 AA

    Aa

    Error / Superficie alta

    4.85:1 AA

    Borde / Fondo

    3.89:1 AA, solo texto grande

    Borde / Superficie

    3.13:1 AA, solo texto grande

    Aa

    Foco / Superficie

    7.00:1 AAA

    No usar

    • No usar #D4A843 sobre #F4F4F4: contraste 2.01:1, por debajo de AA.

    • No usar #AAAAAA sobre #F4F4F4: contraste 2.11:1, por debajo de AA.

    • No usar #8C6B20 sobre #0E0E0E: contraste 3.89:1, por debajo de AA.

    • No usar #707070 sobre #0E0E0E: contraste 3.89:1, por debajo de AA.

    04

    Tipografía

    Familias, especímenes y escala

    Familias

    Source Sans 3

    Secundaria

    Outstarting

    300

    Heredado de Singular Works

    Barlow Condensed

    Primaria

    Outstarting

    400700

    Estilos

    Display 61px · 700 · 1 Portadas, cartones y cifras grandes

    Real stories · Honest voices · No bullshit

    Título 1 49px · 700 · 1.05 Título de página o de sección

    Outstarting

    Título 2 39px · 700 · 1.1 Subtítulo y título de tarjeta

    Real stories · Honest voices · No bullshit

    Título 3 31px · 700 · 1.15 Título menor dentro de un bloque

    Outstarting

    Título 4 25px · 700 · 1.2 Títulos

    Real stories · Honest voices · No bullshit

    Título 5 20px · 700 · 1.25 Títulos

    Outstarting

    Cuerpo l 20px · 400 · 1.5 Texto corrido de la interfaz

    Real stories · Honest voices · No bullshit

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

    Outstarting

    Cuerpo s 14px · 400 · 1.45 Notas, pies y texto secundario

    Real stories · Honest voices · No bullshit

    Etiqueta 12px · 700 · 1.35 Antetítulos, etiquetas y metadatos

    Outstarting

    Eslogan 14px · 400 · 1.3

    Real stories · Honest voices · No bullshit

    05

    Espaciado y forma

    Escala, radios y elevación

    Radios

    00px
    22px
    44px
    Marco5.55%

    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.24)

    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

    Real stories · Honest voices · No bullshit

    Real stories · Honest voices · No bullshit

    Seguir leyendo
    Superficie

    Programa

    Real stories · Honest voices · No bullshit

    Real stories · Honest voices · No bullshit

    Seguir leyendo
    Borde

    Programa

    Real stories · Honest voices · No bullshit

    Real stories · Honest voices · No bullshit

    Seguir leyendo
    Acento

    Estados

    Programa

    Real stories · Honest voices · No bullshit

    Real stories · Honest voices · No bullshit

    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">Real stories · Honest voices · No bullshit</h3>
                    <p class="bb-c-card__text">Real stories · Honest voices · No bullshit</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

    Outstarting

    Real stories · Honest voices · No bullshit

    Superficie

    Programa

    Outstarting

    Real stories · Honest voices · No bullshit

    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">Outstarting</h1>
                <p class="bb-c-header__lede">Real stories · Honest voices · No bullshit</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

    Real stories · Honest voices · No bullshit

    Contactar
    Acento

    Real stories · Honest voices · No bullshit

    Contactar
    Superficie
    Código
    <aside class="bb-c-cta bb-c-cta--acento">
                <h2 class="bb-c-cta__title">Real stories · Honest voices · No bullshit</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

    Real stories · Honest voices · No bullshit

    Outstarting
    Filete

    Real stories · Honest voices · No bullshit

    Outstarting
    Superficie
    Código
    <blockquote class="bb-c-quote bb-c-quote--filete">
                <p class="bb-c-quote__text">Real stories · Honest voices · No bullshit</p>
                <cite class="bb-c-quote__author">Outstarting</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

    141

    elementos publicados en su sistema de diseño

    Superficie

    141

    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">141</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 Outstarting?

    Real stories · Honest voices · No bullshit

    ¿Qué la mueve?

    Real stories · Honest voices · No bullshit

    Código
    <div class="bb-c-faq">
                <details class="bb-c-faq__item" open="open">
                    <summary class="bb-c-faq__q">¿Qué es Outstarting?</summary>
                    <p class="bb-c-faq__a">Real stories · Honest voices · No bullshit</p>
                </details>
                <details class="bb-c-faq__item">
                    <summary class="bb-c-faq__q">¿Qué la mueve?</summary>
                    <p class="bb-c-faq__a">Real stories · Honest voices · No bullshit</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

    Outstarting
    • Aviso legal
    • Privacidad
    • Contacto
    Oscuro
    Outstarting
    • 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">Outstarting</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="Outstarting"/>
                </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>Real stories</option><option>Honest voices</option><option>No bullshit</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">Real stories</span>
                        <span class="bb-c-option__text">Outstarting</span>
                    </label><label class="bb-c-option">
                        <input type="radio" name="bb-c-choice-normal"/>
                        <span class="bb-c-option__title">Honest voices</span>
                        <span class="bb-c-option__text">Outstarting</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

    Real stories · Honest voices · No bullshit

    Información

    Recibido: te responde el equipo de Outstarting.

    É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">Real stories · Honest voices · No bullshit</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 16 Vigente Real storiesHonest voices

    Base

    Programa Versión 16 Vigente Real storiesHonest voices

    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 16</span>
                <span class="bb-c-badge bb-c-badge--borde">Vigente</span>
                <span class="bb-c-badge bb-c-badge--borde">Real stories</span><span class="bb-c-badge bb-c-badge--borde">Honest voices</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
    Display61 pxPortadas, cartones y cifras grandes
    Título 149 pxTítulo de página o de sección
    Título 239 pxSubtítulo y título de tarjeta
    Título 331 pxTítulo menor dentro de un bloque
    Título 425 pxTítulos
    Superficie
    EstiloTamañoUso
    Display61 pxPortadas, cartones y cifras grandes
    Título 149 pxTítulo de página o de sección
    Título 239 pxSubtítulo y título de tarjeta
    Título 331 pxTítulo menor dentro de un bloque
    Título 425 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>Display</td><td><code>61 px</code></td><td>Portadas, cartones y cifras grandes</td>
                    </tr><tr>
                        <td>Título 1</td><td><code>49 px</code></td><td>Título de página o de sección</td>
                    </tr><tr>
                        <td>Título 2</td><td><code>39 px</code></td><td>Subtítulo y título de tarjeta</td>
                    </tr><tr>
                        <td>Título 3</td><td><code>31 px</code></td><td>Título menor dentro de un bloque</td>
                    </tr><tr>
                        <td>Título 4</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 libro90 %

    Acento

    Propio de la marca en este libro90 %

    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>90 %</strong></p>
                <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="90" aria-label="Propio de la marca en este libro">
                    <span class="bb-c-progress__bar" style="width: 90%"></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

    Outstarting — Intro

    Outstarting — Intro
    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 554 pxPNG 1107 px

    • Horizontal · Claro

      Otros SVGPDFPNG 554 pxPNG 1107 px

    • Apilado · Color

      Otros SVGPDFPNG 257 pxPNG 513 px

    • Apilado · Claro

      Otros SVGPDFPNG 257 pxPNG 514 px

    • Icono · Color

      Otros SVGPDFPNG 111 pxPNG 220 px

    • Icono · Claro

      Otros SVGPDFPNG 111 pxPNG 220 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

    6 / 6 líneas dentro del tope

    Contexto
    declaracion.slogan: Real stories · Honest voices · No bullshit
    declaracion.institutional: los proyectos y quien los emprende; programa de Singular Works — sello de contenidos
    declaracion.leitmotiv: El asterisco: la letra pequeña de emprender de verdad. Remite a lo que no sale en el titular, el esfuerzo, el riesgo y los fallos, que es lo que cuenta.
    valor.real-stories: Real stories · Cada pieza parte de un proyecto con nombre y de quien lo emprende. No se inventan casos ni se componen varios en uno. Se da el hecho (cuándo, con qué, qué pasó) antes que el adjetivo. · Lo que se cuenta ha pasado: un proyecto concreto y una persona concreta. Es la primera cláusula del eslogan y el sentido de «los proyectos y quien los emprende».
    valor.honest-voices: Honest voices · La persona del proyecto es quien cuenta, en primera persona. Se deja el error, la duda y lo que sigue sin resolverse. Las comillas se reservan para citas literales. La marca no habla por ella. · Habla quien emprende, con sus palabras, y dice también lo que salió mal o no se sabía. Es la segunda cláusula del eslogan y el sentido de «emprender, contado por quien emprende».
    valor.no-bullshit: No bullshit · Frases directas y concretas. Si una frase podría estar en un folleto, se reescribe. No se prometen fórmulas ni resultados. Se evitan las palabras infladas («disruptivo», «referente», «inspirador») y el tono de nota de prensa. · Sin postureo, sin jerga y sin relato de éxito inflado. Es la tercera cláusula del eslogan.
    Cómo pedirlo
    env["sb.brand"].sb_context("outstarting", purpose="redactar")

    Directrices para agentes de imágenes

    19 / 59 líneas dentro del tope

    Contexto
    NUNCA accessibility color.prohibido.1: No usar #D4A843 sobre #F4F4F4: contraste 2.01:1, por debajo de AA.
    NUNCA accessibility color.prohibido.2: No usar #AAAAAA sobre #F4F4F4: contraste 2.11:1, por debajo de AA.
    NUNCA accessibility color.prohibido.3: No usar #8C6B20 sobre #0E0E0E: contraste 3.89:1, por debajo de AA.
    NUNCA accessibility color.prohibido.4: No usar #707070 sobre #0E0E0E: contraste 3.89:1, por debajo de AA.
    NUNCA logo directriz.logo.never.sobre-fondo-claro-nunca-las-variantes: Sobre fondo claro, nunca las variantes .W ni .O.B (crema y blanco sobre #F4F4F4 no se leen); sobre fondo oscuro, nunca las de color ni las .B. (Se deduce de los colores de cada variante: la letra crema #EDE8E0 sobre #F4F4F4 da un contraste inferior a 1,2:1 (calculado).)
    NUNCA logo directriz.logo.never.no-deformar-ni-girar-el-logotipo: No deformar ni girar el logotipo; no añadirle sombra, contorno ni efecto; no separar la S del resto del nombre ni cambiar el asterisco de sitio. Sobre fotografía solo cabe en una zona plana donde el tono elegido cumpla 4,5:1 con lo que tiene detrás. (Consecuencia de «no se redibuja ni se recolorea»: cada variante es un fichero cerrado. La condición de contraste se aplica a las letras, que son lo que se lee.)
    color.primario.50: #fff9ec · Oro 50 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.100: #f8e8c9 · Oro 100 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.200: #e7c889 · Oro 200 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario: #d4a843 · Oro · Exacto de Illustrator (color.primario). Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.400: #af8932 · Oro 400 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.secundario: #8c6b20 · Oro oscuro · Exacto de Illustrator (color.secundario). Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.600: #6d510b · Oro 600 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.700: #4d3805 · Oro 700 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.800: #302203 · Oro 800 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.primario.900: #150d00 · Oro 900 · Derivado en OKLCH. Rampa del oro. Paso 300 = color.primario (#D4A843) y paso 500 = color.secundario (#8C6B20), exactos de Illustrator; los demás, derivados.
    color.claro: #f4f4f4 · Blanco roto · Exacto de Illustrator (color.claro). Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.
    color.neutro.100: #e5e5e5 · Neutro 100 · Derivado en OKLCH. Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.
    color.neutro.200: #c7c7c7 · Neutro 200 · Derivado en OKLCH. Rampa neutra. Pasos 50, 300, 500 y 900 = color.claro, color.primario-monocromo, color.gris y color.oscuro, exactos de Illustrator; los demás, derivados.
    … 40 líneas recortadas por el tope, 0 obligatorias: pide un max_chars mayor.
    Cómo pedirlo
    env["sb.brand"].sb_context("outstarting", purpose="imagen")
    13

    Versiones

    Historial publicado

    1. v16 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