Sistema de diseño

Parte de Singular Works

Valores

Texto institucional

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

Variantes

Color

Horizontal · Color

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Negro

Horizontal · Negro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Blanco sobre negro

Horizontal · Blanco sobre negro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Claro

Horizontal · Claro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Color

Logotipo · Color

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Color

Icono · Color

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Negro

Icono · Negro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Blanco sobre negro

Icono · Blanco sobre negro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Claro

Icono · Claro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Color

Apilado · Color

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Negro

Apilado · Negro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Blanco sobre negro

Apilado · Blanco sobre negro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Claro

Apilado · Claro

Con margen SVGPDFPNG 128 px

Sin margen SVGPDFPNG 128 px

Área de respeto

x

Usos prohibidos

Rampas

Roles

Contrastes

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.

Familias

Estilos

Radios

Elevación

Sobre superficie clara, para que la sombra se vea en cualquier tema.

Plantillas de la marca

Word con membrete

A4 con el logotipo, el pie de la sociedad, los estilos de la marca y marcadores para escribir encima.

Descargar .docx

La firma de correo es el cierre de cada mensaje de la marca: el logotipo, el nombre y el cargo de la persona, sus datos de contacto y, si la marca lo publica, un banner y un aviso legal. Se genera desde la versión publicada de la marca, así que cambia cuando cambia la marca.

Nombre Apellido

Cargo

Teléfono · correo electrónico

Plantillas de la marca

PowerPoint 16:9

Portada, separador, contenido, dos columnas, imagen y texto, cifra o cita y cierre con contacto, cada una con sus marcadores.

Descargar .pptx

Piel

Descargar una muestra del deck. Contenido ficticio, sin ningún dato de cliente.

Estructura

1. SB Cover Portada: título, cliente, referencia, fecha y logotipo del cliente
2. SB Agenda Índice, con más de dos secciones
3. SB Section Separador, con 4 láminas o más en una sección
4. SB Content Las secciones incluidas, en su orden
5. SB Closing Cierre: agradecimiento y contacto del responsable

Piezas

Secciones que puede llevar el cuerpo

• Antecedentes
• Estado del arte
• Objetivos, requisitos y alcance
• Planificación e hitos
• Metodología
• Modelo de gobierno
• Equipo
• Equipo del cliente
• Casos de éxito
• Honorarios
• Condiciones de pago
• Términos y condiciones
• Libre

Las plantillas de la marca viven en las secciones de Aplicaciones: cada una enseña la pieza real.

Ficheros

• Horizontal · Color

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Horizontal · Negro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Horizontal · Blanco sobre negro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Horizontal · Claro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Logotipo · Color

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icono · Color

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icono · Negro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icono · Blanco sobre negro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icono · Claro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Apilado · Color

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Apilado · Negro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Apilado · Blanco sobre negro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Apilado · Claro

  Con margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Sin margen SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

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

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.

env["sb.brand"].sb_context("outstarting", purpose="redactar")

Directrices para agentes de imágenes

19 / 45 líneas dentro del tope

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.

env["sb.brand"].sb_context("outstarting", purpose="imagen")

1. v2 2026-11-04 Aprobación Vigente 129 claves cambiadas
2. v1 2026-11-03 Aprobación