M-09 · Entrada 17 de 25

W9a · Fundación landing Next.js

Qué es esto

Fundación Next.js + paleta; aún sin animaciones.

Fase del Bridge

COMBO W9 (M-09) · I-code.

M-09 W9a · Fundación landing Next.js + re-paleta naranja Momentum

Ola de fundación de la landing investor-grade. NO se construyen animaciones (eso es W9b). W9a entrega: scaffold Next.js App Router, sistema de tokens y la re-paleta que sustituye TODO el azul del design-system M-08 por el naranja Momentum #FF6B35 (directiva CEO · color del LMS real). Modo claro inviolable.

W9a · A-retro + verdict (APPROVE)

Semáforo: 🟢 VERDE

La ola cierra en verde. Fundación sólida, verificable y conservadora en accesibilidad.

Qué se ha shippeado (verificado, no reportado)

  • Scaffold Next.js 16.2.9 App Router (landing/web) · Turbopack · npm run build re-ejecutado EXIT 0 · TypeScript limpio · 4/4 páginas estáticas. Cumple OD-004.
  • Re-paleta naranja Momentum · CERO azul. grep de #1B4DCC/blue/hex azules en app/ = 0 matches. El naranja es ahora el acento único y sustituye todo el azul M-08.
  • Tokens (Foundation Chain). globals.css :root → color / tipografía / espacio / radio / sombra / motion + @theme inline (Tailwind v4). Eje de peso display capado a 700 (Space Grotesk máx) frente a 760 de M-08.
  • Tipografía. Space Grotesk (display · H1) + Inter (body) vía next/font/google, display:swap. JetBrains Mono reservado para IDs del corpus.
  • Modo CLARO. Fondo hueso #F7F5F0, sin dark mode. Sin glow/neón — profundidad por sombra editorial HSL low-alpha. Las únicas menciones a “glow” son comentarios que lo prohíben.

Decisión de accesibilidad (el punto fino de la ola)

El mandato pedía #E85A2A para TEXTO con AA ≥4.5. Empíricamente #E85A2A mide 3.25:1 sobre hueso → no pasa AA en texto pequeño. La implementación lo corrigió usando un escalado de naranja por uso:

TokenHexUsoRatio sobre hueso
--color-accent#FF6B35fills / acentos gráficos grandes2.6:1 (NO texto)
--color-accent-hover#E85A2Ahover CTA fill + UI/large3.25:1 (NO texto pequeño)
--color-accent-strong#C2410Ctexto de acento, enlaces, etiquetas4.75:1 (AA PASS)
--color-accent-light#FFF7EDtinte de fondo chip/badgeno-texto
tinta #16191F sobre fill #FF6B35texto sobre relleno naranja6.21:1

No es un fallo: es la corrección correcta y más conservadora, satisface la intención del mandato (“#E85A2A o más oscuro · ≥4.5”) y el requisito real WCAG AA.

Gaps registrados (honestos · no bloqueantes)

  1. Hero centrado verticalmente porque cada escena reserva section-min-h:100vh (intencional para CLS-0 antes del lazy-mount de W9b). En la fundación estática deja mucho espacio en blanco superior — esperado en W9a, se resuelve al montar las escenas.
  2. Mandato a actualizar. El mandato especificaba #E85A2A para texto; ese color (3.25:1) no pasa AA en texto pequeño y la implementación usó correctamente #C2410C (4.75:1). Conviene actualizar el texto del mandato para futuras olas, de modo que el token de TEXTO de acento sea #C2410C y #E85A2A quede explícitamente como hover/UI.

Verdict

  • V-review (adversarial · default-REJECT)APPROVE
  • Verdict ID: 20553245-c066-4604-b29e-e080994be6c3
  • 7/7 checks PASS (build · cero azul · fuentes · modo claro · WCAG AA texto · tokens Foundation Chain · sin glow). Verificación con build re-ejecutado + ratios calculados en Python + screenshot headless inspeccionado con Vision.

Deuda / siguiente ola

  • W9b: construir las animaciones de escena (lazy-mount, scroll-driven) sobre esta fundación. El reservado 100vh por escena y los tokens de motion ya están listos.
  • Actualizar el mandato de paleta (gap 2) antes de arrancar W9b.