Header · 3 variantes↗ Abrir
Pública · Logged · Mobile — 3 tabs SPA, ⌘K, sin dorado en chrome
Oficio&Circular · NormaViva SpA
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.
Footer global↗ Abrir
NormaViva SpA · 11.193 / 4.861 / 1.688 / 190 / 72 · newsletter mensual
📐 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.
P1.2 · Home / 3 tabs SPA↗ Abrir
Hero stats · search-bar contextual · grid trending · ImpuestoFácil card
P1.1 · Chat IA con citas↗ Abrir
5 estados · footnotes verificables · pull-quote del oficio
P1.3 · Fallos TTA densos↗ Abrir
Sidebar · filtros · tabla 7 col · 4 estados · drawer mobile
P1.4 · Detalle de fallo↗ Abrir
Vista lectura · considerandos · pull-quote · sidebar metadata + citas
P1.5 · Pricing↗ Abrir
3 tiers · Early Access banner · toggle anual/mensual · tabla comparativa · FAQ
📱 Sub-producto · ImpuestoFácil
facil.normaviva.cl — entrada para personas y emprendedores. Mobile-first, simple, con disclaimer permanente y fuentes oficiales numeradas.
P1.6 · ImpuestoFácil minimal↗ Abrir
Mobile entrada vacía · Desktop con respuesta y fuentes 1/2/3
⚛️ Componentes atómicos
17 patrones reutilizables en una sola página. Listos para extraer a archivos individuales React/Vue. Todos heredan de tokens.css.
P1.7 · 17 componentes↗ Abrir
Botones · tags · chips · inputs · toggles · banners · modal · ⌘K palette · más