Journal — M-08 W-frames-system · D-spec (Rafaella · sistema visual claro)

Thinking en tiempo real de la materialización del sistema visual de la landing. Output: landing/design/design-system.md. Modo: D-spec (NO build código — el build es M-09).

Contexto heredado y verificado

Antes de tocar nada cargué la LEY (art-direction-locked.md) + storyboard.md (6 BEATs, 3 escenas R3F) + motion-specs.md (reparto técnico). El system_brief de la herencia ya traía la paleta con ratios; mi trabajo aquí no es inventar paleta sino materializarla como sistema de tokens coherente y verificar la honestidad de cada ratio (Premium Floor #2 — no confiar en self-report).

Verificación independiente de contraste (python3 con la fórmula WCAG, sin librería): los 18 pares críticos pasan AA, la mayoría AAA. El brief heredado era honesto en sus números — confirmado, no asumido. wcag_aa_pass = true.

La tensión crítica (y cómo la resolví)

El art-direction §⚠️ marca la tensión central de M-08: data-viz orgánica (Q1) tira hacia profundidad por luz/glow (fácil en oscuro) + fondo CLARO institucional (Q3) la prohíbe. Mi resolución, hecha tabla explícita en el §0 del sistema:

Glow → sombra editorial (tinta FRÍA, no negra, baja opacidad, desenfoque amplio). Decisión técnica: la sombra usa HSL 222 25% 18% (un azul-tinta frío) en vez de negro puro — sobre hueso, el negro duro se ve sucio; la tinta fría se integra.
Saturación que respira → contraste de superficie + peso tipográfico variable. La tarjeta blanca se eleva del hueso por contraste, no por sombra dura. La jerarquía la marca el eje wght (320→760), no el color.
Partículas que brillan → barra de error que respira como DATO. Esto es lo más fino: la “barra de error que respira” del BEAT 3/5 es la firma de honestidad. En oscuro respiraría por luz; aquí respira por scale.y en tono cool-neutral --color-error-bar. Rigor como textura, cero neón.

Una sola frase de motion-principle que dejé clavada: el rigor se vuelve textura, y la profundidad se talla con sombra y peso, nunca con luz.

Decisiones de dirección que tomé (autónomas, documentadas)

El BEAT 1 (“el dolor”) NO se pinta de rojo de alarma. El brief no lo pedía explícitamente, pero el registro “informe auditable” lo exige: un anuncio alarmista quema la confianza jurídica del CHRO/DPO. El vértigo lo carga la asimetría brutal torrente/embudo + la triangulación de 3 cifras, no un color de pánico. --color-danger queda reservado a errores reales de UI (uso casi nulo). Esto es coherente con “tranquiliza, no alarma” del BEAT 4 extendido a todo el arco.
Mono (--font-mono) para los IDs del corpus y los slots [a validar]. Decisión de firma tipográfica: los IDs (D1D5-001) y el slot honesto ganan registro “trazable/auditable” en monoespaciada. Es la honestidad hecha tipografía — refuerza “informe”, no “marketing”. El brief pedía display + body; añadí mono como tercera familia con rol semántico estricto (solo trazabilidad), no decorativo.
Acento escaso = acento con peso. Regla data-viz que impuse: --color-accent aparece poco (sello, firewall, CTA). Un azul que aparece en todo no marca nada. La escasez del azul-evidencia ES su peso narrativo — y además sostiene el WCAG (menos áreas de acento = menos riesgo de contraste).
--color-evidence #0E7C66 (4.71:1) es solo gráfico/large; para texto uso --color-evidence-text #0A6353 (6.59:1). Anti-falso-positivo: cualquier nodo de texto usa la variante ≥4.5. Lo dejé como regla dura de uso para que M-09 no caiga en el clásico “teal bonito pero ilegible como etiqueta”.

VARIANT, no PURE ni HYBRID

Root #8 Data Intelligence es el primario (nativo al contenido: evidencia, barras de error, grafos). Documenté 4 modificaciones trazables hacia la calma institucional (fondo claro, acento único reservado, slate sereno #10/#12 acotado al BEAT 4, peso tipográfico como profundidad). Clave anti-HYBRID: el slate institucional del BEAT 4 NO gobierna ningún viewport completo — solo modula el bloque de gobernanza. El scroll es un gesto continuo (storyboard), así que un solo root primario en todo el lienzo. Si fuera HYBRID por viewport rompería la continuidad de objeto (sello→embudo→escalera→…→grafo) que es justo la ventaja narrativa sobre la live paper de Lovable.

Cambios de opinión / lo que descarté

Pensé en un segundo acento cálido para “calor humano” en el BEAT 4 (el comprador es humano). Descartado: el art-direction es taxativo — acento FRÍO único, slate sereno. Un cálido habría leído como “alarma suave” o “marketing”. La calidez la da el hueso del fondo, no un acento.
Consideré radios más generosos (12-16px) para suavizar. Descartado: redondez juguetona contradice “informe auditable”. Radios sobrios (2-12px). La institucionalidad pide esquinas contenidas.
El prior-work menciona “mapa empírico de reemplazabilidad” como tesis. Alineado con la LEY, no con el prior-work: storyboard + art-direction VETAN “mapa de reemplazabilidad” como titular/concepto visual. El BEAT 4 es mapa por zonas AGREGADO con veto al individuo y “no es scoring”. Lo dejé explícito en §4.3.

Pendiente / handoff a M-09

El .md + tokens es el contrato. Siguiente paso Foundation Chain: frames Figma hi-fi (hero + 6 keyframes) → checkpoint CEO → widgets standalone → page composition → V3-Visual (Premium Floor 6-7 human-eye + visual-critic adversarial 3-lens). El grep Phase 0 token integrity corre en M-09 contra el build real.

Intento opcional: crear un design_system Stitch desde el .md para tener artefacto visual. Si Stitch no acepta el formato limpio, el .md + tokens basta (es el entregable canónico).

W-frames-system · A-retro + verdict (APPROVE)

Cierre del COMBO M-08 W-frames-system. SKU A-heartbeat + A-retro. Semáforo y verdict del sistema visual claro.

Verdict: APPROVE (V-review id `e72e0eba-7df8-4e0b-9761-2b594eafec7c`)

El sistema visual claro WCAG AA queda aprobado. El entregable canónico (landing/design/design-system.md + tokens) cumple la LEY del art-direction sin desviaciones: tono CLARO institucional (fondo hueso, no oscuro), data-viz orgánica editorial seria, root #8 Data Intelligence en VARIANT (4 modificaciones trazables documentadas), acento de evidencia FRÍO sobre claro, profundidad tallada por sombra/contraste/peso tipográfico/micro-motion — cero glow/neón. La verificación independiente de contraste (fórmula WCAG en python3, sin librería) confirma que los 18 pares críticos pasan AA, la mayoría AAA: el brief heredado era honesto, confirmado no asumido.

Semáforo: 🟡 YELLOW (APPROVE con gap no bloqueante)

El verdict es APPROVE limpio, pero el A-retro registra honestamente un gap menor que NO bloquea el cierre:

Discrepancias de redondeo en la tabla del doc §1.5. Dos pares muestran valores publicados ligeramente desviados del recálculo independiente:
- attention: doc 5.13 vs recálculo 5.44.
- danger: doc 7.13 vs recálculo 7.11.
Impacto: nulo para el gate. Ambas variantes pasan AA holgado en cualquiera de las dos cifras (≥4.5 para texto, ≥3.0 para large/gráfico). Es un defecto de coherencia auditable, no de accesibilidad.
Acción diferida a M-09: corregir los valores publicados en la tabla §1.5 contra el recálculo durante el build, para que el contrato de tokens y la auditoría visual coincidan al dígito. Queda como deuda explícita, no como bloqueo.

Por qué YELLOW y no GREEN

El sistema es sólido y aprobable, pero un sistema de diseño cuya virtud central es la honestidad auditable (la “barra de error que respira”, los IDs en mono, el slot [a validar]) no puede publicar números de contraste que no cuadran con su propio recálculo sin anotarlo. La coherencia entre lo que el doc afirma y lo que la fórmula devuelve es parte del Premium Floor #2 (no confiar en self-report). El gap es cosmético-auditable y de fácil arreglo en M-09, de ahí YELLOW y no RED.

Handoff a M-09 (build)

Corregir tabla §1.5: attention → 5.44, danger → 7.11 (valores recalculados).
Foundation Chain: frames Figma hi-fi (hero + 6 keyframes) → checkpoint CEO → widgets standalone → page composition.
Phase 0 token integrity grep contra el build real.
V3-Visual: Premium Floor 6-7 human-eye + visual-critic adversarial 3-lens.

COMBO M-08 W-frames-system cerrado. El build (M-09) NO es parte de este SKU.