Design system

Part of Singular Works

Values

Institutional text

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

Variants

Colour

Horizontal · Color

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Negro

Horizontal · Black

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Blanco sobre negro

Horizontal · White on black

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Claro

Horizontal · Light

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Colour

Logotype · Color

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Colour

Icon · Color

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Negro

Icon · Black

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Blanco sobre negro

Icon · White on black

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Claro

Icon · Light

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Colour

Stacked · Color

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Negro

Stacked · Black

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Blanco sobre negro

Stacked · White on black

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Claro

Stacked · Light

With margin SVGPDFPNG 128 px

Without margin SVGPDFPNG 128 px

Clear space

x

Forbidden uses

Ramps

Roles

Contrasts

Forbidden combinations

• 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.

Families

Styles

Radii

Elevation

On a light surface, so the shadow shows in any theme.

Brand templates

Word letterhead

A4 with the logo, the company foot, the brand styles and placeholders to write over.

Download .docx

The email signature closes every message from the brand: the logo, the person's name and job title, contact details and, if the brand publishes them, a banner and a legal notice. It is generated from the brand's published version, so it changes when the brand does.

First Last

Job title

Phone · email

Brand templates

PowerPoint 16:9

Cover, divider, content, two columns, picture and text, figure or quote and closing with contact, each with its placeholders.

Download .pptx

Skin

Download a sample of the deck. Fictitious content, with no client data.

Structure

1. SB Cover Cover: title, client, reference, date and client logo
2. SB Agenda Contents, with more than two sections
3. SB Section Divider, with 4 slides or more in a section
4. SB Content The included sections, in their order
5. SB Closing Closing: thanks and contact of the owner

Pieces

Sections the body can carry

• Background
• State of the Art
• Goals, Requirements and Scope
• Planning and Milestones
• Methodology
• Governance Model
• Team
• Client Team
• Success Stories
• Fees
• Payment Terms
• Terms and Conditions
• Custom

The brand's templates live in the Applications sections: each one shows the real piece.

Files

• Horizontal · Color

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Horizontal · Black

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Horizontal · White on black

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Horizontal · Light

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Logotype · Color

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icon · Color

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icon · Black

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icon · White on black

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Icon · Light

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Stacked · Color

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Stacked · Black

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Stacked · White on black

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

• Stacked · Light

  With margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

  Without margin SVGPDFPNG 128 pxPNG 256 pxPNG 512 pxPNG 1024 pxPNG 1920 px

What is published for this audience, as an agent reads it: what is mandatory comes first.

Communication style

5 / 5 lines within the limit

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", language="en_US")

Guidelines for image agents

19 / 45 lines within the limit

NEVER accessibility color.prohibido.1: No usar #D4A843 sobre #F4F4F4: contraste 2.01:1, por debajo de AA.
NEVER accessibility color.prohibido.2: No usar #AAAAAA sobre #F4F4F4: contraste 2.11:1, por debajo de AA.
NEVER accessibility color.prohibido.3: No usar #8C6B20 sobre #0E0E0E: contraste 3.89:1, por debajo de AA.
NEVER accessibility color.prohibido.4: No usar #707070 sobre #0E0E0E: contraste 3.89:1, por debajo de AA.
NEVER 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).)
NEVER 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 lines cut by the limit, 0 mandatory: request a larger max_chars.

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

1. v2 2026-11-04 Approved Current 129 keys changed
2. v1 2026-11-03 Approved