Sistema de Cuadrícula Bento

¿Qué hace Sistema de Cuadrícula Bento?

Propósito

El Sistema de Cuadrícula Bento proporciona una metodología para organizar contenido dispar (como métricas clave de rendimiento, ilustraciones visuales, widgets interactivos, citas y adelantos de funciones de producto) en una cuadrícula unificada y modular. Inspirado en las tradicionales bento boxes japonesas, establece un equilibrio asimétrico a través de alturas y anchos de celda variables. Este sistema resuelve el problema de diseño de la fragmentación visual en paneles, páginas de destino y portafolios, aplicando reglas proporcionales estrictas, relleno interno consistente y escalas tipográficas estructuradas. Transforma lo que fácilmente podría ser un diseño caótico en una jerarquía visual pulida, escaneable y accesible.

Casos de Uso

• Presentaciones de Funcionalidades SaaS: Presentar una mezcla diversa de capacidades de producto, estadísticas de rendimiento, integraciones de sistemas y vistas previas interactivas de UI en una sola sección de página de destino.
• Paneles de Datos y Métricas: Agrupar indicadores clave de rendimiento (KPIs), gráficos y resúmenes operativos en bloques visuales de alta densidad.
• Portafolios y Casos de Estudio: Mostrar trabajos creativos, imágenes de proyectos, citas de clientes y flujos de trabajo de diseño en una presentación dinámica y no lineal.
• Colecciones de Comercio Electrónico: Destacar productos destacados, colecciones por tiempo limitado, banners promocionales y prueba social en un diseño editorial de alto impacto.

Cuándo NO Usar

• Listas de Contenido Uniforme: Si la página comprende elementos repetitivos idénticos (por ejemplo, listados de blogs estándar o cuadrículas de productos), use card-ui-system o responsive-grid-system.
• Narrativa Jerárquica Pura: Para diseños que dependen de una narrativa lineal y secuencial (por ejemplo, "Paso 1, Paso 2, Paso 3"), use step-progress-system o section-composition-system.
• Datos Tabulares Complejos de Alto Volumen: Si los usuarios necesitan comparar valores técnicos exactos o leer filas de datos alfanuméricos, use data-table-ui-system.
• Artículos Impulsados por Contenido: Para páginas editoriales donde el enfoque principal es el texto fluido e ininterrumpido, use article-layout-system.

Entradas

1. Inventario y Prioridad de Contenido: Una lista de elementos para colocar en la cuadrícula bento, clasificados por jerarquía (1 Héroe Principal, 2-3 de Apoyo, 2-4 de Acento).
2. Taxonomía de Activos Visuales: El tipo de activo en cada celda (imagen estática, ilustración animada, control deslizante interactivo, texto plano, métrica numérica).
3. Columnas Objetivo y Puntos de Interrupción: Sistema de columnas para escritorio (típicamente una cuadrícula maestra de 4 columnas), adaptación para tableta (típicamente 2 columnas) y reglas de apilamiento para móvil.
4. Escala de Espaciado Fluido: Tokens de margen y relleno fluidos para canaletas y diseños de celda internos (de fluid-spacing-system).
5. Tokens de Diseño de Marca: Escala tipográfica, radios de borde, estilos de borde, escalas de relleno de fondo y tokens de elevación (de elevation-and-depth-system y fluid-typography-system).

Salidas

1. Mapa de Geometría de Cuadrícula Bento: Un plano de coordenadas proporcional que especifica extensiones de columna (grid-column: span X) y extensiones de fila (grid-row: span Y) para cada celda.
2. Especificaciones de Anatomía Interna de Tarjeta: Reglas para el espaciado estructural, anidación de contenido y alineación dentro de diferentes relaciones de aspecto de celda.
3. Mapa de Orden del DOM y Accesibilidad: Una secuencia de tabulación lógica que muestra cómo la estructura fuente HTML mantiene la accesibilidad a través de posiciones visuales irregulares.
4. Plan de Apilamiento Responsivo: Especificaciones de transición precisas que muestran cómo la cuadrícula asimétrica se simplifica para pantallas de tableta y móvil.

---

Flujo de Trabajo

1. Establecer la Geometría de la Cuadrícula y las Columnas

Comience definiendo la cuadrícula de coordenadas subyacente.

• Estructura de Cuadrícula Maestra: Estandarice en una cuadrícula CSS de 4 columnas para diseños de escritorio (1200px+). Esto proporciona excelentes factores matemáticos para anchos de celda (1/4, 2/4, 3/4 o 4/4 de ancho).
• Alturas de Pista Asimétricas: Establezca la altura de las filas explícitamente o use grid-auto-rows: minmax(180px, auto) para establecer una base proporcional cuadrada o rectangular horizontal (relación de aspecto 1:1 o 2:1 por unidad).
• Canaletas Fluidas: Use un token de espaciado fluido para el espacio de la cuadrícula (por ejemplo, gap: clamp(16px, 2vw, 24px)) para mantener las celdas visualmente separadas pero estrechamente unidas.

2. Mapear y Asignar Contenido por Jerarquía Visual

No disperse elementos al azar. Clasifique cada celda en uno de tres niveles estructurales:

• La Celda Héroe Principal (Ocupa 2x2 o 3x2 pistas): Ocupa aproximadamente el 40–50% del área de la cuadrícula. Alberga el activo visual, video o métrica más importante. Dicta el punto de entrada visual de toda la sección.
• Celdas de Apoyo (Ocupan pistas 2x1 o 1x2): Destacan características intermedias o estadísticas clave. Son más altas o más anchas que los bloques básicos para acomodar texto estructurado junto con un gráfico.
• Celdas de Acento (Ocupan pistas 1x1): Reservadas para elementos visuales pequeños, métricas de un solo valor simples, iconos o insignias. Redondean la cuadrícula para mantener la contención rectangular.

3. Diseñar la Anatomía Interna de una Celda Bento

Aplique restricciones de espaciado interno estrictas para mantener las celdas cohesivas:

• Relleno Unificado: Aplique un relleno interno consistente en todas las celdas, típicamente un token de relleno fluido (por ejemplo, padding: var(--space-m)). Excepción: Las celdas de acento (1x1) pueden usar un relleno ligeramente más ajustado (--space-s).
• Modos de Alineación Interna: Use flexbox (display: flex; flex-direction: column; justify-content: space-between) dentro de las celdas para alinear verticalmente los bloques de texto en la parte superior y los acentos visuales (métricas, gráficos) en la parte inferior.
• Fondo y Bordes: Estandarice un radio de borde uniforme (por ejemplo, border-radius: 16px a 24px) en todas las celdas. Use un relleno de fondo sutil (por ejemplo, un tono neutro, vidrio esmerilado translúcido o una superficie de tarjeta de bajo contraste) para establecer límites de tarjeta distintos.

4. Organizar el Orden del DOM para Accesibilidad de Teclado y Lector de Pantalla

Los diseños de cuadrícula irregulares pueden causar un desajuste entre el orden de lectura visual y el orden físico del DOM.

• Flujo de Lectura Natural: Secuencie los elementos en el documento HTML en un orden lógico de izquierda a derecha, de arriba a abajo, tal como se leerían.
• Evitar Modificación de Orden: Nunca use order en CSS ni coloque celdas arbitrariamente de una manera que omita elementos enfocables. Si la celda 1 está en la parte superior izquierda y la celda 2 en la parte superior derecha, deben aparecer en esa secuencia en el DOM, incluso si el diseño de CSS Grid las abarca de manera diferente.
• Encabezados Semánticos: Asigne a cada celda con mucho contenido una etiqueta de encabezado clara y descriptiva (típicamente <h3> o <h4>), que coincida con el esquema del <h2> de la sección principal.

5. Definir el Apilamiento Responsivo y los Puntos de Interrupción

Asegúrese de que la cuadrícula maneje correctamente la escala de la ventana gráfica:

• Escritorio (1200px+): Diseño de 4 columnas. Extensiones asimétricas de columna y fila.
• Tableta (768px - 1199px): Cambie a una cuadrícula de 2 columnas. Reasigne las extensiones para que las celdas que eran 1x1 abarquen 1 columna, y las celdas 2x1 abarquen ambas columnas (ancho completo de 2 columnas).
• Móvil (por debajo de 767px): Colapse la cuadrícula por completo en una pila vertical de 1 columna (grid-template-columns: 1fr). Elimine las alturas de fila explícitas (grid-auto-rows: auto) y deje que los elementos fluyan naturalmente, con la altura determinada por el relleno interno y el tamaño del contenido.

---

Reglas de Decisión

Cuándo abarcar Columnas vs. Filas

Tipo de Contenido del Elemento	Regla de Decisión de Extensión	Geometría Recomendada para Escritorio
Métrica de Alto Impacto / Característica Principal	Abarcar tanto columnas como filas para crear un centro focal.	grid-column: span 2; grid-row: span 2;
Visuales Amplios / Líneas de Tiempo / Gráficos	Abarcar columnas horizontalmente; mantener la altura en 1 fila para atraer la mirada horizontalmente.	grid-column: span 2; grid-row: span 1;
Lista de Texto Largo / Imágenes Altas	Abarcar filas verticalmente; mantener el ancho en 1 columna para atraer la mirada hacia abajo.	grid-column: span 1; grid-row: span 2;
Métricas Únicas / Insignias / Iconos	No abarcar. Mantener como bloque cuadrado estándar.	grid-column: span 1; grid-row: span 1;

Escalado Tipográfico en Celdas Bento

• Tamaño Adaptativo: No use el mismo tamaño de tipografía para todas las tarjetas. Mantenga la escala tipográfica proporcional al tamaño de la tarjeta.
• Tarjeta Héroe: Use font-size: clamp(1.5rem, 4cqi, 2.25rem) (usando unidades de consulta de contenedor cqi si son compatibles) para los titulares.
• Tarjeta de Acento (1x1): Limite el titular a font-size: clamp(1rem, 2.5cqi, 1.25rem) y mantenga las descripciones breves (máximo 2 líneas) u omita las descripciones por completo en favor de un icono + métrica.

Contención de Contenido vs. Sangrado

• Diseño Contenido: Coloque el contenido completamente dentro del relleno de la tarjeta con un mínimo de 16px de espacio de respiro entre el texto y los bordes. Mejor para tarjetas informativas con mucho texto.
• Diseño con Sangrado: Deje que los elementos visuales (capturas de pantalla de producto, maquetas 3D detalladas, gráficos complejos) sangren hacia la parte inferior y/o los bordes derechos de la tarjeta, enmascarando el desbordamiento (overflow: hidden en la celda). El texto permanece relleno y legible en la parte superior. Use esto para la tarjeta Héroe Principal y las tarjetas visuales de apoyo.

---

Restricciones

• Visibilidad del Enfoque (WCAG 2.2 SC 2.4.11 / 2.4.13): Si alguna celda es enfocable (por ejemplo, actúa como una tarjeta de enlace grande), debe tener un contorno :focus-visible explícito y de alto contraste. Los indicadores de enfoque nunca deben ser recortados por el contenedor de la cuadrícula principal o los límites de la tarjeta.
• Objetivos Táctiles (WCAG 2.2 SC 2.5.8): Todos los elementos interactivos dentro de las celdas bento (botones, alternadores de expansión, controles deslizantes) deben tener un tamaño objetivo mínimo de 24x24px con suficiente espacio circundante, prefiriendo 44x44px para activadores móviles.
• Alineación del Orden de Lectura (WCAG 2.1 SC 1.3.2): La secuencia del contenido tal como la analizan los lectores de pantalla debe coincidir con el significado semántico y la secuencia visual de la cuadrícula bento. La celda superior izquierda siempre debe aparecer antes que las celdas inferior derecha en el DOM fuente.
• Relaciones de Contraste (WCAG AA): Todo el texto dentro de las tarjetas bento debe cumplir un contraste mínimo de 4.5:1 contra el fondo de la tarjeta. Evite usar grises sutiles de bajo contraste para descripciones dentro de tarjetas teñidas.

---

Patrones de Falla Comunes

• El Efecto "Cajón de Sastre Visual": Meter elementos arbitrarios en una cuadrícula bento solo porque encajan. Cada celda debe servir un propósito narrativo cohesivo para la página principal.
• Desconexión DOM-Visual: Colocar las tarjetas visualmente en un orden mientras se dejan en una secuencia completamente diferente en el HTML. La navegación por teclado y lector de pantalla salta caóticamente por la cuadrícula.
• La Explosión del Diseño Móvil: Mantener extensiones de columna codificadas en pantallas móviles, lo que obliga a las tarjetas a encogerse, causando que el texto se desborde y se vuelva completamente ilegible.
• Choque de Radios de Borde Excesivos: Usar un radio de borde masivo en las tarjetas mientras se mantienen márgenes pequeños y afilados, o anidar elementos internos con radios de borde que no coinciden con la curva de esquina concéntrica de la tarjeta exterior.
• Falta de un Ancla Focal: Crear una cuadrícula donde todas las celdas tienen exactamente el mismo tamaño (por ejemplo, todas 1x1 o todas 2x1), lo que elimina el punto de entrada del diseño y causa fatiga de escaneo.

---

Criterios de Validación

• Geometría Unificada: La cuadrícula utiliza un marco de coordenadas subyacente y consistente (idealmente un diseño de 4 columnas en escritorio) con canaletas uniformes.
• Jerarquía Clara: Un solo bloque "Héroe" es visualmente dominante y establece un punto de entrada de diseño claro.
• Orden de Tabulación Natural: Tabulación a través de los elementos de la cuadrícula se mueve predeciblemente de izquierda a derecha, de arriba a abajo, coincidiendo con el diseño visual.
• Apilabilidad Móvil: El diseño cambia limpiamente a una pila de una sola columna en viewports móviles (< 768px) sin desbordamiento horizontal.
• Consistencia del Espaciado Interno: El relleno de la celda es idéntico en todas las tarjetas similares, con alineación vertical uniforme de los elementos.
• Cumplimiento de Contraste AA: Las relaciones de contraste para todos los bloques de texto e indicadores de estado dentro de cada tarjeta cumplen al menos con el estándar WCAG AA de 4.5:1.
• Seguridad Interactiva: Los objetivos táctiles para todos los widgets dentro de las tarjetas bento cumplen con el mínimo de WCAG 2.2 de 24x24px.