--- type: TP asset_id: TP-EL-Brand-WebColorMigration-v01 version: v01 proyecto: Brand · Migración de color de sitios/mini-sitios · Ecosistema EmpowerLabs owner: Victor Heredia sherpa: SherpaX (Jay) ratificadores: [Victor (L3+), Paloma (Brand)] estado: 🟢 listo para ejecutar · marca azul v03.2 intellibank: IB-EL-EmpowerLabs subbank: Brand fecha_creacion: 2026-07-20 proposito: Paquete para que el equipo re-skinnee los sitios y mini-sitios del vault a la estructura de color v03.2 (azul eléctrico + magenta sobre negro), en las 3 versiones (oscuro/claro/híbrido). referencias_canonicas: - EL-BrandOS-Tokens-v03.css (definición de tokens + regla) - VIZ-EL-Brand-BrandBookMaestro-v03.html (brandbook) - WOI-EL-EmpowerScan-Landing-v02-Oscuro/Claro/Hibrido.html (patrón de referencia · 3 versiones) tags: [TP, brand, migracion, color, websites, minisitios, azul, tema] --- # TP-EL-Brand-WebColorMigration-v01 ## Adaptar los sitios y mini-sitios del vault a la estructura de color v03.2 > **BLUF.** Toma cualquier `.html` (sitio, mini-sitio, dashboard) del vault y llévalo a la marca azul: **fondos negro/oscuro o blanco/neutro — NUNCA color de fondo**; **azul `#1E9BF0`** (highlight `#5BC3FF`) solo para resaltar texto/viñetas/símbolo; **Rosita/magenta `#CA3BAE`** = acción/CTA; teal = dato. Y entrega **3 versiones** (oscuro/claro/híbrido) con un sistema de tema por tokens. Patrón de referencia ya hecho: los tres `WOI-EL-EmpowerScan-Landing-v02-*`. --- ## 1. La regla dura (no re-litigar) 1. **Fondos = negro/oscuro neutro (`#0C0C10`/`#15151C`) o blanco/neutro (`#FFFFFF`/`#FAFAFC`).** El color de marca NUNCA es relleno ni gradiente de fondo. 2. **Azul = resalte.** `#1E9BF0` (sobre claro) / `#5BC3FF` (sobre oscuro) para texto destacado, viñetas, bordes, iconos, el símbolo. 3. **Magenta Rosita `#CA3BAE` = acción.** CTAs, indicadores activos, un dato puntual. 4. **Teal `#34C7BA` = dato/éxito.** Cyan `#3DC7DE` = N3. Azul profundo/índigo = N2. 5. **Verde `#567411` DESCARTADO.** No usar. (Y el morado v02 quedó superado.) 6. **3 versiones siempre:** Oscuro · Claro · Híbrido (secciones alternadas). Fuente única de tokens: **`EL-BrandOS-Tokens-v03.css`** — pégalos, no redefinas hex a mano. --- ## 2. Mapa de reemplazo OLD → NEW La mayoría de los tableros vienen de la paleta viva morada/periwinkle (`EL-DashboardStandard-v01.js`). Reemplaza: | Rol | Viejo (aprox.) | Nuevo | |---|---|---| | Acento de casa / firma | `#8a90f0` `#a892ff` `#6b54c9` (periwinkle/morado) · `#567411` (verde) | **`#1E9BF0`** (resalte `#5BC3FF`) | | Fondo oscuro | `#0f0e1a` `#1a1830` `#221f3a` (morados) | **`#0C0C10` `#15151C` `#1D1D26`** (neutro) | | Bordes/líneas | `#2c2950` | **`#2B2B36`** | | Acción / CTA | naranja/ámbar `#F6A000` · variados | **`#CA3BAE`** (Rosita) | | Dato/éxito | `#34c7ba` | `#34C7BA` (se queda) | | Texto | teñidos | `#ECECF0` `#B8B8C4` `#86868F` (oscuro) · `#171622` `#3D3D4A` (claro) | ⚠️ Cualquier **fondo que sea color** (verde, morado, teal, naranja) → cámbialo a negro/oscuro o blanco/neutro. El color se mueve al **texto/borde**. --- ## 3. Sistema de tema para las 3 versiones (copia este patrón) Del patrón de referencia `WOI-EL-EmpowerScan-Landing-v02-*`: ```css :root{ /* acentos constantes */ --blue:#1E9BF0; --blue-lite:#5BC3FF; --rosita:#CA3BAE; --cyan:#3DC7DE; --teal:#34C7BA; /* tokens de tema (default oscuro) */ --bg:#0C0C10; --surface:#15151C; --surface-2:#1D1D26; --line:#2B2B36; --t1:#ECECF0; --t2:#B8B8C4; --t3:#86868F; --panel:linear-gradient(160deg,#101018,#0C0C10); --ink-accent:#5BC3FF; } :root[data-theme="light"], .sec-light{ --bg:#FFFFFF; --surface:#FAFAFC; --surface-2:#F1F1F6; --line:#E6E6EC; --t1:#171622; --t2:#3D3D4A; --t3:#6E6A7A; --panel:linear-gradient(160deg,#F2F6FC,#FFFFFF); --ink-accent:#1E9BF0; } .sec-dark{ /* mismos valores oscuros */ } .sec-light,.sec-dark{ background:var(--bg); color:var(--t1); } ``` - **Oscuro:** ``. - **Claro:** ``. - **Híbrido:** `data-theme="dark"` + clase `sec-light` en secciones alternas (`
`). Todo lo que sea superficie/texto usa `var(--surface)`, `var(--t1/2/3)`; los resaltes usan `var(--ink-accent)`; los paneles elevados `var(--panel)`. Así las 3 versiones salen del mismo archivo cambiando 1 atributo. Exportar con sufijo: `-Oscuro.html` · `-Claro.html` · `-Hibrido.html`. --- ## 4. Receta de migración (por archivo) 1. **Inventaría los hex** del archivo (busca `#` en el CSS). 2. **Sustituye** según §2. Los fondos de color → neutro; el acento → azul; CTA → Rosita. 3. **Convierte a tokens** los valores repetidos (bg/surface/line/text/panel/ink-accent) según §3. 4. **Aplica la regla:** ningún fondo de color; azul solo resalta. 5. **Contraste AA** en texto (el `#5BC3FF` y el teal NO pasan AA como texto sobre blanco → en claro usa `#1E9BF0`; el sistema ya lo hace vía `--ink-accent`). 6. **Genera las 3 versiones** (§3) y renderiza cada una para revisar. 7. **Naming + ubicación** canónicos; commit al vault; registra en el registry. --- ## 5. Inventario a adaptar (prioridad) **Prioridad 1 — sitios públicos / demand-gen (`PB-DEMANDGEN-EmpowerLabs/`):** - `WOI-EL-EmpowerLabs-SitioCasa-v01.html` ✅ (ya en azul) - `WOI-EL-EmpowerScan-Landing-v02-*` ✅ (patrón de referencia) - `WOI-EL-EmpowerScan-Calculadora-v05.html` · `WOI-EL-EmpowerScan-Landing-v01.html` · `WOI-EL-EmpowerScan-Logistica-USA-MX-v01.html` - `BRD-EL-DG-Home-v01.html` · `VIZ-EL-Ecosistema-GrafoInterno/GrafoPortafolio-v01.html` **Prioridad 2 — mini-sitios de producto (home + piezas):** - WORX OS (`BOS-EL-WORX-OS/BRD-EL-WORXOS-Home-v01.html`, Home-Live) - SOO (`PB-SOO-.../BRD-EL-SOO-Home-v01.html`, mapas VIZ) - Skill Factory · MacroLoopX · Brain Codes · EmpowerScan Home · Factoría Editorial (`IB-MPX-...`) - IntelliBanks Home (`IB-XX-Maestro/BRD-XX-IntelliBanks-Home-v01.html`) - MatriX Hub (`IB-MTX-MatriX/MatriX-Hub-v01.html`) — ⚠️ su firma teal es intencional; confirmar con Victor antes de tocarla. **Prioridad 3 — dashboards de equipo (`EQ-EL-Equipo/`):** - HOY · Buzón · Frentes · EstaSemana · AgendaViva · WeekDashboard · Logros · Boletín · NEXTs · RallyWORX - ⚠️ Muchos heredan de `EL-DashboardStandard-v01.js` (kit central). **La palanca de mayor impacto: migrar el kit una vez** → todos los tableros que lo cargan heredan la paleta nueva. Empezar por ahí. > Para el inventario completo: `find IB-* -name '*.html'` en el vault. Reportar cualquier tope o exclusión (no migrar en silencio). --- ## 6. Punto de mayor palanca `IB-XX-Maestro/EL-DashboardStandard-v01.js` inyecta la paleta a **todos** los dashboards. Migrar ese kit a los tokens azules v03.2 (§2–§3) actualiza el ecosistema de tableros de una sola edición. **Hacerlo primero**, con backup, y probar en 2-3 tableros antes de dar por bueno. --- ## 7. Starter Prompt (nuevo room) ``` /wx-arrancaroom Room: migración de color de sitios a la marca azul v03.2. Contexto: IB-EL-EmpowerLabs/Brand/TP-EL-Brand-WebColorMigration-v01.md Regla (no re-litigar): fondos negro/oscuro o blanco/neutro — NUNCA color de fondo; azul #1E9BF0/#5BC3FF resalta; Rosita #CA3BAE = acción; teal = dato. Verde descartado. Tokens: EL-BrandOS-Tokens-v03.css. Patrón de 3 versiones: WOI-EL-EmpowerScan-Landing-v02-*. Tarea de hoy: [p.ej. "migrar el kit EL-DashboardStandard-v01.js" o "re-skinnear el mini-sitio WORX OS en las 3 versiones"]. Entregar: oscuro + claro + híbrido, renderizados y revisados, commit al vault. ``` --- ## 8. Gobernanza - Naming `TIPO-ENTIDAD-Proyecto-Nombre-vNN`; sufijo `-Oscuro/-Claro/-Hibrido`. - Tripleta: Owner + Sherpa + Ratificador. Brand ratifica Paloma; ecosistema L3+ Victor. - Gate G0: consultar `Brand/` (tokens + brandbook) antes de tocar color. - No migrar la firma teal de MatriX sin confirmación de Victor. ## Fuentes - `EL-BrandOS-Tokens-v03.css` · `VIZ-EL-Brand-BrandBookMaestro-v03.html` · `WOI-EL-EmpowerScan-Landing-v02-*` · `EL-DashboardStandard-v01.js` *TP-EL-Brand-WebColorMigration-v01 · IB-EL-EmpowerLabs/Brand · 2026-07-20 · Owner: Victor · Sherpa: Jay*