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.
Texto institucional
los proyectos y quien los emprende; programa de Singular Works — sello de contenidos
Margen libre en los cuatro lados: 25 % de la altura del logotipo
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#8C6B20Exacto 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#D4A843Exacto 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#0E0E0EExacto 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#707070Bordes de campos y separadores con función. Propuesta derivada.
400#8C8C8C
Primario monocromo#AAAAAAExacto 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#F4F4F4Exacto 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#FFFFFFBlanco 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#EDE8E0Exacto de Illustrator (color.crema). Rampa de la crema. Paso 100 = color.crema (#EDE8E0), exacto de Illustrator; los demás, derivados.
50#FAF8F3
Exito
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
Exito#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
Exito#66BE7B
Aviso#EE9748
Error#FD8C80
Enlace#EDE8E0
Contrastes
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 / fondo
17.55:1
AAA
Aa
tinta / superficie
19.30:1
AAA
Aa
tinta / superficie-alta
19.30:1
AAA
Aa
tinta-suave / fondo
4.50:1
AA
Aa
tinta-suave / superficie
4.95:1
AA
Aa
tinta-suave / superficie-alta
4.95:1
AA
Aa
tinta-sobre-primario / primario
4.50:1
AA
Aa
tinta-sobre-primario / primario-hover
6.74:1
AA
Aa
enlace / fondo
17.55:1
AAA
Aa
enlace / superficie
19.30:1
AAA
Aa
enlace / superficie-alta
19.30:1
AAA
Aa
exito / fondo
4.83:1
AA
Aa
exito / superficie
5.32:1
AA
Aa
exito / superficie-alta
5.32:1
AA
Aa
aviso / fondo
4.86:1
AA
Aa
aviso / superficie
5.35:1
AA
Aa
aviso / superficie-alta
5.35:1
AA
Aa
error / fondo
4.81:1
AA
Aa
error / superficie
5.29:1
AA
Aa
error / superficie-alta
5.29:1
AA
Aa
primario / fondo
4.50:1
AA
Aa
acento / fondo
4.50:1
AA
Aa
borde / fondo
4.50:1
AA
Aa
borde / superficie
4.95:1
AA
Aa
foco / fondo
4.50:1
AA
Aa
foco / superficie
4.95:1
AA
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
enlace / fondo
15.82:1
AAA
Aa
enlace / superficie
12.72:1
AAA
Aa
enlace / superficie-alta
9.04:1
AAA
Aa
exito / fondo
8.47:1
AAA
Aa
exito / superficie
6.81:1
AA
Aa
exito / 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
Aa
primario / fondo
8.71:1
AAA
Aa
acento / fondo
8.71:1
AAA
borde / fondo
3.89:1
AA, solo texto grande
borde / superficie
3.13:1
AA, solo texto grande
Aa
foco / fondo
8.71:1
AAA
Aa
foco / superficie
7.00:1
AAA
Combinaciones prohibidas
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
400700
Estilos
Display61px · 700 · 1Portadas, cartones y cifras grandes
Real stories · Honest voices · No bullshit
Título 149px · 700 · 1.05Título de página o de sección
Outstarting
Título 239px · 700 · 1.1Subtítulo y título de tarjeta
Real stories · Honest voices · No bullshit
Título 331px · 700 · 1.15Título menor dentro de un bloque
Outstarting
Título 425px · 700 · 1.2Títulos
Real stories · Honest voices · No bullshit
Título 520px · 700 · 1.25Títulos
Outstarting
Cuerpo l20px · 400 · 1.5Texto corrido de la interfaz
Real stories · Honest voices · No bullshit
Cuerpo16px · 400 · 1.5Texto corrido de la interfaz
Outstarting
Cuerpo s14px · 400 · 1.45Notas, pies y texto secundario
Real stories · Honest voices · No bullshit
Etiqueta12px · 700 · 1.35Antetítulos, etiquetas y metadatos
Outstarting
Eslogan14px · 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
10 1px 2px rgba(14,14,14,0.12)
20 4px 12px rgba(14,14,14,0.16)
30 12px 32px rgba(14,14,14,0.24)
Sobre superficie clara, para que la sombra se vea en cualquier tema.
06
Componentes
Piezas web estándar del grupo
Botón
Un solo botón principal por vista; lo demás, secundario o fantasma.
Variantes, estados y código
La acción de una vista.
Variantes
Secundario
Fantasma
Estados
Normal
Encima
Activo
Deshabilitado
Regla de uso Un solo botón principal por vista; lo demás, secundario o fantasma.
Una cifra real y con fuente; si no hay dato, no hay estadística.
Variantes, estados y código
Una cifra con lo que significa.
Variantes
129
elementos publicados en su sistema de diseño
Acento
Regla de uso Una cifra real y con fuente; si no hay dato, no hay estadística.
Código
<div class="bb-c-stat bb-c-stat--superficie">
<p class="bb-c-stat__value">129</p>
<p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
</div>
Preguntas frecuentes
¿Qué es Outstarting?
Real stories · Honest voices · No bullshit
¿Qué la mueve?
Real stories · Honest voices · No bullshit
Preguntas que la gente hace de verdad, con la respuesta en la primera línea.
Variantes, estados y código
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.
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
Sin promociones: identidad, enlaces legales y contacto.
Variantes, estados y código
El cierre de todas las páginas: marca y enlaces.
Variantes
Claro
Regla de uso Sin promociones: identidad, enlaces legales y contacto.
Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
Variantes, estados y código
Datos en filas y columnas, con cabecera.
Variantes
Estilo
Tamaño
Uso
Display
61 px
Portadas, cartones y cifras grandes
Título 1
49 px
Título de página o de sección
Título 2
39 px
Subtítulo y título de tarjeta
Título 3
31 px
Título menor dentro de un bloque
Título 4
25 px
Títulos
Rayada
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
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
Propio de la marca en este libro100 %
Siempre con la cifra en texto junto a la barra.
Variantes, estados y código
Cuánto lleva algo hecho, como barra y como cifra.
Variantes
Propio de la marca en este libro100 %
Línea
Regla de uso Siempre con la cifra en texto junto a la barra.
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>
Lo publicado para esta audiencia, tal como lo lee un agente: lo obligatorio va primero.
Estilo de comunicación
5 / 5 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
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.
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.