Guía visual de la identidad. Es la misma información que la vista para agentes, mostrada en vez de especificada: los colores como muestras, la tipografía como especímenes y los componentes renderizados en lugar de su CSS. Si necesitás el CSS exacto de algo, está en la otra pestaña.

1 · Paleta

El color se pide por rol, no por gusto. La columna "nunca" es la que evita los errores más caros.

El gradiente de marca

Lima a violeta a azul, 135 grados. Representa las tres capas juntas, y por eso se usa donde el sujeto es el sistema completo: bordes de tarjeta, auras de sección y textos destacados.

Texto sobre acento: siempre oscuro

Los tres acentos son pasteles claros, así que el texto encima va en #0a0a0a, sin excepción. Es el error más frecuente al portar algo de fondo claro.

Jerarquía de texto sobre el ground

2 · Superficies y profundidad

No hay más que cuatro niveles. Los paneles son blanco translúcido, no un gris opaco: eso es lo que deja ver las auras radiales por detrás.

El borde sube a blanco 20% en hover o cuando el elemento está activo.

3 · Tipografía

Dos familias, y cada una tiene un trabajo. Noka quedó derogada: era la fuente del brand guide 2024 y no se usa más en ningún lado.

Space Grotesk · display y cuerpo

Todo lo que se lee corrido. Títulos en 700, cuerpo en 500.

JetBrains Mono · sistema

Labels en mayúscula con tracking 0.14em, chips, métricas, terminales y variables. Es lo que hace que la interfaz se lea como una máquina y no como un folleto.

4 · Componentes

Renderizados, no descriptos. El CSS exacto de cada uno está en la sección 5 de la vista para agentes.

Card con borde gradiente

La superficie principal. El borde lleva el gradiente de marca porque el sujeto de la tarjeta es el sistema.

Texto con gradiente y highlight

Pill de sección y chip de capa

KPI tiles

El acento rota lima, violeta, azul por índice. La cuarta vuelve al primero: no se inventa un cuarto color.

Terminal

CTA principal

Tarjeta de diagrama de flujo

Un proceso paso por paso. Reemplaza a los flowcharts en imagen: pesa una fracción, se lee con lector de pantalla y el texto se traduce sin volver a exportar nada. Un diagrama por capa, y cada uno respeta el color de su capa.

5 · Movimiento

Cinco piezas, cada una con un significado fijo. El ciclo maestro de las animaciones que narran un mismo proceso es de 9 segundos, para que no se desincronicen entre sí. Todo respeta prefers-reduced-motion: si el sistema pide menos movimiento, esto se queda quieto.

6 · Logo

La regla que no se negocia: el dinamismo se agrega por fuera del logo, con un anillo gradiente girando, glow o respiración de escala. Nunca modificando el asset.

Tres tamaños, y no es capricho

El isotipo es una superficie oscura con borde y halo lima. Abajo de 48px el borde de 1px y el gradiente sutil desaparecen, y abajo de 20px un cuadrado oscuro sobre fondo oscuro directamente no se ve. Por eso hay tres niveles:

El set completo de isotipos, más los avatares de LinkedIn, vive en el repo del website en brand/isotipo/. No está publicado en la web: pedilo si lo necesitás como archivo.

7 · Voz

Cuatro reglas inquebrantables

1. Nunca em dash. En copy visible, en ningún idioma. Es el marcador delator de texto generado por IA y contradice el anti-posicionamiento. El en dash en rangos numéricos, como $42K–$64K, sí está permitido.
2. El nombre es "ZalesMachine", una sola palabra, Z y M mayúsculas. "Sales Machine" es un juego de palabras reservado exclusivamente al H1 del hero del sitio.
3. Español es voseo rioplatense: vos, tenés, creés, agendá. Los anglicismos GTM van sin traducir: pipeline, outbound, meetings, leads, cold email, follow-up, reply.
4. Los "meetings" son masculinos en español: "meetings agendados". "Call" es femenina: "call agendada".

Espécimen aprobado: cold email

La anatomía es señal real del lead, después dolor del segmento, después prueba con nombres y número, y cierra con una pregunta liviana.

En interfaz, las variables se marcan en lima, la frase adaptada por IA en violeta y los casos de éxito en azul.

8 · Números citables

Todo número arrastra su vigencia. Estos son de agosto 2026. Si este documento tiene más de un trimestre, hay que verificarlos contra los templates del portal de propuestas antes de citarlos. No se extrapola ni se redondea hacia arriba.

9 · Lo que está prohibido

Junto en un solo lugar, porque disperso se pierde.

• Fondos claros de página. El sistema es dark only.
• Lima para contenido o para agents. Cada acento tiene su capa.
• Rojo decorativo o para algo positivo. Es exclusivo del problema.
• Texto blanco sobre un relleno de acento. Siempre #0a0a0a.
• Noka. La fuente del brand guide 2024 quedó derogada.
• Colores, tipografías o radios inventados. Si no está en la paleta, no existe.
• Animación decorativa. Si no comunica estado, flujo o secuencia, no va.
• Em dash en copy visible.
• Modificar el asset del logo para darle dinamismo.
• Un cuarto color de acento para la cuarta tarjeta de una serie. Se vuelve al primero.

10 · Errores al portar algo a superficie oscura

Los cuatro que aparecieron al re-skinear los ocho templates del portal de propuestas. Todos tienen la misma causa: una regla escrita para fondo claro que sobrevive al cambio de ground.

Dónde vive cada cosa

Si algo de esta guía no coincide con lo que ves en zalesmachine.com, el sitio manda y esto es un bug: avisá.

ZalesMachine · Brand System v2

Versión: 2.0 · Vigencia: agosto 2026 · Estado: identidad "Actual+" votada por el equipo y en producción en zalesmachine.com · Logo: en renovación (4 conceptos en votación).

Propósito de este documento: fuente de verdad de la identidad visual y verbal de ZalesMachine, estructurada para que un agente de IA (generación de UI, copy, contenido de LinkedIn, propuestas, reportes) pueda aplicar la marca sin ambigüedad. La implementación de referencia vive en el repo del website: app/globals.css y components/.

0 · Instrucciones para agentes de IA

1. Si generás UI: usá exclusivamente los tokens del bloque JSON #design-tokens y las recetas CSS de la sección 5. No inventes colores, tipografías ni radios nuevos.
2. Si generás copy: aplicá las reglas de la sección 6 (voz). Las tres reglas inquebrantables: nunca em dash «—», voseo rioplatense en español, el nombre es "ZalesMachine" (una sola palabra).
3. Si citás números o claims: usá solo los de la sección 7, que llevan fecha de vigencia. No extrapoles ni redondees hacia arriba.
4. El color es semántico (sección 2): lima=Outbound, violeta=Contenido, azul=AI Agents, rojo=problema. No uses un acento fuera de su rol.
5. El movimiento tiene significado (sección 4). No agregues animación decorativa.

1 · Design tokens (JSON)

Bloque estructurado para parsing directo:

El mismo JSON puede leerse del DOM con document.getElementById('design-tokens').textContent.

2 · Color: roles, no gustos

Texto sobre acentos: siempre #0a0a0a (los tres acentos son pasteles claros). Jerarquía de texto sobre fondo: blanco 100% títulos → 80% cuerpo → 60% secundario → 40% labels.

3 · Tipografía

• Space Grotesk (Google Fonts): display y cuerpo. Títulos en 700, cuerpo en 500.
• JetBrains Mono (Google Fonts): labels de sistema (uppercase + tracking 0.14em), chips, métricas, terminales y variables ({first_name}, {company_name}).
• Nunca Noka (la fuente del brand guide 2024 quedó derogada).

4 · Motion (resumen operable)

Ver especificaciones exactas en el JSON (motion). Regla de oro: si una animación no comunica estado, flujo o secuencia, no va. Todo componente animado incluye fallback prefers-reduced-motion: reduce.

5 · Componentes: recetas exactas

CSS de producción (copiado de app/globals.css). En Tailwind, los acentos existen como text-lime / bg-purple / border-blue etc.

5.1 Card con borde gradiente (superficie principal)

.gradient-card {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(20,20,20,0.92), rgba(20,20,20,0.92)) padding-box,
    linear-gradient(135deg, rgba(233,255,185,0.55), rgba(217,173,255,0.45), rgba(112,181,255,0.45)) border-box;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
/* hover: glow del acento correspondiente, ej.
   box-shadow: 0 12px 46px rgba(217,173,255,0.14) */

5.2 Texto con gradiente de marca

.gradient-text {
  background: linear-gradient(90deg, #e9ffb9, #d9adff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

5.3 Auras de sección (fondos con glow radial)

.aura-section {
  background:
    radial-gradient(600px 400px at 10% 0%, rgba(233,255,185,0.07), transparent 65%),
    radial-gradient(700px 480px at 95% 25%, rgba(217,173,255,0.09), transparent 65%),
    radial-gradient(600px 420px at 50% 110%, rgba(112,181,255,0.08), transparent 65%);
}
/* variante .aura-dots: agrega dot-grid radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) size 26px */

5.4 Pill de sección

/* estructura: emoji + texto mono 12px */
display:inline-flex; gap:8px; padding:6px 16px; border-radius:9999px;
border:1px solid rgba(233,255,185,0.4); background:rgba(233,255,185,0.1); color:#E9FFB9;
/* variante roja (solo problema): mismos valores con #f87171 / rgba(248,113,113,·) */

5.5 Label de módulo con LED

/* "modhead": LED 6px pulsando + texto mono uppercase */
label: font-family mono; font-size 10.5px; letter-spacing 0.14em; text-transform uppercase; color rgba(255,255,255,0.4);
led: width/height 6px; border-radius 50%; background {acento}; box-shadow 0 0 6px {acento};
animation: pulse 2.4s ease-in-out infinite; /* 50% { opacity: 0.35 } */

5.6 Chip de capa

/* dot de color semántico + texto mono 11px */
display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:9999px;
border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7);
dot: 6px circle, background = color de la capa (lime|purple|blue)

5.7 KPI tile

border:1px solid rgba(255,255,255,0.10); border-radius:8-10px; background:rgba(255,255,255,0.05); padding:12px;
valor: Space Grotesk 700, 18-24px, color de acento (alternar lime/purple/blue por índice);
label: 11-12px, rgba(255,255,255,0.55); altura uniforme entre tiles hermanos (min-height).

5.8 Terminal

border:1px solid rgba(255,255,255,0.1); border-radius:8-10px; background:rgba(0,0,0,0.45);
font: JetBrains Mono 12px, line-height 1.9; prompt "$" en lima; estados "● running" en lima;
notas en rgba(255,255,255,0.4); caret: bloque 7x13px lima con blink 1.1s.

5.9 Highlight de texto (tint)

/* para destacar términos como "ZalesMachine System" dentro de un título */
background: rgba({acento},0.10); color: {acento}; padding: 0 4-8px; border-radius: 4-8px;

5.10 CTA principal

background:#E9FFB9; color:#0a0a0a; font-weight:700; padding:13px 26px; border-radius:8-10px;
box-shadow: 0 0 36px rgba(233,255,185,0.30);
hover: shadow 0 0 52px rgba(233,255,185,0.45) + flecha "→" con translate-x.

5.11 Animaciones de sistema (keyframes de producción)

@keyframes zm-beam-h { 0% { background-position:-80% 0 } 100% { background-position:180% 0 } }
.beam-h { height:2px; background-image:linear-gradient(to right, transparent, currentColor, transparent);
  background-size:55% 100%; background-repeat:no-repeat; animation:zm-beam-h 1.8s linear infinite; }

@keyframes zm-flash { 0%,16%,100% { border-color:rgba(255,255,255,0.1); box-shadow:none }
  7% { border-color:rgba(233,255,185,0.75); box-shadow:0 0 20px rgba(233,255,185,0.2) } }
/* secuencia: animation zm-flash 9s infinite; delay por paso via var(--flash-delay) */

@keyframes zm-text-glow { 0%,26%,100% { text-shadow:none; filter:brightness(1) }
  11% { text-shadow:0 0 16px currentColor; filter:brightness(1.3) } }

@keyframes zm-glow { 0%,100% { box-shadow:0 0 26px rgba(217,173,255,0.28) } 50% { box-shadow:0 0 48px rgba(233,255,185,0.38) } }
@keyframes zm-breathe { 0%,100% { transform:scale(1) } 50% { transform:scale(1.045) } }
@keyframes zm-led { 50% { opacity:0.35 } }   /* LED de estado: 2.4s ease-in-out infinite */

5.12 Tarjeta de diagrama de flujo

El componente que muestra un proceso paso por paso. Nació en el sitio (components/sections/ServiceDiagrams.tsx) y desde agosto 2026 también está en los templates del portal de propuestas. Reemplaza a los flowcharts en imagen: pesa una fracción, se lee con lector de pantalla y el texto se traduce sin volver a exportar nada.

/* contenedor: alto FIJO y contenido desde arriba. Con min-height las tarjetas
   hermanas crecen distinto y los títulos internos no se alinean. */
.card { height: var(--h); display:flex; flex-direction:column;
  justify-content:flex-start; gap:6px; padding:18px;
  border:1px solid transparent; border-radius:14px;
  background:
    linear-gradient(rgba(20,20,20,0.92), rgba(20,20,20,0.92)) padding-box,
    linear-gradient(135deg, rgba(233,255,185,0.55), rgba(217,173,255,0.45), rgba(112,181,255,0.45)) border-box;
  box-shadow:0 12px 40px rgba(0,0,0,0.5); }

/* chip: la unidad del diagrama. Un paso por chip, con el dot del acento. */
.chip { display:flex; align-items:center; gap:8px; padding:7px 10px;
  border:1px solid rgba(255,255,255,0.10); border-radius:10px; background:rgba(0,0,0,0.40);
  font-family:mono; font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.85);
  animation:zm-flash 9s ease-in-out infinite; animation-delay:var(--d,0s); }
.chip--strong { border-color:rgba({acento},0.35); color:#fff }   /* el resultado del flujo */
.chip--warn   { border-color:rgba(248,113,113,0.45); color:#fecaca; animation:none } /* el problema */
.chip__dot { width:6px; height:6px; border-radius:50%; background:{acento}; box-shadow:0 0 6px {acento} }
.chip__logo { width:13px; height:13px; border-radius:3px; object-fit:contain }

/* haz vertical: comunica que una etapa alimenta la siguiente. 24px es el piso:
   el gradiente ocupa el 55% del alto y por debajo de eso el pulso no se lee. */
.beam { width:2px; height:24px; margin:0 auto; color:{acento};
  background-image:linear-gradient(to bottom, transparent, currentColor, transparent);
  background-size:100% 55%; background-repeat:no-repeat;
  animation:zm-beam 1.6s linear infinite; }

/* separador con etiqueta: para una condición del flujo, no un paso. Como chip
   competiría en peso con los pasos reales. */
.div__t { font-family:mono; font-size:10px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:{acento}; opacity:.75 }

/* núcleo: el paso donde ZalesMachine hace el trabajo. Lleva el monograma. */
.core { margin:0 auto; display:flex; align-items:center; gap:8px; padding:7px 12px;
  border:1px solid rgba({acento},0.30); border-radius:10px; background:rgba(0,0,0,0.60);
  animation:zm-glow 3.2s ease-in-out infinite; }

Reglas de composición. Un diagrama por capa, y cada uno respeta el color de su capa: lima outbound, violeta contenido, azul agentes. El pie de la tarjeta (número mono, título en el acento, descripción al 80%) va con padding propio y arranca a la misma altura en las tarjetas hermanas. Los logos de herramienta se muestran solo donde hay una herramienta real detrás del paso; si no, va el dot solo.

5.13 Tarjeta de entregable con label LED

La pieza de los diferenciales del sitio y de los entregables de las propuestas. Es la misma superficie de 5.1 más un label de módulo (5.5) en lugar de un header de color.

.card { /* igual que 5.12: borde gradiente sobre panel oscuro */ }
.card__head { display:flex; align-items:center; gap:8px; padding:18px 22px 0;
  font-family:mono; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); }
.card__head::before { content:""; width:6px; height:6px; border-radius:50%;
  background:{acento}; box-shadow:0 0 6px {acento};
  animation:zm-led 2.4s ease-in-out infinite; }   /* 50% { opacity:.35 } */
.card__t { font-size:18px; font-weight:700; color:#fff }
.card__d { font-size:14px; color:rgba(255,255,255,0.65) }

El acento rota por índice siguiendo lima, violeta, azul. No se usa un cuarto color para la cuarta tarjeta: se vuelve al primero.

5.14 Errores recurrentes al portar esto a superficie oscura

Los cuatro que aparecieron al re-skinear los ocho templates del portal. Todos tienen la misma causa: una regla escrita para fondo claro que sobrevive al cambio de ground.

6 · Voz y copy

Reglas inquebrantables

1. Nunca em dash «—» en copy visible, en ningún idioma. Es el marcador delator de texto AI y contradice el anti-posicionamiento. El en dash «–» en rangos numéricos ($42K–$64K) sí está permitido.
2. El nombre es "ZalesMachine", una sola palabra, Z y M mayúsculas. «Sales Machine» es un juego de palabras reservado exclusivamente al H1 del hero del sitio.
3. Español = voseo rioplatense (vos, tenés, creés, agendá). Anglicismos GTM sin traducir: pipeline, outbound, meetings, leads, cold email, follow-up, reply.
4. Los "meetings" son masculinos en español: "meetings agendados". "Call" es femenina: "call agendada".

Sí / No

Espécimen de referencia: cold email estilo ZM (aprobado ago-2026)

Hola {first_name}, ¿cómo estás? Vi que están sumando 3 SDRs al equipo.

Trabajando con B2B SaaS, sabemos lo importante que es generar oportunidades
nuevas de manera predecible y constante, manteniendo el CAC.

Con startups VC-backed como Mendel y Tapi generamos +30 oportunidades nuevas
por mes, mejorando el costo de adquisición por SQL de otros canales.

¿Creés que hay espacio para explorar esto en {company_name}?

Anatomía: señal real del lead → dolor del segmento → prueba con nombres y número → pregunta liviana. En UI, las variables se marcan en lima, la frase adaptada por IA en violeta y los casos de éxito en azul.

7 · Claims y números citables (vigencia ago-2026)

Regla: todo número arrastra su vigencia. Si este documento tiene más de un trimestre, verificar contra los templates del portal de propuestas antes de citar.

8 · Logo

• Estado: en renovación (decisión ago-2026: renovar sin perder esencia = monograma ZM + violeta). Cuatro conceptos en votación: Refinado, Núcleo, Pulso, Ligadura.
• Activos actuales: monograma círculo violeta /images/webclip.png · wordmark /images/LOGO-ZM-1.svg.
• Regla transitoria: hasta que se vote el nuevo, usar los activos actuales; el dinamismo se agrega por fuera del logo (anillo gradiente girando, glow, respiración de escala), nunca modificando el asset.

9 · Naming y arquitectura de marca

• Paraguas: ZalesMachine · GTM Engineering. Posicionamiento: motor de generación de leads para empresas B2B.
• El sistema: "ZalesMachine System" (con "System" en inglés), tres capas numeradas: 01 Outbound as a Service · 02 Content as a Service · 03 AI Agents as a Service.
• Anti-posicionamiento: ❌ Spray and Pray · ❌ Mensajes Salesy · ❌ AI Slop.
• Plataformas propias (dogfooding): proposals-portal, copywriter-agent, gtm-intel-hub, content-platform (así se listan en la terminal del sitio).

10 · Aplicación por superficie

ZalesMachine Brand System v2 · fuente: código del website (app/globals.css, components/) + wiki de ZM · la versión visual para diseño está en la pestaña "Lectura humana", arriba · mantenido junto al repo del website en /public/brand-system.html