susana/BeyondCXAnalytics-Demo

Fork 0

Files

sujucu70 3ef6417dfc feat: Anonimización inicial a ACME Demo

2026-02-04 11:40:20 +01:00

51 KiB

Raw Permalink Blame History

Brand Identity & Design Guidelines - Beyond

Version: 1.0
Last Updated: January 2025
Status: Official Brand Standards

Brand Essence
Core Identity Elements
Design Applications
Data Visualization Guidelines
The McKinsey Standard
Usage Rules
Asset Library Reference
Quick Reference Cheatsheet

1. Brand Essence

1.1 Brand Positioning

Beyond es una empresa Service-Tech española que transforma operaciones de contact center mediante diagnósticos basados en IA. Nuestro posicionamiento:

"Rigor McKinsey a precio de startup"

Ofrecemos análisis de €50K-€200K de las consultoras tradicionales por €4,900, entregados en 14 días con ROI cuantificado.

Target: Mid-market español (€500K-5M revenue)
Buyer Persona: Director de Operaciones, CXO, COO
Diferenciador Core: Percentiles vs promedios, velocidad vs exhaustividad, accesibilidad vs exclusividad

1.2 Brand Values

Nuestra Forma de Trabajar:

"No somos una consultora tradicional. Nos metemos en la cocina, asumimos riesgos contigo y operamos como parte de tu equipo."

Los 5 Pilares de Beyond

1. Innovación Pragmática
Aplicamos IA con propósito, resolviendo problemas reales con sentido común.

Implicación visual: No usamos estética "futurista sci-fi". Nuestros diseños son modernos pero accesibles. La tecnología debe sentirse útil, no intimidante.

2. Fricción Cero
Lideramos y absorbemos la complejidad del cambio para que tú avances sin interrupciones.

Implicación visual: Diseño limpio, claro, sin elementos que distraigan. White space generoso. Mensajes directos. Navegación intuitiva.

3. Frugalidad Inteligente
Menos recursos, más resultados: eficiencia que impulsa la escalabilidad.

Implicación visual: Paleta minimalista (4 colores, no 12). Una tipografía principal. Iconos line-art simples. No decoración innecesaria.

4. Transparencia Operativa
Claridad absoluta: procesos visibles y resultados confiables.

Implicación visual: Datos expuestos claramente (P10-P50-P90). Fuentes citadas. Metodología explicada. No "cajas negras" en gráficos.

5. Compromiso Real
Nos involucramos profundamente contigo para lograr resultados reales y compartidos.

Implicación visual: Lenguaje "nosotros" (no "tú" vs "nosotros"). Imágenes de trabajo colaborativo. Calls-to-action que invitan a diálogo, no solo a comprar.

1.2.1 Visión de Compañía

"El puente inteligente entre el outsourcing y el futuro digital"

"En Beyond, reinventamos las operaciones tecnológicas: dejamos atrás el modelo tradicional de BPO para escalar tu negocio con inteligencia, no con más personas."

Lo que esto significa:

No vendemos headcount → vendemos automatización
No somos vendor → somos partner estratégico
No damos informes → damos implementaciones

Traducción visual:

Más gráficos de procesos automatizados, menos fotos de call centers masivos
Iconos de IA/bots prominentes, no solo personas con auriculares
Estética tech-forward (pero no fría), no corporativa tradicional

1.3 Visual Personality

Si Beyond fuera una persona:

Edad: 35-42 años (experto pero no anticuado)
Profesión: Ex-consultor McKinsey que fundó una tech startup
Estilo: Smart casual - traje sin corbata, sneakers premium
Tono: Directo con datos, amigable sin ser coloquial, confident sin arrogancia

Estética:

Minimalista, no minimalista extremo
Profesional, no corporativo aburrido
Tech-forward, no sci-fi
Clean, no estéril

Benchmark Visual:

McKinsey (rigor, claridad)
Stripe (modernidad, accesibilidad)
NOT: Deloitte (demasiado corporativo), NOT: Startup colorida tipo Asana (demasiado casual)

1.4 Tone of Voice (Comunicación Escrita)

Principios de comunicación Beyond:

Directo y Honesto

✅ "Tu AHT es 40% superior al benchmark - esto cuesta €31K/año"
❌ "Existen oportunidades potenciales de optimización en eficiencia operativa"

Aplicación visual: Gráficos claros con números grandes. No esconder datos malos en footnotes.

Colaborativo, No Jerárquico

✅ "Nos metemos en la cocina contigo"
❌ "Nuestros expertos realizarán el análisis"

Aplicación visual: Imágenes de trabajo en equipo. Layout de documentos con espacio para comentarios. CTAs que invitan a diálogo ("Hablemos", "Co-creemos").

Inteligente, No Elitista

✅ "Usamos percentiles en vez de promedios porque revelan variabilidad oculta"
❌ "Nuestra metodología propietaria aplica técnicas estadísticas avanzadas"

Aplicación visual: Infográficos que explican conceptos. Tooltips en gráficos complejos. Glosarios accesibles.

Accionable, No Teórico

✅ "3 pasos para implementar: 1) Piloto skill Reservas, 2) Medir 30 días, 3) Escalar"
❌ "Se recomienda considerar una aproximación gradual mediante iteraciones controladas"

Aplicación visual: Roadmaps con timeline específico. Checklists visuales. Botones de "Siguiente paso" prominentes.

Humano, No Robótico

✅ "Sabemos que el cambio asusta. Por eso vamos contigo paso a paso"
❌ "El proceso de transformación digital requiere gestión del cambio organizacional"

Aplicación visual: Fotografía natural (no stock ultra-producido). Testimonios de personas reales. Lenguaje en interfaz cálido ("¿Te ayudamos?" vs "Soporte técnico").

Confianza Basada en Datos, No en Promesas

✅ "14 días, €4,900, ROI cuantificado - garantizado"
❌ "Transformaremos tu contact center en una experiencia de clase mundial"

Aplicación visual: Case studies con números reales. Badges de "14 días entrega" visibles. Pricing transparente sin "Contáctanos para precio".

2. Core Identity Elements

2.1 Logo System

Imagotipo Completo (Uso Principal)

Composición:

Isotipo "BD" (símbolo abstracto tipo infinito/bucle continuo)
Wordmark "beyond" (lowercase, tipografía custom)
Superíndice "cx" (marca sector CX/Customer Experience)

Proporciones:

Relación isotipo:wordmark = 1:3.5
Altura "cx" = 40% altura "d" del wordmark
Espacio entre isotipo y wordmark = ancho del círculo interno del isotipo

Versiones Disponibles:

Positivo: Negro (#000000) sobre fondo claro
Negativo: Blanco (#FFFFFF) sobre fondo oscuro
Monotono azul: #6D84E3 (uso especial digital)

Formatos Disponibles:

PNG (transparente, 300dpi para imprenta, 72dpi para web)
SVG (vectorial, escalable sin pérdida)
AI (editable, solo para diseñadores autorizados)

Isotipo Solo (Uso Secundario)

Cuándo usar solo el isotipo:

Favicon web
Avatares redes sociales (16x16px hasta 512x512px)
App icons
Watermarks
Espacios muy reducidos (<40px altura disponible)

Nunca usar isotipo solo en:

Presentaciones comerciales
Documentos oficiales
Firmas de email (usar imagotipo completo)
Comunicación externa formal

Área de Protección (Clear Space)

Regla general: Espacio mínimo = altura de la letra "b" del wordmark

    [b-height]
        ↓
    ┌───────────────────────┐
    │                       │
    │   ┌─────────────┐     │
    │   │ BD beyond^cx│     │ ← [b-height]
    │   └─────────────┘     │
    │                       │
    └───────────────────────┘

Nunca colocar:

Otros logotipos dentro del área de protección
Texto (excepto taglines autorizados)
Elementos gráficos decorativos
Bordes o marcos que invadan el clear space

Tamaños Mínimos

Digital:

Imagotipo completo: mínimo 120px ancho
Isotipo solo: mínimo 24px × 24px

Impreso:

Imagotipo completo: mínimo 30mm ancho
Isotipo solo: mínimo 8mm × 8mm

Por debajo de estos tamaños: El logo pierde legibilidad. Rediseñar layout o usar versión simplificada.

Usos Incorrectos del Logo

❌ NUNCA:

Rotar el logo (debe estar siempre horizontal)
Cambiar proporciones (stretch/squash)
Cambiar colores no autorizados (rosa, verde, gradientes, etc.)
Añadir efectos (sombras, brillos, 3D, texturas)
Separar isotipo y wordmark con elementos intermedios
Usar versiones de baja resolución en materiales impresos
Colocar sobre fondos con bajo contraste
Outline el logo (mantener siempre filled)

2.2 Color Palette

Colores Corporativos Principales

Beyond Black (Color primario - Texto, logo, fondos premium)

HEX: #000000
RGB: 0 / 0 / 0
CMYK: 91 / 78 / 61 / 97
PANTONE: Black 6 C

Uso: Texto principal, logo versión positiva, fondos de impacto (slides de cierre, CTAs), tablas headers

Beyond Blue (Color de acento - Único color para highlights)

HEX: #6D84E3
RGB: 109 / 132 / 227
CMYK: 64 / 48 / 0 / 0
PANTONE: 7452 C

Uso:

Acentos en gráficos (barras principales, líneas de tendencia)
Links y elementos interactivos
Iconos en estado activo
CTAs secundarios
Bullets y list markers
Subrayados y highlights

CRÍTICO: Este es el ÚNICO color de acento. No inventar nuevos colores para "variedad". La restricción cromática es intencional (estilo McKinsey).

Beyond Grey (Gris medio - Elementos secundarios)

HEX: #B1B1B0
RGB: 177 / 177 / 176
CMYK: 33 / 24 / 26 / 4
PANTONE: 421 C

Uso:

Texto secundario/metadata (fechas, fuentes, captions)
Iconos en estado inactivo
Líneas divisorias suaves
Datos de comparación en charts (benchmark industry)
Bordes sutiles

Beyond Light Grey (Gris claro - Fondos y cajas)

HEX: #E4E4E4
RGB: 228 / 227 / 227
CMYK: 13 / 9 / 10 / 0
PANTONE: 7443 C

Uso:

Fondos de cajas de contenido
Filas alternas en tablas
Áreas de soporte (sidebars, footers)
Separadores de sección suaves
Estados disabled en UI

Color Adicional (Solo Presentaciones)

Accent Gray Dark

HEX: #3F3F3F
RGB: 63 / 63 / 63

Uso exclusivo: Google Slides como color de sistema. NO usar en materiales finales para cliente.

Color de Email Signature (Especial)

Beyond Blue Light

HEX: #DBE2FC
PANTONE: 2706 C

Uso exclusivo: Elemento gráfico decorativo en firmas de email (fondo del símbolo "CX"). NO usar en otros contextos.

Combinaciones de Colores Aprobadas

Para fondos:

Blanco (#FFFFFF) con texto negro → Uso estándar documentos/slides
Negro (#000000) con texto blanco → Slides de impacto, portadas, cierres
Light Grey (#E4E4E4) con texto negro → Cajas de contenido, alternancia

Para gráficos:

Principal: Beyond Blue (#6D84E3)
Comparación: Beyond Grey (#B1B1B0)
Si necesitas 3+ series: Escala de grises (#000, #3F3F3F, #B1B1B0, #E4E4E4) + Blue para destacar

Accesibilidad (WCAG AA):

Negro sobre blanco: ✅ AAA (21:1 contrast ratio)
Blue sobre blanco: ✅ AA (4.6:1 contrast ratio)
Grey sobre blanco: ✅ AA (3.4:1 contrast ratio) - solo para texto >18px
Light Grey sobre blanco: ❌ Falla - solo usar para fondos, nunca texto

2.3 Typography

Tipografía Principal: Outfit

Familia: Outfit (Google Fonts - gratis y accesible)
Diseñador: Rodrigo Fuenzalida
Estilo: Sans-serif geométrica, redondeada, moderna

Pesos disponibles (usar solo estos):

Thin (100): Uso decorativo muy limitado
Light (300): Subtítulos, metadata, captions
Regular (400): Texto de cuerpo estándar
Medium (500): Énfasis moderado en párrafos
Bold (700): Títulos, headers, CTAs
Black (900): Títulos de impacto (portadas, secciones)

NUNCA usar: ExtraLight (200), SemiBold (600), ExtraBold (800) - mantener paleta simple

Tipografía Secundaria: Sulphur Point

Familia: Sulphur Point (Google Fonts)
Uso específico: Títulos de impacto, headers de sección en redes sociales, elementos decorativos

Pesos disponibles:

Light (300)
Regular (400)
Bold (700)

Cuándo usar Sulphur Point:

Títulos principales en posts RRSS
Headers decorativos en landing pages
Elementos de marca con personalidad

Cuándo NO usar:

Documentos corporativos → usar solo Outfit
Presentaciones cliente → usar solo Outfit
Texto largo (>50 palabras) → siempre Outfit

Jerarquía Tipográfica - Presentaciones

Google Slides Template Specifications:

Elemento	Tamaño	Peso	Color	Uso
Slide Title	24pt	Bold	#000000	Título principal de cada slide
Subtitle	16pt	Light	#000000	Subtítulo debajo del título
Heading	18pt	Bold	#000000	Headers de sección dentro del slide
Body Text	16pt	Regular	#000000	Contenido, bullets, párrafos
Caption/Metadata	12pt	Light	#B1B1B0	Fuentes, fechas, notas

Line height: 1.4 para body text, 1.2 para títulos

Jerarquía Tipográfica - Documentos (One-Pagers, Reportes)

Elemento	Tamaño	Peso	Color
H1 (Título documento)	40pt	Bold	#000000
H2 (Sección)	35pt	Bold	#000000
H3 (Subsección)	21pt	Bold	#000000
Body	17pt	Regular	#000000
Body Small	12pt	Light	#666666
Caption	10pt	Thin	#B1B1B0

Tamaño página: A4 (210 × 297mm)
Márgenes: 20mm todos los lados
Columnas: 1 columna principal (para legibilidad ejecutiva)

Fallback Fonts (Si Outfit no disponible)

Desktop:

Outfit (preferido)
Inter
SF Pro (macOS)
Segoe UI (Windows)
Arial (universal fallback)

Web (CSS Stack):

font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 
             'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

Reglas de Uso Tipográfico

✅ DO:

Usar tamaños consistentes según jerarquía definida
Mantener suficiente white space (line-height 1.4+)
Limitar a 2 pesos por documento (ej: Regular + Bold)
Alinear texto izquierda (nunca justificar - crea ríos)
Usar listas con bullets (• en Beyond Blue) cuando >3 items

❌ DON'T:

Mezclar Outfit con otras sans-serif (confunde)
Usar más de 3 tamaños de fuente por página
Poner texto en ALL CAPS (excepto siglas)
Subrayar para énfasis (usar bold o italic)
Usar letra pequeña (<10pt) en slides (ilegible desde distancia)

2.4 Iconography

Estilo de Iconos Corporativos

Características técnicas:

Estilo: Line icons (outline, no filled)
Grosor: 2-3px stroke weight
Esquinas: Redondeadas (border-radius ~2px)
Estética: Minimalista, geométrica, friendly
Tamaño base: 64×64px canvas (escalable)

Librería: Custom icon set diseñado específicamente para Beyond

Iconos Disponibles (Catálogo Parcial)

Categoría: Automatización & IA

Robot de automatización
Agente virtual (bot con auriculares)
Agente humano (persona con auriculares)
Inteligencia Artificial (nodos conectados tipo red neuronal)
Orquestador IA versión 1 (robot con engranajes)
Orquestador IA versión 2 (cerebro con circuitos)

Categoría: Contact Center

Agente de voz (teléfono + engranaje)
Teléfono / Llamada
Chat en vivo (bocadillo con ondas)
Correo electrónico
Formulario de contacto
Soporte técnico (chat + engranaje)

Categoría: Operaciones

Automatización / Workflow (flowchart)
Seguridad de datos (escudo con check)
Ubicación (pin de mapa)

Nota: Catálogo completo en /ICONOS/ en Drive. Nuevos iconos deben seguir el estilo establecido.

Colores de Iconos

3 variantes disponibles para cada icono:

Negro (#000000) - Uso estándar
- Documentos impresos
- Presentaciones sobre fondo claro
- Cuando no se necesita destacar
Gris (#B1B1B0) - Uso secundario/desactivado
- Estados inactive en UI
- Iconos de soporte (menos importantes)
- Alternancia con negro para variedad sutil
Azul (#6D84E3) - Uso de acento
- Iconos en estado activo/hover
- Destacar features principales
- Bullets en listas importantes
- Matching con elementos interactivos

NUNCA:

Usar colores fuera de la paleta corporativa
Mezclar estilos (outline + filled)
Modificar proporciones de los iconos
Añadir fondos circulares de colores (mantener clean)

Tamaños de Iconos por Contexto

Contexto	Tamaño	Spacing
Presentaciones (feature icons)	48-64px	24px entre iconos
Documentos (inline)	24-32px	Alineado con texto
Web (UI elements)	20-24px	16px padding
Web (hero icons)	80-120px	40px entre elementos
Email	20px	Inline con texto 16px

Reglas de Composición con Iconos

✅ DO:

Alinear iconos en grid uniforme
Usar mismo tamaño para iconos del mismo nivel jerárquico
Combinar icono + label (texto debajo o al lado)
Mantener consistencia de color en misma sección

❌ DON'T:

Mezclar tamaños arbitrariamente
Usar iconos genéricos de otras librerías (destruye identidad)
Saturar con demasiados iconos (máx 6-8 por slide)
Rotar iconos (mantener orientación estándar)

3. Design Applications

3.1 Presentations (Google Slides / PowerPoint)

Especificaciones Técnicas

Formato estándar: 16:9 (1920×1080px)
Formato alternativo: A4 vertical (para imprimir como handout)
Tema base: Google Slides template oficial Beyond

Descarga: [Link al template en Drive - solicitar acceso a marketing@beyond.com]

Anatomía del Slide Estándar

┌─────────────────────────────────────────────────────┐
│                                                     │
│  Slide Title (24pt Bold)                           │ ← Margin top: 40px
│  Subtitle (16pt Light)                             │
│                                                     │
│  ┌──────────────────────────────────────────┐     │
│  │                                          │     │
│  │         CONTENIDO PRINCIPAL              │     │
│  │      (Texto, gráficos, imágenes)         │     │
│  │                                          │     │
│  └──────────────────────────────────────────┘     │
│                                                     │
│  ──────────────────────────────────────────────    │ ← Footer divider
│  BD beyond^cx                          Page 12     │ ← Footer: 20px from bottom
└─────────────────────────────────────────────────────┘

Márgenes: 60px laterales, 40px top, 60px bottom

Elementos obligatorios en cada slide:

Logo en footer izquierda (versión pequeña, negro)
Línea divisoria horizontal sobre footer
Número de página en footer derecha
Título del slide (excepto portada y divisores)

Layouts Disponibles (30+ variantes)

Categoría: Estructura

Portada - Imagen + overlay oscuro + título centrado
Slide título + subtítulo - Layout limpio, texto izquierda
Blank - Canvas vacío para layouts custom

Categoría: Contenido 4. 2 columnas - Dos bloques de texto/bullets paralelos 5. 3 columnas - Con cajas de fondo gris para separación visual 6. 4 columnas - Grid para features/beneficios

Categoría: Visual 7. Conceptual (circular) - Diagrama de proceso circular con 4-6 pasos 8. Timeline horizontal - Iconos + fechas en línea temporal 9. Image + text - Foto lado izquierdo, contenido derecho

Categoría: Datos 10. Table - Headers negros, rows con alternancia gris 11. Pricing cards - 3-4 columnas verticales con CTAs 12. Chart (bar) - Gráfico de barras con leyenda 13. Chart (line) - Gráfico de líneas con múltiples series 14. Chart (pie) - Gráfico circular con breakdown porcentual 15. Chart + text - Gráfico lado izquierdo, insights lado derecho

Categoría: Especiales 16. Icons showcase - Grid de iconos (6-8) con labels 17. Section divider - Imagen + overlay + texto grande centrado 18. Thank you / Cierre - Fondo negro, texto blanco centrado

Reglas de Slides - The McKinsey Way

1 slide = 1 mensaje

El título debe ser accionable/conclusivo (no genérico)
❌ Mal: "Resultados del análisis"
✅ Bien: "3 procesos generan el 70% del volumen y tienen AHT 2× superior"

Pirámide invertida:

Conclusión/recomendación en título
Datos de soporte en cuerpo
Detalle adicional en notas de speaker

MECE (Mutually Exclusive, Collectively Exhaustive):

Si listas categorías, deben cubrir todo sin overlap
Ej: Procesos clasificados en AUTOMATE / ASSIST / AUGMENT (exhaustivo, sin solapamiento)

Regla del 6×6:

Máximo 6 bullets por slide
Máximo 6 palabras por bullet (aprox - puede flexibilizarse)
Si necesitas más → dividir en 2 slides

So What?

Cada dato debe responder "¿y qué?" del ejecutivo
No poner "AHT promedio es 240s" → poner "AHT 40% superior a benchmark (240s vs 170s) sugiere oportunidad de training"

Portada - Especificaciones

Elementos:

Imagen de fondo (natural, profesional, sin stock genérico)
Overlay oscuro (negro 60-70% opacidad) para contraste
Logo esquina inferior izquierda (blanco)
Título presentación: centrado, Outfit Bold 40-48pt, blanco
Subtítulo: centrado, Outfit Regular 24pt, blanco
Metadata (fecha, cliente): centrado abajo, Outfit Light 16pt, blanco

Ejemplo:

[Imagen: Persona trabajando en laptop, oficina moderna]
[Overlay negro 65%]

           BEYOND CX DIAGNOSTIC
        ACME Airlines - Informe Ejecutivo
        
               14 días de análisis
           €127K ahorro identificado
           
        ──────────────────────────────
        
        BD beyond^cx        Enero 2025

Slide de Cierre - Especificaciones

Fondo: Negro sólido (#000000)
Texto: "Thank you" centrado, Outfit Bold 60pt, blanco
Logo: Versión blanca, centrada debajo del texto
Opcional: Datos de contacto (email, web) Outfit Light 18pt, blanco

Alternativa para B2B: Reemplazar "Thank you" con CTA:

"¿Listo para identificar tus oportunidades?"
"Próximos pasos → Piloto en Q2 2025"

3.2 Documents (One-Pagers, Reportes, Deliverables)

Formato: A4 vertical (210 × 297mm)
Márgenes: 20mm todos los lados
Tipografía: 100% Outfit

Estructura visual:

┌────────────────────────────────────┐
│ BD beyond^cx          [Logo top]  │
│                                    │
│ TÍTULO PRINCIPAL (40pt Bold)      │
│ Subtítulo (17pt Regular)          │
│                                    │
│ ┌──────────────────────────────┐  │
│ │  Bloque de contenido 1       │  │
│ │  (fondo Light Grey opcional) │  │
│ └──────────────────────────────┘  │
│                                    │
│ Heading (21pt Bold)                │
│ • Bullet point (17pt Regular)     │
│ • Bullet point                     │
│                                    │
│ [Gráfico o visual]                 │
│                                    │
│ ──────────────────────────────    │
│ Footer: contacto (12pt Light)     │
└────────────────────────────────────┘

Colores:

Texto principal: Negro (#000000)
Acentos (bullets, underlines): Beyond Blue (#6D84E3)
Cajas de fondo: Light Grey (#E4E4E4)
Metadata/footer: Grey (#B1B1B0)

Reportes Largos (Deliverables Cliente)

Formato: A4 vertical, 50-80 páginas
Software recomendado: Google Docs (colaboración) → Export a PDF final

Estructura de documento:

Portada
- Logo centrado
- Título proyecto (Outfit Bold 40pt)
- Nombre cliente (Outfit Regular 24pt)
- Fecha + autores (Outfit Light 16pt)
Tabla de Contenidos
- Generada automáticamente
- Headers numerados (1. 1.1. 1.1.1.)
- Página numbers alineados derecha
Resumen Ejecutivo (1-2 páginas)
- 3-5 conclusiones principales
- Boxed con fondo Light Grey
- Recomendaciones accionables
Contenido Principal
- Headers jerárquicos claros (H1, H2, H3)
- Gráficos insertados inline (no apéndice)
- Caption debajo de cada gráfico (Outfit Light 12pt, Grey)
Apéndices
- Metodología detallada
- Tablas de datos raw
- Glosario de términos

Headers:

H1 (Sección): Outfit Bold 35pt + línea azul debajo (2pt, Beyond Blue)
H2 (Subsección): Outfit Bold 21pt, sin decoración
H3 (Apartado): Outfit Medium 17pt

Numeración:

Páginas: esquina inferior derecha, Outfit Light 12pt
Secciones: numeración decimal (1.2.3)

Templates de Email

NO crear templates HTML complejos → Usar firma HTML + texto plano

Firma de Email - Especificaciones:

┌─────────────────────────────────────────────────────┐
│                                                     │
│  BD beyond^cx                              [CX]    │ ← Logo + elemento gráfico
│                                            light    │
│  Nombre Apellidos                          blue    │
│  Account manager                                    │
│                                                     │
│  ✉ nombre@beyond.com                               │
│  ☎ +34 612 345 678                                 │
│                                                     │
│  ──────────────────────────────────────────────    │
└─────────────────────────────────────────────────────┘

Colores firma:

Nombre: Negro (#000000), Outfit Bold 18pt
Título: Grey (#B1B1B0), Outfit Regular 14pt
Contacto: Beyond Blue (#6D84E3), Outfit Regular 14pt (links activos)
Elemento "CX": Light Blue (#DBE2FC) fondo, tipografía grande estilizada

Variante con foto:

Foto perfil 80×80px, esquina izquierda
Datos de contacto alineados a la derecha de la foto
Mantener mismo esquema de colores

3.3 Digital Applications (Web, RRSS)

Landing Pages / Website

Paleta extendida web:

Fondo primario: Blanco (#FFFFFF)
Fondo alternativo: Light Grey (#E4E4E4) para secciones
Texto: Negro (#000000)
Links/CTAs: Beyond Blue (#6D84E3)
Hover state: Beyond Blue oscurecido 10% (#5A6FD1)

Tipografía web:

/* Headers */
h1 { font-family: 'Outfit'; font-weight: 700; font-size: 48px; }
h2 { font-family: 'Outfit'; font-weight: 700; font-size: 36px; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 24px; }

/* Body */
p { font-family: 'Outfit'; font-weight: 400; font-size: 18px; line-height: 1.6; }

/* Fallback */
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

Botones (CTAs):

Primario: Fondo negro, texto blanco, Outfit Bold 16px, padding 16px 32px, border-radius 4px
Secundario: Fondo blanco, borde 2px Beyond Blue, texto Beyond Blue, mismo padding
Hover primario: Fondo Beyond Blue, texto blanco
Hover secundario: Fondo Beyond Blue, texto blanco

Ejemplo landing page - beyonddiagnostic.onrender.com:

Hero section: Fondo blanco, headline grande, CTA negro prominente
Features: Grid 3 columnas, iconos azules, fondo Light Grey alterno
Pricing: Cards blancas con sombra suave, CTA negro
Footer: Fondo negro, texto blanco, logo blanco

Redes Sociales

LinkedIn (formato principal):

Post de imagen:

Dimensiones: 1200×627px
Imagen natural (no stock) con overlay degradado (#000000 → transparente, 60% opacidad abajo)
Headline: Sulphur Point Bold 36-42px, blanco, posicionado bottom-left
Logo blanco esquina superior derecha (80px ancho)
Texto del post: Outfit Regular, formato pregunta → insight → CTA

Ejemplo visual:

┌────────────────────────────────────┐
│ [Imagen: Contact center operators]│  Logo blanco ↗
│                                    │
│ [Degradado oscuro bottom]          │
│                                    │
│  El 80% de los contact centers   │
│  mide promedios en lugar de       │  ← Sulphur Point Bold
│  percentiles. Te están mintiendo. │     Blanco, 38px
│                                    │
└────────────────────────────────────┘

Post de carrusel:

Slide 1 (portada): Fondo Beyond Blue, título blanco centrado, logo blanco bottom
Slides 2-5: Fondo blanco, 1 insight por slide, gráfico/dato destacado
Slide final: Fondo negro, CTA + logo blanco

Dimensiones carrusel: 1080×1080px (cuadrado)

Twitter/X:

Usar mismo estilo que LinkedIn pero adaptado a 1200×675px
Menos texto en imagen (legibilidad móvil)
Priorizar gráficos claros con 1 número grande

Instagram (uso limitado):

1080×1080px cuadrado
Estética similar LinkedIn pero más visual, menos texto
Stories: 1080×1920px vertical

Fotografía y Uso de Imágenes

Estilo fotográfico: ✅ DO:

Imágenes naturales de oficinas/trabajo real
Personas en acción (trabajando en laptop, reuniones, callcenter)
Luz natural, colores reales (no saturados)
Composición limpia, no busy
Diversidad en representación (género, edad, etnia)

❌ DON'T:

Stock photos genéricos ultra-producidos (gente sonriendo a cámara forzado)
Imágenes muy saturadas o con filtros Instagram
Fondos blancos infinitos tipo e-commerce
Clipart o ilustraciones cartoon
Fotos de baja definición (<1920px ancho)

Overlays en imágenes:

Usar degradados oscuros (negro → transparente) para contraste texto
Opacidad 50-70% dependiendo de imagen original
Nunca overlays de color (mantener negro/gris)

Cajas de texto sobre imágenes:

Fondo sólido con opacidad 85-90% (negro o gris oscuro)
Border-radius 8-12px (esquinas redondeadas suaves)
Padding generoso (24px mínimo)

4. Data Visualization Guidelines

4.1 Principios Generales (McKinsey Standard)

Filosofía: Los datos deben hablar por sí mismos. El diseño debe ser invisible.

Reglas de oro:

1 gráfico = 1 insight - No sobrecargar con múltiples mensajes
Menos es más - Eliminar todo elemento no esencial (chartjunk)
Datos > Decoración - Ratio señal/ruido alto
Color con propósito - Solo usar color para destacar lo importante
Etiquetas directas - Números en el gráfico, no solo leyenda

4.2 Paleta de Colores para Gráficos

Uso de colores Beyond en visualizaciones:

1 serie de datos:

Color principal: Beyond Blue (#6D84E3)
Resto del gráfico: Gris claro (#E4E4E4) para contexto

2 series (Comparación):

Serie principal: Beyond Blue (#6D84E3)
Serie comparación: Beyond Grey (#B1B1B0)

3-4 series (Múltiples categorías):

Serie destacada: Beyond Blue (#6D84E3)
Serie 2: Negro (#000000)
Serie 3: Grey (#B1B1B0)
Serie 4: Light Grey (#E4E4E4)

5+ series (Evitar si posible):

Escala de grises gradual + Beyond Blue para categoría más importante
Considerar dividir en múltiples gráficos

NUNCA:

Usar verde/rojo para bueno/malo (problemas accesibilidad daltonismo)
Usar gradientes arcoíris
Usar colores no corporativos por "variedad"

4.3 Tipos de Gráficos y Uso

Gráficos de Barras

Cuándo usar:

Comparar categorías (skills, canales, periodos)
Mostrar rankings
Distribuciones de volumen

Especificaciones:

Barras horizontales si >5 categorías (más legible)
Barras verticales si ≤5 categorías o serie temporal
Ancho barra: 60-70% del espacio disponible (resto white space)
Color: Beyond Blue para datos principales, Grey para benchmark
Eje Y: comenzar en 0 (no truncar - da impresión incorrecta)
Grid lines: Gris claro (#E4E4E4), horizontal solo, mínimo

Etiquetado:

Valor numérico al final de cada barra (fuera si cabe, dentro si no)
Título del gráfico = conclusión (no "Volumen por skill", sí "Reservas genera 45% del volumen total")
Fuente datos en caption inferior (ej: "Fuente: Datos demo ACME, Oct-Dic 2024")

Ejemplo bueno vs malo:

✅ Bien:

Reservas concentra casi la mitad de las interacciones

Reservas     ████████████████████████  12,450
Cambios      ████████████  6,230
Quejas       ██████  3,100
Facturación  ████  2,050

Fuente: Beyond Analytics - Datos Q4 2024

❌ Mal:

Volumen por skill  [Título genérico]

[Barras con 8 colores diferentes, sin valores numéricos, 
 eje Y empieza en 1000 en vez de 0, grid lines muy marcadas]

Gráficos de Líneas

Cuándo usar:

Evolución temporal (tendencias)
Series continuas (no categorías discretas)
Comparar 2-3 tendencias paralelas

Especificaciones:

Grosor línea: 3px
Puntos de datos: Solo si <20 puntos (sino sobrecarga visual)
Color línea principal: Beyond Blue (#6D84E3)
Línea comparación: Grey (#B1B1B0)
Línea de referencia (benchmark): Punteada gris, grosor 2px
Área bajo curva: Opcional, fill Beyond Blue 15% opacidad

Anotaciones:

Marcar puntos de inflexión importantes con texto
Ej: "Pico en Navidad: +340%" con flecha a punto específico

Gráficos Circulares (Pie Charts)

Cuándo usar:

Mostrar partes de un todo (composición %)
Máximo 5-6 segmentos (sino ilegible)
Cuando los porcentajes suman exactamente 100%

Cuándo NO usar:

Comparar valores absolutos → usar barras
Más de 6 categorías → usar barras apiladas
Múltiples pie charts para comparar → usar barras agrupadas

Especificaciones:

Ordenar segmentos de mayor a menor (clockwise desde 12h)
Segmento más grande en Beyond Blue
Resto en escala de grises
Etiquetar % + valor absoluto fuera de cada segmento
Evitar 3D, explosiones, sombras (chartjunk)

Tablas de Datos

Cuándo usar:

Presentar múltiples métricas por categoría
Datos precisos donde aproximación visual no basta
Lookup reference (el lector busca valor específico)

Especificaciones:

Header row: Fondo negro (#000000), texto blanco, Outfit Bold 16pt
Data rows: Alternar blanco / Light Grey (#E4E4E4) cada fila
Texto: Outfit Regular 14-16pt, negro
Alineación: Números alineados derecha, texto izquierda
Bordes: Mínimos - solo header separado, no líneas verticales

Ejemplo:

┌──────────────┬──────────┬──────────┬──────────┐
│ Skill        │ Volumen  │ AHT (s)  │ FCR (%)  │ ← Header negro
├──────────────┼──────────┼──────────┼──────────┤
│ Reservas     │  12,450  │   240    │   68%    │ ← Fila blanca
│ Cambios      │   6,230  │   310    │   52%    │ ← Fila gris
│ Quejas       │   3,100  │   420    │   41%    │ ← Fila blanca
└──────────────┴──────────┴──────────┴──────────┘

Highlighting:

Celda con mejor valor: Texto Beyond Blue bold
Celda con peor valor: Texto Grey (no rojo - evitar negatividad excesiva)

Heatmaps (Beyond CX Heatmap™)

Uso específico Beyond:

Visualizar Agentic Readiness Score por skill/proceso
Matriz 2D (ej: Skill × Dimensión de análisis)

Especificaciones:

Escala de color: Blanco → Light Grey → Grey → Beyond Blue → Negro
Valores bajos (0-3): Escala de grises
Valores medios (4-7): Transición gris → azul
Valores altos (8-10): Beyond Blue intenso

Etiquetado:

Valor numérico dentro de cada celda (blanco si fondo oscuro, negro si claro)
Leyenda de escala en esquina
Título = insight ("Reservas muestra mayor readiness para automatización")

4.4 Elementos Comunes a Todos los Gráficos

Títulos:

Posición: Superior izquierda del gráfico
Tipografía: Outfit Bold 18-21pt
CRÍTICO: Título = conclusión, no descripción
- ❌ "AHT por skill"
- ✅ "Quejas tiene AHT 2× superior al benchmark (420s vs 210s)"

Ejes:

Labels: Outfit Regular 12-14pt, Grey (#B1B1B0)
Incluir unidades (segundos, €, %, etc.)
Eje Y: Comenzar en 0 salvo justificación específica
Grid lines: Horizontal solo, gris muy claro (#E4E4E4), mínimo necesario

Leyenda:

Posición: Preferiblemente arriba-derecha o debajo del gráfico
Tipografía: Outfit Regular 14pt
Color swatch: Cuadrado 12×12px con color + label
Evitar leyenda si se pueden etiquetar series directamente en gráfico

Fuentes de datos:

Caption inferior derecha: Outfit Light 10-12pt, Grey
Formato: "Fuente: [Origen] - [Periodo]"
Ej: "Fuente: COPC Standards 2024", "Fuente: Datos cliente Ene-Mar 2025"

White space:

Padding interno: 20px mínimo entre contenido y bordes
Margin externo: 40px entre gráfico y texto circundante

4.5 Software y Herramientas

Creación de gráficos:

Preferido: Google Sheets (colaboración, templates)
Alternativo: Excel, Tableau (análisis avanzado)
Presentaciones: Google Slides charts (editables inline)

Export:

Formato PNG (300dpi para imprenta, 150dpi para digital)
Formato SVG si necesita escalar sin pérdida (web)

Templates:

Usar templates de gráficos pre-configurados con paleta Beyond
Solicitar a marketing@beyond.com si no disponible

5. The McKinsey Standard

5.1 Filosofía de Comunicación

Beyond aspira al estándar McKinsey en:

Rigor analítico - Todo claim respaldado por datos
Claridad estructural - Pyramid principle, MECE framework
Orientación a acción - Recomendaciones específicas, no vagas
Calidad visual - Diseño profesional sin distracción

Nuestra ventaja: Mantenemos el rigor pero eliminamos la exclusividad (precio accesible, velocidad rápida).

5.2 Pyramid Principle (Aplicado a Deliverables)

Estructura de comunicación:

        CONCLUSIÓN PRINCIPAL
              ↓
    ┌─────────┴─────────┐
    ↓                   ↓
Argumento 1       Argumento 2
    ↓                   ↓
┌───┴───┐         ┌───┴───┐
↓       ↓         ↓       ↓
Data   Data      Data   Data

Aplicación práctica:

Título slide/sección: "3 oportunidades de automatización generan €127K ahorro anual"

Nivel 2 (argumentos):

Reservas: Proceso estructurado, volumen alto → €62K ahorro
Cambios: Reglas claras, baja variabilidad → €41K ahorro
Quejas: Template responses posibles → €24K ahorro

Nivel 3 (datos soporte):

Reservas procesa 12,450 casos/mes, AHT 240s, 85% queries repetitivas
[etc.]

Beneficio: El ejecutivo puede leer solo títulos y captar mensaje completo. Si necesita detalle, profundiza.

5.3 MECE Framework

MECE = Mutually Exclusive, Collectively Exhaustive

Aplicación en Beyond:

Cuando clasificamos procesos en AUTOMATE / ASSIST / AUGMENT:

✅ Mutually Exclusive: Cada proceso está en UNA categoría
✅ Collectively Exhaustive: Todos los procesos están clasificados

Anti-patrón:

❌ Categorías: "Simples", "Complejos", "Urgentes" → NO son MECE (un proceso puede ser simple Y urgente)

Ejemplo MECE en análisis:

Dimensiones de análisis (8 categorías):

Volumetría
Eficiencia
Efectividad
Satisfacción
Complejidad
Economía
Agentic Readiness
Benchmark

→ Cubren todos los aspectos operacionales sin solapamiento (un KPI pertenece a UNA dimensión).

5.4 So What? Test

Antes de incluir cualquier dato, preguntarse:

"¿Y qué? ¿Por qué le importa esto al cliente?"

Ejemplo:

❌ Sin So What: "El AHT promedio de Quejas es 420 segundos."

✅ Con So What: "Quejas tiene AHT 2× superior al benchmark (420s vs 210s), indicando oportunidad de €31K ahorro anual mediante knowledge base estructurada."

Framework:

DATO → COMPARACIÓN → IMPLICACIÓN → ACCIÓN

"AHT = 420s" → "vs benchmark 210s" → "Ineficiencia costosa" → "Implementar FAQ automation"

5.5 Checklist de Calidad McKinsey

Antes de entregar cualquier documento/presentación, verificar:

Contenido:

Cada título es una conclusión accionable (no descripción genérica)
Cada claim tiene dato soporte
Estructura es MECE (categorías exhaustivas, mutuamente excluyentes)
Hay clear next steps al final
Fuentes citadas para datos externos

Visual:

Paleta de colores corporativa (no colores inventados)
Tipografía consistente (solo Outfit, tamaños jerárquicos)
Gráficos simplificos (sin chartjunk)
White space generoso (no saturado)
Logo y footer en todas las páginas

Lenguaje:

Tono profesional pero accesible (no jerga innecesaria)
Oraciones cortas (<25 palabras)
Voz activa preferida sobre pasiva
Números específicos (no "muchos", sí "12,450")
Sin typos o errores gramaticales

Ejecutivo-ready:

Resumen ejecutivo en primeras 2 páginas
Puede leerse solo títulos y captar 80% del mensaje
Recomendaciones priorizadas (no lista plana)
Timeline de implementación realista

6. Usage Rules

6.1 Logo Do's & Don'ts

✅ DO - Usos Correctos

Usar versión apropiada según fondo:
- Fondo claro (blanco, gris claro) → Logo negro
- Fondo oscuro (negro, gris oscuro) → Logo blanco
Respetar área de protección:
- Mínimo espacio = altura letra "b"
- Aplicar a todos los lados
Mantener proporciones:
- Escalar proporcionalmente (lock aspect ratio)
- Usar archivos vectoriales (SVG, AI) cuando sea posible
Ubicación consistente:
- Presentaciones: Footer izquierda, pequeño
- Documentos: Header centrado o footer izquierda
- Web: Header top-left, tamaño mediano

❌ DON'T - Usos Prohibidos

NUNCA cambiar colores:
- ❌ Logo en verde, rojo, gradientes
- ❌ Isotipo azul + wordmark negro (mantener monocromo)
NUNCA distorsionar:
- ❌ Stretch horizontal/vertical
- ❌ Rotar (debe estar siempre horizontal)
- ❌ Inclinar (skew/perspective)
NUNCA añadir efectos:
- ❌ Sombras drop shadow
- ❌ Brillos/glows
- ❌ Efectos 3D
- ❌ Texturas o patterns
NUNCA usar en fondos problemáticos:
- ❌ Logo negro sobre azul oscuro (bajo contraste)
- ❌ Logo sobre imagen sin overlay (ilegible)
- ❌ Logo blanco sobre amarillo claro
NUNCA modificar estructura:
- ❌ Separar isotipo y wordmark con otros elementos
- ❌ Cambiar posición del superíndice "cx"
- ❌ Recrear logo con otras fuentes

6.2 Color Combinations - Aprobadas

Backgrounds permitidos:

Fondo	Texto	Logo	Acentos	Uso
Blanco (#FFF)	Negro (#000)	Negro	Blue (#6D84E3)	Estándar - Documentos, web, slides mayoría
Negro (#000)	Blanco (#FFF)	Blanco	Blue (#6D84E3)	Impacto - Portadas, cierres, CTAs
Light Grey (#E4E4E4)	Negro (#000)	Negro	Blue (#6D84E3)	Alternancia - Cajas, filas tablas
Beyond Blue (#6D84E3)	Blanco (#FFF)	Blanco	Negro (#000)	Especial - Headers web, cards destacados

Combinaciones prohibidas:

❌ Negro + Gris medio (bajo contraste)
❌ Azul + Azul claro (confusión visual)
❌ Blanco sobre Light Grey (falla accesibilidad)
❌ Cualquier color fuera de paleta corporativa

6.3 Typography Best Practices

Jerarquía clara:

Usar máximo 3 tamaños de fuente por página
Diferencia entre niveles: mínimo 4pt
Mantener ratio 1.5-2× entre H1 y body

Weights estratégicos:

Bold: Solo para títulos y énfasis puntual
Regular: Cuerpo de texto estándar (80% del contenido)
Light: Metadata, captions, subtítulos

Evitar:

❌ Todo en mayúsculas (grita, dificulta lectura)
❌ Justificación de texto (crea ríos, problemas legibilidad)
❌ Múltiples colores de texto (caótico)
❌ Line-height <1.3 (apretado, ilegible)

Accesibilidad:

Tamaño mínimo web: 16px (preferiblemente 18px)
Tamaño mínimo impreso: 10pt (preferiblemente 12pt)
Contraste texto-fondo: mínimo 4.5:1 (WCAG AA)

6.4 Spacing & Composition

White Space - El elemento más importante

"El diseño no está completo cuando no hay nada más que añadir, sino cuando no hay nada más que quitar." - Antoine de Saint-Exupéry

Reglas:

Padding interno elementos: 20-40px
Margin entre secciones: 40-60px
Ratio contenido/white space: 50/50 ideal, 60/40 mínimo

Grids & Alignment:

Usar grids de 12 columnas (divisible por 2, 3, 4, 6)
Alinear elementos a grid invisible
Evitar alineaciones arbitrarias (todo debe tener razón geométrica)

Regla del tercio:

Dividir espacio en tercios (no centrar siempre)
Punto focal en intersecciones de tercios
Aplica a composición de fotos, posición de elementos

7. Asset Library Reference

7.1 Estructura de Drive

Carpeta principal: [Google Drive - Beyond Brand Assets]
Link: https://drive.google.com/drive/folders/1jMWvIdbnzUTj8VIg0aUvg4WDEjfS8Mvw

Subcarpetas:

📁 MANUAL/
   └── MANUAL_IVC_BEYOND_PDF.pdf (este documento origen)

📁 IMAGOTIPO/
   ├── PNG/ (formato raster para presentaciones/web)
   │   ├── IMAGOTIPO_BEYOND_Negro.png
   │   ├── IMAGOTIPO_BEYOND_Blanco.png
   │   └── ISOTIPO_BEYOND_Negro.png
   └── SVG/ (formato vectorial para imprenta/diseño)
       ├── IMAGOTIPO_BEYOND_Negro.svg
       └── IMAGOTIPO_BEYOND_Blanco.svg

📁 ICONOS/
   ├── SVG/
   │   ├── NEGRO/ (iconos línea negra)
   │   ├── GRIS/ (iconos línea gris #B1B1B0)
   │   └── AZUL/ (iconos línea azul #6D84E3)
   └── PNG/ (misma estructura)

📁 TARJETA/
   └── Tarjeta_Visita_Template.ai

📁 ONE PAGER/
   └── OnePager_Template.docx

📁 FIRMA EMAIL/
   ├── Firma_Email_Standard.html
   └── Firma_Email_ConFoto.html

7.2 File Naming Conventions

Formato estándar:

[TipoAsset]_[Proyecto]_[Versión]_[Variante].[ext]

Ejemplos:
- Logo_Beyond_v1_Negro.png
- Presentacion_ACME_Demo.pptx
- Reporte_BeyondDiagnostic_v3_Draft.pdf
- Icono_Automation_Azul.svg

Reglas:

Todo en PascalCase o snake_case (no espacios)
Versionado semántico: v1, v2, v3 (no v1.0, v1.1 para assets visuales)
Variantes: Describir color/estado (Negro, Blanco, Hover, Active)
Fechas: YYYYMMDD si necesario (ej: 20250118)

7.3 Acceso y Permisos

Quién tiene acceso:

Editor: Marketing, Diseño, Dirección
Viewer: Todo el equipo Beyond
Externo: Proveedores autorizados (agencias, freelancers)

Solicitud de assets:

Email a: marketing@beyond.com
Especificar: Qué asset, para qué uso, formato requerido, deadline

Contribución de nuevos assets:

Solo equipo de marketing puede añadir a carpeta oficial
Propuestas de diseñadores externos → revisión antes de añadir

8. Quick Reference Cheatsheet

Brand Colors

Beyond Black:      #000000  (Primario)
Beyond Blue:       #6D84E3  (Acento único)
Beyond Grey:       #B1B1B0  (Secundario)
Beyond Light Grey: #E4E4E4  (Fondos)

Typography

Outfit Bold 24pt   → Slide Titles
Outfit Regular 16pt → Body Text
Outfit Light 12pt  → Captions

H1: 40pt Bold
H2: 35pt Bold
H3: 21pt Bold
Body: 17pt Regular

Logo Minimums

Digital:  120px wide (full logo)
Print:    30mm wide (full logo)
Isolated: 24px × 24px (icon only)

Presentation Specs

Format:   16:9 (1920×1080px)
Margins:  60px sides, 40px top, 60px bottom
Footer:   Logo left, page number right, divider line

Data Viz Colors

1 series:  Blue (#6D84E3)
2 series:  Blue + Grey (#B1B1B0)
3+ series: Blue + Black + Greys

The McKinsey Checklist

✓ 1 slide = 1 message
✓ Titles are conclusions (not descriptions)
✓ MECE structure
✓ So What? answered for each claim
✓ Clear next steps
✓ Sources cited

Common Mistakes to Avoid

❌ Rotating logo
❌ Using colors outside palette
❌ Titles that are generic ("Overview", "Results")
❌ Charts starting at non-zero
❌ More than 6 bullets per slide
❌ Mixing fonts (stick to Outfit)

Contact & Support

Brand Guidelines Questions:
marketing@beyond.com

Asset Requests:
marketing@beyond.com

Design Support:
design@beyond.com (si aplicable)

Document Version:
v1.0 - January 2025

Next Review:
Q2 2025 (o cuando haya cambio significativo en identidad)

Appendix: Brand Evolution Notes

Decisiones de diseño clave:

Paleta minimalista (4 colores): Inspirado en McKinsey/BCG. Menos colores = más consistencia = más profesional.
Outfit como tipografía única: Google Font accesible para todo el equipo. Suficientes weights para jerarquía sin necesitar fuente secundaria.
Iconos custom line-style: Diferenciación vs competencia (muchos usan filled icons). Más limpio, más "consultora moderna".
Superíndice "cx" en logo: Marca de sector (Customer Experience) sin ser obvio. Sutil pero reconocible.
Template Google Slides vs PowerPoint: Colaboración y accesibilidad. 90% de clientes tienen Google account.

Future considerations:

Beyond Diagnostic sub-brand: Si se lanza como producto independiente, puede necesitar variante visual (manteniendo core Beyond identity).
Internacionalización: Si expandimos fuera de España, validar que colores/iconos no tienen connotaciones negativas culturales.
Animaciones y motion: Actualmente no documentado. Si se producen videos/animados, definir motion guidelines (velocidad, easing, transiciones).

END OF DOCUMENT

Este documento es un asset vivo. Si encuentras inconsistencias, usos no cubiertos, o necesitas clarificación, contacta a marketing@beyond.com para actualización.

Próxima revisión programada: Q2 2025 o ante cambio material en identidad corporativa.

51 KiB Raw Permalink Blame History Unescape Escape

Brand Identity & Design Guidelines - Beyond

Table of Contents

1. Brand Essence

1.1 Brand Positioning

1.2 Brand Values

Los 5 Pilares de Beyond

1.2.1 Visión de Compañía

1.3 Visual Personality

1.4 Tone of Voice (Comunicación Escrita)

Directo y Honesto

Colaborativo, No Jerárquico

Inteligente, No Elitista

Accionable, No Teórico

Humano, No Robótico

Confianza Basada en Datos, No en Promesas

2. Core Identity Elements

2.1 Logo System

Imagotipo Completo (Uso Principal)

Isotipo Solo (Uso Secundario)

Área de Protección (Clear Space)

Tamaños Mínimos

Usos Incorrectos del Logo

2.2 Color Palette

Colores Corporativos Principales

Color Adicional (Solo Presentaciones)

Color de Email Signature (Especial)

Combinaciones de Colores Aprobadas

2.3 Typography

Tipografía Principal: Outfit

Tipografía Secundaria: Sulphur Point

Jerarquía Tipográfica - Presentaciones

Jerarquía Tipográfica - Documentos (One-Pagers, Reportes)

Fallback Fonts (Si Outfit no disponible)

Reglas de Uso Tipográfico

2.4 Iconography

Estilo de Iconos Corporativos

Iconos Disponibles (Catálogo Parcial)

Colores de Iconos

Tamaños de Iconos por Contexto

Reglas de Composición con Iconos

3. Design Applications

3.1 Presentations (Google Slides / PowerPoint)

Especificaciones Técnicas

Anatomía del Slide Estándar

Layouts Disponibles (30+ variantes)

Reglas de Slides - The McKinsey Way

Portada - Especificaciones

Slide de Cierre - Especificaciones

3.2 Documents (One-Pagers, Reportes, Deliverables)

One-Pager - Especificaciones

Reportes Largos (Deliverables Cliente)

Templates de Email

3.3 Digital Applications (Web, RRSS)

Landing Pages / Website

Redes Sociales

Fotografía y Uso de Imágenes

4. Data Visualization Guidelines

4.1 Principios Generales (McKinsey Standard)

4.2 Paleta de Colores para Gráficos

4.3 Tipos de Gráficos y Uso

Gráficos de Barras

Gráficos de Líneas

Gráficos Circulares (Pie Charts)

Tablas de Datos

Heatmaps (Beyond CX Heatmap™)

4.4 Elementos Comunes a Todos los Gráficos

4.5 Software y Herramientas

5. The McKinsey Standard

5.1 Filosofía de Comunicación

5.2 Pyramid Principle (Aplicado a Deliverables)

5.3 MECE Framework

5.4 So What? Test

5.5 Checklist de Calidad McKinsey

6. Usage Rules

6.1 Logo Do's & Don'ts

✅ DO - Usos Correctos

❌ DON'T - Usos Prohibidos

6.2 Color Combinations - Aprobadas

6.3 Typography Best Practices

51 KiB

Raw Permalink Blame History