Singular Community · Sistema de diseño

01

Identidad

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

Lo que hereda Heredado de The Beacon Holding

Propósito

El grupo es la forma de crear un impacto positivo en el mundo

Heredado de The Beacon Holding

Pilares

Heredado de The Beacon Holding

Datos para decidir
Personas en el centro
Tecnología como medio
Gestión por proyectos, con márgenes unitarios
Los valores, la visión y la ética profesional que nos guían

Valores

Heredado de The Beacon Holding

Impacto Positivo

Actuamos conforme a nuestros valores y nuestro Código Ético, tratamos de forma respetuosa y agradable a todas las partes, tenemos conciencia social y ambiental y una clara determinación de aportar valor construyendo relaciones que cuidamos en el largo plazo.

Bondad, Honestidad, Lealtad y Respeto

Aporte de Valor

Ofrecemos soluciones de alta calidad y trabajamos para que cada euro invertido por nuestros clientes se transforme en valor para su firma. Nos responsabilizamos del ciclo de vida completo de los proyectos operando conforme a los principios de eficiencia y eficacia, comenzando con el final en mente y buscando sinergias y estrategias win-win.

Vocación de Excelencia y Orientación a Resultados

Adaptabilidad

Nuestro sector, así como las necesidades de nuestros clientes están en constante cambio. Somos conscientes, considerados y comprensivos con estas necesidades. Tenemos voluntad de ayudar y lo hacemos siendo flexibles en cuanto a cambios en los requisitos iniciales, plazos y costes.

Flexibilidad, Empatía y Transparencia

Texto institucional 1

Digital Branding (Londres, 2015: origen del grupo, no es división)

02

Logotipo

Variantes, área de respeto y usos

Variantes

Color

Horizontal · Color

Otros SVG PNG 1024 px

Claro

Horizontal · Claro

Otros SVG PNG 1024 px

Color

Apilado · Color

Otros SVG PNG 1024 px

Claro

Apilado · Claro

Otros SVG PNG 1024 px

Color

Icono · Color

Heredado de The Beacon Holding

Otros SVG PNG 1024 px

Claro

Icono · Claro

Heredado de The Beacon Holding

Otros SVG PNG 1024 px

03

Color

Pendiente

Colores

Todavía no está publicado para esta marca.

04

Tipografía

Pendiente

Tipografía

Todavía no está publicado para esta marca.

05

Iconografía

Pendiente

Iconos

Todavía no está publicado para esta marca.

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.

Código

<button type="button" class="bb-c-button bb-c-button--primario">Contactar</button>

Tarjeta

Marca

Un sistema de diseño compartido

Seguir leyendo

Una idea por tarjeta, y todas las de una fila del mismo alto.

Variantes, estados y código

Un contenido con título, texto y enlace.

Variantes

Marca

Un sistema de diseño compartido

Seguir leyendo

Borde

Marca

Un sistema de diseño compartido

Seguir leyendo

Acento

Estados

Marca

Un sistema de diseño compartido

Seguir leyendo

Normal

Marca

Un sistema de diseño compartido

Seguir leyendo

Encima

Regla de uso Una idea por tarjeta, y todas las de una fila del mismo alto.

Código

<article class="bb-c-card bb-c-card--superficie">
                <p class="bb-c-card__over">Marca</p>
                <h3 class="bb-c-card__title">Un sistema de diseño compartido</h3>
                <p class="bb-c-card__text">Un sistema de diseño compartido</p>
                <a class="bb-c-card__link" href="#">Seguir leyendo</a>
        </article>

Cabecera de página

Marca

Singular Community

Un sistema de diseño compartido

Un solo título principal por página, que diga de qué va en una línea.

Variantes, estados y código

La apertura de una página: antetítulo, título y entradilla.

Variantes

Marca

Singular Community

Un sistema de diseño compartido

Acento

Regla de uso Un solo título principal por página, que diga de qué va en una línea.

Código

<header class="bb-c-header bb-c-header--superficie">
            <p class="bb-c-header__over">Marca</p>
            <h1 class="bb-c-header__title">Singular Community</h1>
            <p class="bb-c-header__lede">Un sistema de diseño compartido</p>
        </header>

Llamada a la acción

Una por página, al final, con un verbo que diga qué pasa al pulsar.

Variantes, estados y código

El cierre de una página, con una sola acción.

Variantes

Superficie

Regla de uso Una por página, al final, con un verbo que diga qué pasa al pulsar.

Código

<aside class="bb-c-cta bb-c-cta--acento">
            <h2 class="bb-c-cta__title">Un sistema de diseño compartido</h2>
            <a class="bb-c-button bb-c-button--primario" href="#">Contactar</a>
        </aside>

Cita

Un sistema de diseño compartido
Singular Community

Siempre con autoría; si no se puede atribuir, no es una cita.

Variantes, estados y código

Una frase destacada con su autoría.

Variantes

Un sistema de diseño compartido
Singular Community

Superficie

Regla de uso Siempre con autoría; si no se puede atribuir, no es una cita.

Código

<blockquote class="bb-c-quote bb-c-quote--filete">
            <p class="bb-c-quote__text">Un sistema de diseño compartido</p>
            <cite class="bb-c-quote__author">Singular Community</cite>
        </blockquote>

Estadística

16

elementos publicados en su sistema de diseño

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

16

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">16</p>
            <p class="bb-c-stat__label">elementos publicados en su sistema de diseño</p>
        </div>

Preguntas frecuentes

¿Qué es Singular Community?

Un sistema de diseño compartido

¿Qué la mueve?

Un sistema de diseño compartido

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 Singular Community?</summary>
                <p class="bb-c-faq__a">Un sistema de diseño compartido</p>
            </details>
            <details class="bb-c-faq__item">
                <summary class="bb-c-faq__q">¿Qué la mueve?</summary>
                <p class="bb-c-faq__a">Un sistema de diseño compartido</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.

Código

<footer class="bb-c-footer bb-c-footer--oscuro" data-bb-theme="oscuro">
            <strong class="bb-c-footer__brand">Singular Community</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

Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.

Variantes, estados y código

Campos de texto, correo y selección con su etiqueta, su ayuda y su error.

Estados

Normal

Foco

Error

Deshabilitado

Regla de uso Cada campo con su etiqueta visible; el error se dice con palabras, no solo con color.

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="Singular Community"/>
            </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>Singular Community</option>
                </select>
            </label>
        </form>

Selección

Tema Singular Community Singular Community

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, estados y código

Elegir una opción entre tarjetas, o varias con casillas.

Variantes

Tema Singular Community

Casillas

Estados

Tema Singular Community Singular Community

Normal

Tema Singular Community Singular Community

Foco

Tema Singular Community Singular Community

Deshabilitado

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.

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">Singular Community</span>
                    <span class="bb-c-option__text">Singular Community</span>
                </label>
        </fieldset>

Avisos

Un sistema de diseño compartido

Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.

Variantes, estados y código

Un mensaje breve sobre lo que acaba de pasar.

Variantes

Recibido: te responde el equipo de Singular Community.

Éxito

No se ha podido enviar. Inténtalo de nuevo en unos minutos.

Error

Regla de uso Una frase que dice qué ha pasado y qué hacer; el color nunca es la única señal.

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">Un sistema de diseño compartido</p>
        </div>

Insignias

Marca Versión 1 Vigente

Una o dos palabras; nunca como botón.

Variantes, estados y código

Etiquetas cortas de estado, tipo o categoría.

Variantes

Marca Versión 1 Vigente

Compacta

Regla de uso Una o dos palabras; nunca como botón.

Código

<p class="bb-c-badges bb-c-badges--base">
            <span class="bb-c-badge bb-c-badge--acento">Marca</span>
            <span class="bb-c-badge">Versión 1</span>
            <span class="bb-c-badge bb-c-badge--borde">Vigente</span>
        </p>

Tabla

Estilo	Tamaño	Uso
Singular Community	—	Marca

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
Singular Community	—	Marca

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>Singular Community</td><td>—</td><td>Marca</td></tr>
            </tbody>
        </table>

Progreso

Propio de la marca en este libro25 %

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 libro25 %

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>25 %</strong></p>
            <div class="bb-c-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="Propio de la marca en este libro">
                <span class="bb-c-progress__bar" style="width: 25%"></span>
            </div>
        </div>

07

Firma

La firma de correo de la marca

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

Vista previa con datos ficticios

Las personas del equipo generan su firma desde sus Preferencias de Odoo, con una sesión de empleado.

08

Presentaciones

La piel de esta marca y la estructura común

Piel

Contraste mínimo de texto: 21.0:1

Composición

Titulares: Open Sans Semibold
Texto: Open Sans
Margen: 1.25 in
Separación: 0.35 in
Radio de tarjeta: 0 in
Escala: portada, título, rótulo: 40 · 32 · 24 pt

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

Estructura

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

Disposiciones de la plantilla

Portada: SB Cover
Índice: SB Agenda
Separador: SB Section
Texto: SB Content
Dos columnas: SB Two Columns
Tres columnas: SB Three Columns
Indicadores: SB KPI Tiles
Tabla: SB Table
Gantt: SB Gantt
Equipo: SB Team
Cierre: SB Closing
En blanco: SB Blank

Secciones con láminas propias

Objetivos, requisitos y alcance
Planificación e hitos
Modelo de gobierno
Equipo
Casos de éxito
Honorarios
Condiciones de pago
Términos y condiciones

09

Propuestas

Piezas que se imprimen

Piezas

Portada

A sangre, con el arte de la casa.

Cuerpo

Las secciones incluidas, numeradas, con cabecera y pie del sistema de documentos.

Aceptación

A sangre, con las casillas donde firma el cliente.

Contraportada

A sangre, con el arte y el pie legal.

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

10

Plantillas

Dónde están las plantillas de la marca

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

11

Personas

Quién hace la marca

Pendiente

Equipo pendiente de consentimiento

Las personas del equipo aparecerán aquí cuando den su consentimiento para hacerlo público.

12

Descargas

Tokens generados y ficheros

tokens.css Variables CSS de la marca tokens.json Tokens legibles por máquina

Ficheros

Horizontal · Color

Otros SVG PNG 1024 px
Horizontal · Claro

Otros SVG PNG 1024 px
Apilado · Color

Otros SVG PNG 1024 px
Apilado · Claro

Otros SVG PNG 1024 px
Icono · Color

Otros SVG PNG 1024 px
Icono · Claro

Otros SVG PNG 1024 px

13

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

10 / 10 líneas dentro del tope

Contexto

declaracion.proposito: El grupo es la forma de crear un impacto positivo en el mundo
declaracion.origen: Digital Branding (Londres, 2015: origen del grupo, no es división)
valor.pilar.datos-para-decidir: Datos para decidir
valor.pilar.personas-en-el-centro: Personas en el centro
valor.pilar.tecnologia-como-medio: Tecnología como medio
valor.pilar.gestion-por-proyectos: Gestión por proyectos, con márgenes unitarios
valor.pilar.valores-vision-etica: Los valores, la visión y la ética profesional que nos guían
valor.impacto-positivo: Impacto Positivo · Bondad, Honestidad, Lealtad y Respeto · Actuamos conforme a nuestros valores y nuestro Código Ético, tratamos de forma respetuosa y agradable a todas las partes, tenemos conciencia social y ambiental y una clara determinación de aportar valor construyendo relaciones que cuidamos en el largo plazo.
valor.aporte-de-valor: Aporte de Valor · Vocación de Excelencia y Orientación a Resultados · Ofrecemos soluciones de alta calidad y trabajamos para que cada euro invertido por nuestros clientes se transforme en valor para su firma. Nos responsabilizamos del ciclo de vida completo de los proyectos operando conforme a los principios de eficiencia y eficacia, comenzando con el final en mente y buscando sinergias y estrategias win-win.
valor.adaptabilidad: Adaptabilidad · Flexibilidad, Empatía y Transparencia · Nuestro sector, así como las necesidades de nuestros clientes están en constante cambio. Somos conscientes, considerados y comprensivos con estas necesidades. Tenemos voluntad de ayudar y lo hacemos siendo flexibles en cuanto a cambios en los requisitos iniciales, plazos y costes.

Cómo pedirlo

env["sb.brand"].sb_context("singular-community", purpose="redactar")

14

Versiones

Historial publicado

v1 2026-11-05 Aprobación Vigente