Ir al contenido

Sistema de diseño

Historias reales · Voces honestas · Sin mentiras

  • Versión1
  • AlcancePrograma
  • Fecha2026-11-09
  • Pertenece aSingular Works
  • OrigenOdoo, versión publicada
01

Identidad

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

Parte de Singular Works

Historias reales · Voces honestas · Sin mentiras

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

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

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

Barlow Condensed

Primaria

Outstarting

400800

Estilos

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

Historias reales · Voces honestas · Sin mentiras

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

Historias reales · Voces honestas · Sin mentiras

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

Outstarting

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

Historias reales · Voces honestas · Sin mentiras

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

Outstarting

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

Historias reales · Voces honestas · Sin mentiras

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

Outstarting

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

Historias reales · Voces honestas · Sin mentiras

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

Outstarting

Eslogan 14px · 400 · 1.3

Historias reales · Voces honestas · Sin mentiras

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

Historias reales · Voces honestas · Sin mentiras

Historias reales · Voces honestas · Sin mentiras

Seguir leyendo
Superficie

Programa

Historias reales · Voces honestas · Sin mentiras

Historias reales · Voces honestas · Sin mentiras

Seguir leyendo
Borde

Programa

Historias reales · Voces honestas · Sin mentiras

Historias reales · Voces honestas · Sin mentiras

Seguir leyendo
Acento

Estados

Programa

Historias reales · Voces honestas · Sin mentiras

Historias reales · Voces honestas · Sin mentiras

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">Historias reales · Voces honestas · Sin mentiras</h3>
                <p class="bb-c-card__text">Historias reales · Voces honestas · Sin mentiras</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

Historias reales · Voces honestas · Sin mentiras

Superficie

Programa

Outstarting

Historias reales · Voces honestas · Sin mentiras

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">Historias reales · Voces honestas · Sin mentiras</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">Historias reales · Voces honestas · Sin mentiras</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

Historias reales · Voces honestas · Sin mentiras

Outstarting
Filete

Historias reales · Voces honestas · Sin mentiras

Outstarting
Superficie
Código
<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">Historias reales · Voces honestas · Sin mentiras</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

133

elementos publicados en su sistema de diseño

Superficie

133

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">133</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?

Historias reales · Voces honestas · Sin mentiras

¿Qué la mueve?

Historias reales · Voces honestas · Sin mentiras

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">Historias reales · Voces honestas · Sin mentiras</p>
            </details>
            <details class="bb-c-faq__item">
                <summary class="bb-c-faq__q">¿Qué la mueve?</summary>
                <p class="bb-c-faq__a">Historias reales · Voces honestas · Sin mentiras</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

Oscuro
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

Historias reales · Voces honestas · Sin mentiras

Información

Recibido: te responde el equipo de Outstarting.

Éxito
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">Historias reales · Voces honestas · Sin mentiras</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 1 Vigente Real storiesHonest voices

Base

Programa Versión 1 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 1</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 libro100 %

Acento

Propio de la marca en este libro100 %

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

Audiovisual

Pódcast, vídeo y sonido

Vídeos

  • Vídeo de intro del programa
  • Vídeo de intro del programa
  • Vídeo de cierre del programa
  • Vídeo de cierre del programa
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

Ficheros

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: Historias reales · Voces honestas · Sin mentiras
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 / 45 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.
… 26 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. v1 2026-11-09 Aprobación Vigente