12. Layouts canónicos

12.1 App shell (aplicación)

Sidebar 240-280px (colapsable a 64) + topbar 56-64px + contenido con padding espacio-xl y ancho máximo 1200-1440px centrado. En móvil la sidebar se vuelve cajón (drawer) o barra inferior de máximo 5 destinos.

12.2 Dashboard

Rejilla de 12 columnas, gutter 24px. Pirámide invertida: fila de 3-4 tarjetas KPI arriba → gráficos principales (6-8 columnas cada uno) → tablas de detalle abajo. Cada tarjeta usa container queries para reorganizarse según su ancho real. Filtros globales (período, segmento) fijos arriba, nunca repetidos por tarjeta.

12.3 Página de documento / lectura

Columna única de 60-75 caracteres (~65-72ch), serif para el cuerpo, sans para títulos. Tabla de contenido fija a la izquierda en pantallas anchas. Márgenes generosos: el blanco es parte del diseño.

12.4 Landing / página de marketing

Hero con un solo mensaje y una sola acción primaria → secciones alternadas con espacio-seccion fluido → prueba social → cierre con la misma acción del hero. Una idea por sección; ancho de texto limitado aunque la sección sea ancha.

12.5 Formulario / asistente

Columna única centrada de 480-640px, progreso visible, una decisión por pantalla en flujos críticos.