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.
Diseño del logotipoCarlos 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#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
Éxito
500#1B7B3C
300#66BE7B
Aviso
500#9E5A0F
300#EE9748
Error
500#C13C36
300#FD8C80
Paleta
Cielo#8FD3FFRGB 143, 211, 255Cielo; azul claro para enlaces, foco y primario en tema oscuro.
Heredado de Singular Works
Ámbar#FF9A62RGB 255, 154, 98Ámbar de la web; decoración, no texto.
Heredado de Singular Works
Noche#021620RGB 2, 22, 32Noche de la web; fondos muy oscuros de cabecera.
Heredado de Singular Works
Tinta#05283ARGB 5, 40, 58Tinta de la web; degradado bajo texto sobre foto y sombras.
Heredado de Singular Works
Solape#56ABE2RGB 86, 171, 226Solape por transparencia de los iconos de app (0,6 × #8FD3FF + 0,4 × #006EB7).
Heredado de Singular Works
Fondo oscuro#262A36RGB 38, 42, 54Fondo oscuro de la hoja de contacto de iconos.
Heredado de Singular Works
Sombra#02161FRGB 2, 22, 31Sombras del duotono de foto (tratamiento en revisión).
Heredado de Singular Works
Medio#006088RGB 0, 96, 136Medios tonos del duotono de foto (tratamiento en revisión).
Heredado de Singular Works
Luz#E2EEF4RGB 226, 238, 244Luces del duotono de foto (tratamiento en revisión).
Heredado de Singular Works
Claro#00672CRGB 0, 103, 44
Heredado de Singular Works
Claro#6D5000RGB 109, 80, 0
Heredado de Singular Works
Oscuro#7CD591RGB 124, 213, 145
Heredado de Singular Works
Oscuro#E1B75CRGB 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
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
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.
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.
Regla de uso Solo para datos que se comparan; la cabecera dice siempre qué es cada columna.
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
Superficie
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
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>
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.
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.