Layout y Espaciado
El layout es la estructura invisible que organiza todo lo visible. Un componente correcto en una posición incorrecta produce una interfaz confusa. Un grid mal definido produce inconsistencias entre pantallas que el usuario percibe pero no puede articular. Este documento define cómo se organizan los elementos en el espacio de cada plataforma.
La unidad base: 4px
Todo el sistema de espaciado y layout se construye sobre una unidad base de 4px. Esta unidad no es arbitraria: corresponde al submúltiplo más pequeño que alinea correctamente en pantallas con densidades de 1x, 2x y 3x sin producir bordes en subpíxeles.
La regla es simple: si un valor de espaciado o dimensión no es múltiplo de 4, no pertenece al sistema. 15px, 17px, 10px no existen. 12px, 16px, 8px sí.
Grids por plataforma
El sistema usa grids de columnas adaptados al ancho de pantalla. El número de columnas, el ancho del gutter y el margen lateral cambian por breakpoint pero siempre siguen la misma lógica.
Mobile — 4 columnas
| M | col | G | col | G | col | G | col | M || Propiedad | Valor |
|---|---|
| Columnas | 4 |
| Gutter (G) | 16px |
| Margen (M) | 16px |
El grid de cuatro columnas cubre la mayoría de layouts móviles. Las listas ocupan las 4 columnas completas. Las tarjetas con dos en paralelo usan 2 columnas cada una (posible en elementos compactos como chips o iconos, no en tarjetas de contenido).
Tablet — 8 columnas
| M | col | G | col | G | col | G | col | G | col | G | col | G | col | G | col | M || Propiedad | Valor |
|---|---|
| Columnas | 8 |
| Gutter (G) | 16px |
| Margen (M) | 24px |
El grid de ocho columnas permite layouts de dos paneles: una columna lateral de 2-3 columnas para navegación o filtros, y el contenido principal en las columnas restantes.
Desktop — 12 columnas
| Propiedad | Valor |
|---|---|
| Columnas | 12 |
| Gutter (G) | 24px |
| Margen (M) | 32px |
El grid de doce columnas es el estándar de diseño web. Permite layouts de 1/4, 1/3, 1/2, 2/3 y 3/4 sin fracciones de columna. El sidebar de navegación ocupa 2-3 columnas; el contenido principal ocupa las restantes.
Wide / ERP — 12 columnas con contenedor máximo
| Propiedad | Valor |
|---|---|
| Columnas | 12 |
| Gutter (G) | 24px |
| Margen (M) | 48px |
| Contenedor máximo | 1440px |
En anchos superiores a 1440px, el contenido se centra dentro de un contenedor máximo. El fondo de la pantalla puede llevar el color surfaceDim para no dejar extensiones blancas descontroladas en monitores ultrawide.
Breakpoints y comportamiento de layout
Los breakpoints son los puntos exactos en los que el layout cambia de estructura. No son puntos donde el contenido simplemente se reduce.
graph LR A["0px\nmobile"] --> B["600px\ntablet"] --> C["1024px\ndesktop"] --> D["1440px\nwide"]
| Rango | Nombre | Columnas | Gutter | Margen |
|---|---|---|---|---|
| 0 — 599px | mobile | 4 | 16px | 16px |
| 600px — 1023px | tablet | 8 | 16px | 24px |
| 1024px — 1439px | desktop | 12 | 24px | 32px |
| 1440px+ | wide | 12 | 24px | 48px |
Reglas de transición entre breakpoints
Al cruzar de mobile a tablet:
- La navegación puede pasar de bottom navigation a navigation rail lateral.
- Los formularios pasan de un campo en toda la fila a dos campos en paralelo.
- Las listas de tarjetas pueden mostrar dos columnas.
Al cruzar de tablet a desktop:
- La navegación lateral se expande con labels completos visibles.
- Los dashboards muestran tres o cuatro métricas en una fila.
- Los formularios largos pueden dividirse en dos columnas de campos.
Al cruzar a wide:
- El layout interno no cambia; solo el margen lateral aumenta.
- El contenedor de contenido no supera los 1440px en el centro.
Anatomía de una pantalla
Cada pantalla tiene una estructura vertical con zonas definidas. Las zonas son invariables; lo que cambia entre plataformas es la forma en que se presentan.
graph TD A["Safe Area Top\n(status bar / notch)"] --> B B["Top App Bar / Header\n(navegación, título, acciones)"] --> C C["Zona de contenido\n(scroll si necesario)"] --> D D["Bottom Navigation o Footer\n(solo mobile/tablet)"] --> E E["Safe Area Bottom\n(gesture nav / home bar)"]
Safe Areas
Las Safe Areas son las zonas del dispositivo que no deben tener contenido interactivo. En móvil, corresponden al notch superior y a la barra de gestos inferior. En web desktop no existen.
Todo contenido interactivo (botones, campos de formulario, ítems de lista) debe quedar dentro del área segura. Las superficies de color (headers, footers, navigation bars) pueden extenderse hasta el borde del dispositivo, pero los elementos interactivos dentro de ellas respetan el padding de safe area.
Top App Bar
El header superior tiene altura fija por plataforma:
| Plataforma | Altura | Elemento |
|---|---|---|
| App Móvil | 56dp | Top App Bar compacta |
| Tablet | 64dp | Top App Bar media |
| Web Desktop | 64px | Header con logo y navegación |
| ERP | 56px | Header simplificado |
| Pantalla embebida | 72px | Header de estado con tiempo |
El Top App Bar lleva como máximo: una acción de retroceso (izquierda), un título (centro o izquierda) y hasta dos acciones de íconos (derecha). Si se necesitan más acciones, van en un menú de overflow (tres puntos).
Zona de contenido
La zona de contenido ocupa todo el espacio entre el header y la barra de navegación inferior (si existe). Es la única zona que puede hacer scroll vertical.
El padding interno de la zona de contenido sigue la escala de espaciado:
| Plataforma | Padding horizontal | Padding vertical (top/bottom) |
|---|---|---|
| App Móvil | space-4 (16dp) | space-4 (16dp) |
| Tablet | space-6 (24dp) | space-6 (24dp) |
| Web Desktop | space-8 (32px) | space-6 (24px) |
| ERP | space-6 (24px) | space-4 (16px) |
Composición de pantalla
Principio de una jerarquía
Cada pantalla tiene una sola jerarquía visual. El ojo del usuario debe encontrar el elemento más importante sin ambigüedad. Para asegurar esto, la composición sigue tres niveles verticales:
- Foco — El elemento de mayor tamaño visual o el que usa el color primario. Solo uno por pantalla.
- Soporte — Información contextual o secundaria que amplía el foco. Puede haber más de uno pero visualmente subordinados.
- Fondo — Metadatos, etiquetas, acciones de baja frecuencia. Nunca compite con el foco.
Espaciado entre secciones
Las secciones dentro de una pantalla se separan con valores de espaciado consistentes. No se inventan separaciones ad-hoc.
| Separación | Token | Valor |
|---|---|---|
| Entre elementos de una lista | space-3 | 12px |
| Entre campos de un formulario | space-4 | 16px |
| Entre grupos de campos | space-6 | 24px |
| Entre secciones de una pantalla | space-8 | 32px |
| Entre bloques estructurales | space-12 | 48px |
Alineación y padding de tarjetas
Las tarjetas tienen un padding interno estándar por contexto:
| Contexto | Padding |
|---|---|
| Tarjeta compacta | space-3 (12px) |
| Tarjeta estándar | space-4 (16px) |
| Tarjeta de contenido | space-6 (24px) |
| Panel o sección grande | space-8 (32px) |
Formularios y layout de campos
Los formularios tienen sus propias reglas de composición que aplican en todos los contextos.
Columnas de campos
| Plataforma | Columnas máximas de campos |
|---|---|
| App Móvil | 1 |
| Tablet | 2 |
| Web Desktop | 2 — 3 |
| ERP | 3 — 4 |
Cuando un formulario tiene dos columnas, los campos cortos (código, cantidad, fecha) van en la misma fila. Los campos largos (nombre, dirección, nota) siempre ocupan la fila completa.
Longitud de campos
El ancho visual de un campo debe comunicar la longitud esperada de su contenido. Un campo de código postal no debe ocupar el mismo ancho que un campo de dirección.
| Tipo de campo | Ancho relativo |
|---|---|
| Código / ID | 25% del contenedor |
| Cantidad / número | 33% del contenedor |
| Fecha / hora | 33% del contenedor |
| Nombre | 50% del contenedor |
| 50% del contenedor | |
| Dirección / nota | 100% del contenedor |
Iconografía y dimensiones
Los íconos del sistema siguen un tamaño estándar por contexto de uso. No se escalan libremente.
| Contexto | Tamaño |
|---|---|
| Ícono dentro de botón | 18dp/px |
| Ícono de navigation rail | 24dp/px |
| Ícono de lista | 24dp/px |
| Ícono de acción en header | 24dp/px |
| Ícono de estado grande | 32dp/px |
| Ícono de pantalla vacía | 48dp/px |
| Ícono de pantalla de error | 64dp/px |
Resumen
- La unidad base del sistema es 4px; ningún valor de espaciado o dimensión está fuera de la escala de múltiplos de 4.
- El grid tiene cuatro configuraciones: 4 columnas en mobile, 8 en tablet, 12 en desktop y 12 con margen amplio en wide.
- Los cuatro breakpoints (
mobile,tablet,desktop,wide) determinan cambios estructurales de layout, no simplemente de tamaño. - Toda pantalla tiene Safe Areas, Top App Bar, zona de contenido scrollable y navegación inferior cuando aplica.
- El espaciado entre secciones sigue tokens definidos:
space-3entre ítems de lista,space-8entre secciones de pantalla. - Los formularios tienen reglas de columnas por plataforma (máximo 1 columna en mobile, hasta 4 en ERP) y de longitud de campo según el tipo de dato.