Canvas P1 — Sistema de diseño completo
7 pantallas + componentes atómicos + handoff técnico. Cada tarjeta abre en pestaña independiente para inspección detallada. Tokens en tokens/tokens.css, todo accesible WCAG AA.
📋 Documentación
Punto de partida para Claude Code y para revisar el sistema antes de implementar.
HANDOFF.md
Estructura de archivos, tokens críticos, datos reales del corpus, 17 componentes en orden, 10 decisiones técnicas confirmadas y 6 preguntas para Claude Code antes de implementar.
Abrir handoff →P0 audit · WCAG AA
17 tokens auditados con su ratio de contraste exacto. Sprite de iconos editoriales. Validación previa a P1.
Abrir P0 →🧩 Globales — Header & Footer
3 variantes de header (pública, logged, mobile) y footer responsivo con métricas reales del corpus.
📐 Layouts shell
Dos shells base: Editorial para home + chat + marketing, Biblioteca para listados densos con sidebar.
🖥️ Pantallas P1
5 pantallas core de Oficio&Circular: Home con 3 tabs SPA, Chat con citas verificables, listado denso de fallos, vista de detalle editorial y página de planes.
📱 Sub-producto · ImpuestoFácil
facil.normaviva.cl — entrada para personas y emprendedores. Mobile-first, simple, con disclaimer permanente y fuentes oficiales numeradas.
⚛️ Componentes atómicos
17 patrones reutilizables en una sola página. Listos para extraer a archivos individuales React/Vue. Todos heredan de tokens.css.