01 — Paleta

Colores de la marca

Paleta construida sobre fondos oscuros con el dorado como único acento. La sobriedad y el contraste definen la identidad.

Fondo principal
#0D0D12
Negro azulado profundo. Base de toda la UI.
Dorado principal
#C9A84C
Acento primario. CTAs, highlights, énfasis.
Dorado suave
rgba(201,168,76,0.12)
Superficies, cards con tono dorado tenue.
Texto principal
#FAF8F5
Blanco cálido. Headings y body text.
Texto secundario
rgba(250,248,245,0.65)
Subtítulos, descripciones, body supporting.
Texto terciario
rgba(250,248,245,0.40)
Labels, metadata, información de contexto.
Superficie neutra
rgba(255,255,255,0.06)
Cards sin acento dorado, contenedores neutros.
02 — Tipografía

Sistema tipográfico

Dos familias complementarias: Inter para toda la comunicación y JetBrains Mono para elementos técnicos y código.

Primaria Inter — Google Fonts
Bold / 700 / 40px Ai4Managers
Bold / 700 / 26px Heading Principal
Semibold / 600 / 18px Heading Sección
Medium / 500 / 15px Subtítulo de apoyo descriptivo para secciones y tarjetas.
Regular / 400 / 14px Texto de cuerpo. Información, descripciones, párrafos extensos con máxima legibilidad.
Regular / 400 / 12px Caption, metadata, fechas, labels pequeños.
Técnica JetBrains Mono — Google Fonts
Medium / 500 / 13px Brand Guide v1.0 — 2026
Regular / 400 / 12px const brand = { gold: '#C9A84C', bg: '#0D0D12' }
Regular / 400 / 11px Label técnico · Section · Tag
03 — Componentes

Librería de componentes

Piezas UI reutilizables. Todos los componentes respetan la paleta y el sistema tipográfico definidos.

Botón Primario
Botón Secundario
Badges
Nuevo v1.0 Beta PRO
Tags
Activo Inactivo Completado
Card con acento dorado
Módulo de Liderazgo Estratégico
Desarrolla las competencias clave para liderar equipos de alto rendimiento en entornos de transformación digital.
04 — Reglas

Reglas de uso

Guía de decisiones para mantener coherencia visual en todos los materiales y plataformas.

✓
Correcto
  • Usar dorado #C9A84C solo como acento puntual
  • Texto blanco cálido sobre fondos oscuros
  • Inter para toda comunicación principal
  • JetBrains Mono exclusivo para código y labels técnicos
  • Fondos entre #0D0D12 y #1a1508
  • Opacidades graduales para jerarquía de texto
  • Bordes sutiles con opacidad baja en surfaces
✗
Incorrecto
  • Usar dorado como color de fondo extenso
  • Texto negro o gris sobre fondos claros
  • Mezclar Inter y JetBrains Mono en el mismo bloque
  • Fondos blancos o claros en la UI principal
  • Colores de acento adicionales no definidos
  • Texto terciario como texto principal (contraste insuficiente)
  • Gradientes que incluyan colores fuera de la paleta
✓
Contraste y legibilidad
  • Texto primario sobre fondo: ratio 14:1 mínimo
  • CTAs dorados sobre fondo oscuro: alta visibilidad
  • Texto secundario (65%) para contenido de apoyo
  • Reservar terciario (40%) para metadata y labels
  • Nunca usar menos del 40% de opacidad para texto
✗
Errores comunes
  • Botón primario dorado con texto blanco (bajo contraste)
  • Múltiples acentos de color en la misma vista
  • Cards anidadas con el mismo nivel de profundidad
  • Pesos tipográficos distintos a 400, 500, 600, 700
  • Sombras de colores distintos al dorado o negro
05 — Tokens

CSS Design Tokens

Variables CSS listas para copiar e integrar en cualquier proyecto. Incluir en :root del stylesheet global.

:root {
  /* ── Color: Fondos ─────────────────────── */
  --bg-primary: #0D0D12;
  --bg-hero: linear-gradient(135deg, #0D0D12 0%, #1a1508 50%, #0D0D12 100%);
  --bg-glow: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.15) 0%, transparent 60%);

  /* ── Color: Dorado ─────────────────────── */
  --gold: #C9A84C;
  --gold-card: rgba(201, 168, 76, 0.12);
  --gold-border: rgba(201, 168, 76, 0.15);
  --gold-border-hover: rgba(201, 168, 76, 0.35);

  /* ── Color: Texto ──────────────────────── */
  --text-primary: #FAF8F5;
  --text-secondary: rgba(250, 248, 245, 0.65);
  --text-tertiary: rgba(250, 248, 245, 0.40);

  /* ── Color: Superficies ────────────────── */
  --surface-neutral: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.09);

  /* ── Tipografía ────────────────────────── */
  --font-primary: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Border Radius ─────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Transiciones ──────────────────────── */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;
}