[CONSEJO — Doc 11] Contrarian: El error de branding más común en suites SaaS es tener módulos tan visualmente distintos que parecen productos de empresas diferentes, o tan similares que el cliente no sabe cuál abrió. La línea correcta: identidad compartida (fuente, estructura, tono) con señales de color específicas por módulo. El cliente debe poder decir en 2 segundos "esto es StockMind" sin leer el nombre. Outsider: Un contador usando BookMind y una distribuidora usando StockMind son clientes diferentes con vocabularios diferentes. El branding debe hablar el idioma de cada perfil. BookMind habla de "control", "precisión", "cumplimiento". StockMind habla de "nunca más sin stock", "eficiencia", "dinero recuperado". Mismo sistema visual, voces distintas.

1. Arquitectura de marca

CHERYX GROUP (holding)
    └── MINDSTACK (portal suite)
             ├── STOCKMIND  — Inventario · Teal  #00C2B8
             ├── SALESMIND  — Ventas    · Orange #FF6B35
             ├── BOOKMIND   — Contab.  · Green  #2ECC71
             └── PAYMIND    — RRHH     · Violet #7B68EE

Jerarquía: Cheryx Group es el holding (visible solo en legal/pie de página). MindStack es el portal. Cada módulo es un producto con identidad propia dentro del sistema.

2. Paleta de colores

Colores base (MindStack Suite)

Colores por módulo

Gradiente MindStack Suite

/* Usado en hero de landing principal y portada de reporte */
background: linear-gradient(135deg,
    #00C2B8 0%,    /* StockMind teal */
    #2ECC71 33%,   /* BookMind green */
    #FF6B35 66%,   /* SalesMind orange */
    #7B68EE 100%   /* PayMind violet */
);

3. Tipografía

Fuente: Inter via @fontsource/inter (self-hosted, no Google Fonts dependency).

Jerarquía visual: Los números grandes ($349/mes, 67% reducción) en Inter Bold son el arma principal de conversión. Usarlos para cifras de ROI antes que para nombres de features.

4. Logo y wordmark

MindStack Suite

MIND STACK
━━━━━━━━━━━━━━ (línea teal→violet)
    S U I T E

• MIND: Inter Bold, navy #0B1E3F
• STACK: Inter Bold, color del módulo activo o gradiente en contexto suite
• Línea divisora: gradiente multicolor de los 4 módulos
• SUITE: Inter Light, tracking 0.2em, gray-600

Módulos individuales

Cada módulo combina el ícono SVG del módulo + wordmark:

[ícono]  STOCK MIND
         ──────────  (línea del color del módulo)

• Ícono: geométrico, minimalista, relacionado con el dominio del módulo
• Wordmark: {PREFIX} en Inter Bold navy + MIND en Inter Bold con el color del módulo

Versiones del logo

5. Componentes de UI (tokens Tailwind)

// tailwind.config.js — colores extendidos
module.exports = {
  theme: {
    extend: {
      colors: {
        navy: {
          DEFAULT: '#0B1E3F',
          light: '#1A3060',
        },
        stockmind: {
          DEFAULT: '#00C2B8',
          dark: '#009E95',
          light: '#E6FAF9',
        },
        salesmind: {
          DEFAULT: '#FF6B35',
          dark: '#E55A25',
          light: '#FFF0EB',
        },
        bookmind: {
          DEFAULT: '#2ECC71',
          dark: '#27AE60',
          light: '#E8F8EF',
        },
        paymind: {
          DEFAULT: '#7B68EE',
          dark: '#6555D8',
          light: '#F0EEFF',
        },
      },
    },
  },
}

Module card component

// Cada módulo tiene su card con su color de marca
const MODULE_COLORS = {
  stockmind: { bg: 'bg-stockmind-light', border: 'border-stockmind', text: 'text-stockmind-dark' },
  salesmind: { bg: 'bg-salesmind-light', border: 'border-salesmind', text: 'text-salesmind-dark' },
  bookmind:  { bg: 'bg-bookmind-light',  border: 'border-bookmind',  text: 'text-bookmind-dark'  },
  paymind:   { bg: 'bg-paymind-light',   border: 'border-paymind',   text: 'text-paymind-dark'   },
}

function ModuleCard({ modulo, nombre, descripcion, precio, activo }) {
  const colors = MODULE_COLORS[modulo]
  return (
    <div className={`rounded-xl border-2 ${colors.border} ${colors.bg} p-6`}>
      <ModuleIcon modulo={modulo} className={`w-8 h-8 ${colors.text}`} />
      <h3 className="font-bold text-navy mt-2">{nombre}</h3>
      <p className="text-gray-600 text-sm mt-1">{descripcion}</p>
      {activo
        ? <Badge variant="active">Activo · {precio}/mes</Badge>
        : <Button variant="outline" color={modulo}>Activar gratis →</Button>
      }
    </div>
  )
}

6. Voz de marca por módulo

Principios de tono (todos los módulos)

• Directo: "Reduce quiebres de stock 67%" > "Optimiza tu gestión de inventarios"
• Concreto: cifras > adjetivos. "Recupera $18,000/año" > "Aumenta tus ventas significativamente"
• Empático con el pain: nombrar el problema antes de mostrar la solución
• Anti-corporativo: hablar como lo haría un contador amigo de confianza

Voz específica por módulo

Headlines de landing por módulo

StockMind:  "Sabe qué comprar antes de que se acabe."
SalesMind:  "Tu pipeline no miente. ¿Lo estás escuchando?"
BookMind:   "Contabilidad al día. Sin pagar contador de tiempo completo."
PayMind:    "Planilla lista en 2 horas. Sin errores. Sin estrés."

7. Aplicaciones del sistema de marca

Email transaccional

Remitente: MindStack <hola@mindstack.cheryx.tech>
Reply-to: soporte@mindstack.cheryx.tech

Header del email: Logo MindStack navy + línea de color del módulo relevante
Footer: © 2026 Cheryx Group S.R.L. · Costa Rica

Factura PDF

Header: Logo MindStack Suite (full horizontal)
Accent color: color del módulo suscrito
Footer: Cheryx Group S.R.L. · Cédula Jurídica [pendiente] · soporte@mindstack.cheryx.tech

Notificaciones WhatsApp

[StockMind] Tu trial vence en 3 días. ¿Seguimos?
Ver tu plan → mindstack.cheryx.tech/dashboard

Cheryx MindStack

Ver también: Doc 01 (Modelo de Negocio — bundle y cross-sell visual) · Doc 06 (SRD Frontend — implementación de tokens en Tailwind) · Carpetas brand/ de cada módulo para archivos de logo