Tech Leaders — Marca y piezas del evento

Repositorio de la identidad de marca y las piezas gráficas generadas por código del evento Tech Leaders (LEAD UTEC, junio 2026). Dos cosas viven acá:

1. El sistema de marca (documentos): el porqué y el qué de la identidad — color, tipografía, logo, principios de diseño.
2. El pipeline de código (pipeline/): genera los flyers de agenda y los carruseles de Instagram desde datos canónicos + tokens, y los exporta a PNG/PDF.

🚀 ¿Vienes a ayudar con la agenda? Empieza aquí

La agenda se genera por código: editas JSON, corres un comando, salen los PNG/PDF. No se diseña a mano.

npm install          # Node ≥ 18 + Google Chrome instalado (ver pipeline/README)
npm run build        # genera los 5 flyers de agenda -> dist/png + dist/pdf

• Qué editar: pipeline/data/agenda.json (estructura, horarios, charlas, salas) y pipeline/data/speakers.json (ponentes — un ponente se define una vez y se referencia por id).
• Qué NO editar a mano: el HTML intermedio, los PNG/PDF, ni styles/tokens.css (generado).
• Guía completa del pipeline: pipeline/README.md ← léela antes de tocar nada.

El npm run build corre un lint de contenido que falla si la agenda es inconsistente (ponente inexistente, Career Talk sin sus 4 tracks, campos vacíos, etc.). Si pasa el lint y exporta sin avisos de overflow, tu cambio está bien.

Mapa del repositorio

techLeaders/
├── README.md                 ← estás aquí
├── DESIGN.md                 Principios y decisiones de diseño (el "porqué")
├── BRAND.md                  Sistema de marca: color, tipografía, logo, tagline (el "qué")
├── SPEAKER-CARDS.md          Especificación de las tarjetas de speaker
├── CONTRIBUTING-DESIGN.md    Cómo trabajar el diseño en Figma (builder vs filler)
├── FIGMA-BUILD.md            Estado del build del design system en Figma (vía MCP)
├── tokens.json               Fuente de verdad de estilos (color/tipo/spacing)
└── pipeline/                 Pipeline de código de las piezas
    ├── README.md             Cómo correr el pipeline (agenda + social + social-mobile)
    ├── RECONCILIACION.md     Reconciliación de contenido agenda ⟶ Media Kit
    ├── data/                 Datos canónicos (agenda, ponentes, copy social)
    ├── build/                Scripts de render/export (Node, ESM)
    ├── styles/               CSS (tokens.css generado + hojas a mano)
    ├── assets/               Fuentes Poppins + logo LEAD+UTEC
    └── dist/                 Salidas: png/ y pdf/ (html/ es intermedio, ignorado)

Las tres superficies que produce el pipeline

Superficie	Comando	Salida
Agenda — 5 flyers (PDF/impresión + feed)	npm run build	pipeline/dist/png/*.png + pdf/
Carrusel social — 9 slides de Instagram	npm run build:social	pipeline/dist/png/social/
Social mobile — 6 slides resumidos	npm run build:social-mobile	pipeline/dist/png/social-mobile/
Todo de una	npm run build:all	todo lo anterior

Las salidas finales (dist/png, dist/pdf) se commitean para que el equipo no técnico tenga los artefactos sin correr Node; solo el HTML intermedio (dist/html/) está en .gitignore.

Fuentes de verdad

• Estilos → tokens.json. Para cambiar un color, edita el token y re-genera (npm run tokens); nunca pongas hex a mano en el CSS.
• Contenido de ponentes → pipeline/data/speakers.json (autoridad: Media Kit Canva).
• Estructura/horarios de la agenda → pipeline/data/agenda.json (autoridad: agenda Canva).
• Cuando agenda y Media Kit chocan, la decisión está documentada en pipeline/RECONCILIACION.md.

Diseño en Figma (sin código)

Las tarjetas de speaker y otras piezas que no están en el pipeline se trabajan en Figma. Cómo hacerlo (roles builder/filler, importar tokens, checklist de publicación) está en CONTRIBUTING-DESIGN.md. El estado del design system en Figma está en FIGMA-BUILD.md.