Cuadrícula Estilo Bento (Bento Grid UI)

Bento Grid UI

Una página es más fácil de escanear cuando cada idea está en su propio compartimento y los compartimentos forman una cuadrícula ajustada y regular.

Una cuadrícula rectangular de celdas redondeadas de diferentes tamaños, cada una con una idea, con espacios pequeños e iguales entre ellas. Las páginas de características de Apple lo convirtieron en el diseño de producto predeterminado a partir de 2022.

Período: 2022–presente · Era: Contemporánea y Espacial · Dominio: Diseño Gráfico y de UI · También llamado: Diseño Bento, Cuadrícula Bento Box, Cuadrícula Modular de Tarjetas

Cuándo cargar esta habilidad

Cárgala cuando el usuario pida: "bento", "cuadrícula bento", "diseño de caja bento", "cuadrícula de tarjetas", "cuadrícula de características", "tarjetas modulares", "características estilo Apple", "diseño de mosaicos", "mosaicos de dashboard".

Buena para: páginas de características de producto, landing pages SaaS, portfolios personales, dashboards de aplicaciones, páginas de notas de versión.

No la uses cuando:

• El contenido es prosa larga, porque las celdas de máximo 30 palabras fragmentan un argumento.
• Los elementos tienen un orden estricto o una clasificación que el lector debe seguir de arriba abajo.
• El contenido es desigual o escaso, porque una cuadrícula con menos de 5 celdas deja huecos visibles.

Directivas del sistema

Al generar diseños de UI o gráficos en Bento Grid UI, DEBES:

1. Dividir la página en una cuadrícula de 4 columnas o 12 columnas y permitir que cada celda abarque 1, 2 o 3 columnas y 1 o 2 filas.
2. Mantener un espacio uniforme de 12 px a 16 px entre todas las celdas, y nunca mezclar tamaños de espacio.
3. Dar a cada celda un radio de 20 px a 28 px y usar el mismo radio en todas las celdas de una página.
4. Poner un mensaje en cada celda: un titular de máximo 8 palabras, un elemento visual o un número.
5. Hacer que la celda destacada sea de 2×2 y llenar las otras celdas con 1×1 o 2×1, de modo que los tamaños indiquen el orden de importancia.
6. Llenar las celdas con 2 a 4 tonos de una misma familia, más una o dos celdas en el color de acento.
7. Alinear los contenidos de las celdas con el mismo relleno interior de 24 px, y anclar el texto en la esquina superior izquierda o inferior izquierda.

Barreras de seguridad

Cada línea siguiente rompe el estilo. Verifica tu salida contra la lista antes de devolverla.

• NUNCA: Espacios de diferentes tamaños entre celdas en una misma cuadrícula.
• NUNCA: Huecos vacíos en la cuadrícula que rompan el rectángulo.
• NUNCA: Celdas con diferentes radios de esquina en una misma página.
• NUNCA: Varios mensajes o llamadas a la acción en una misma celda.
• NUNCA: Más de 8 celdas en el primer viewport.
• NUNCA: Bordes gruesos o sombras fuertes que compitan con el mosaico.
• NUNCA: Párrafos de más de 30 palabras dentro de una celda.

Perfil vectorial

Eje	Puntuación	1 significa	5 significa
Ornamentación	■■□□□ 2/5	puro minimalismo	maximalista
Dimensionalidad	■■□□□ 2/5	estrictamente 2D	3D completo / espacial
Rigidez de cuadrícula	■■■■■ 5/5	caótico / orgánico	cuadrícula matemática estricta
Realismo esqueuomórfico	■■□□□ 2/5	digital abstracto	material fotorrealista
Expresividad tipográfica	■■■□□ 3/5	neutral / invisible	experimental / ilustrativa

Mantén estas puntuaciones. Si una solicitud mueve un eje en 2 puntos o más, has salido del estilo: ve a "Alternativas de linaje".

Lógica espacial y de cuadrícula

• Mecánica de cuadrícula: Una cuadrícula de 4 columnas en escritorio con espacios de 16 px y filas de 200 px a 280 px; las celdas abarcan de 1 a 3 columnas y de 1 a 2 filas; la cuadrícula se colapsa a 1 o 2 columnas por debajo de 768 px.
• Proporción de espacio en blanco: Los espacios ocupan el 5–8% del área; el espacio abierto se mueve dentro de las celdas, donde el relleno es de 24 px a 32 px; la escala de espaciado es 8, 12, 16, 24, 32 y 64 px.
• Reglas de alineación: Los bordes de la celda se alinean con la cuadrícula en ambos ejes; el texto dentro de una celda está alineado a la izquierda y anclado en la parte superior o inferior; todo el bloque bento está centrado en un contenedor de 1120 px a 1280 px.
• Geometría del contenedor: Las celdas son rectángulos redondeados con un radio de 24 px y sin margen exterior; las proporciones de las celdas son 1:1, 2:1 y 1:2; los elementos visuales interiores se recortan con el mismo radio.

Tipografía

• Clasificaciones: sans neo-grotesca · sans geométrica
• Tracking: Los tamaños de visualización toman -0.03em; el cuerpo se mantiene en 0; los subtítulos pequeños toman +0.01em.
• Interlineado: Visualización 1.05 a 1.15; cuerpo 1.45; subtítulos 1.3.
• Reglas de jerarquía:
  • Configurar el titular de la celda destacada a 40px - 56px, otros titulares a 20px - 28px y subtítulos a 14px.
  • Usar peso 600 para titulares y 400 para subtítulos; usar un color atenuado a 4.5:1 para líneas secundarias.
  • Limitar un titular a 8 palabras y un subtítulo a 20 palabras, porque la celda tiene poco espacio.
  • Emparejar un número grande a 64px o más con un subtítulo de 14px para cada métrica clave.

Emparejamientos de fuentes

Visualización	Cuerpo	Nota
Inter Tight	Inter	Tamaños de visualización Tight para titulares de celda cortos.
Geist	Geist	Una sola familia en pesos 400, 500 y 600.
Plus Jakarta Sans	Inter	Una cara de visualización más cálida para productos de consumo.

Color e iluminación

• Estructura de paleta: Una página neutral, celdas en dos a cuatro tonos de una misma familia con baja saturación, y una o dos celdas de acento que cubren aproximadamente el 15% de la cuadrícula.
• Reglas de contraste: Tinta sobre Celda da aproximadamente 17:1 y Grafito sobre Celda da aproximadamente 5:1; texto blanco sobre Azul Acento da aproximadamente 4.7:1, lo que pasa WCAG AA para texto de cuerpo; mantener cada par de celdas en 4.5:1 o mejor.
• Tratamiento de superficie: Rellenos planos o casi planos; las celdas pueden contener una fotografía, un renderizado de producto o un degradado de dos tonos cercanos; una celda nunca mezcla más de un tipo de superficie.
• Luz y sombra: Principalmente ninguna; una sombra opcional 0 1px 2px rgba(0, 0, 0, 0.06) o un borde de 1px rgba(0, 0, 0, 0.06) separa las celdas blancas de la página.

Paleta

Nombre	Hex	Rol
Página	#F5F5F7	fondo de página
Celda	#FFFFFF	relleno de celda predeterminado
Tono de Celda	#E8E8ED	relleno de celda secundario
Tinta	#1D1D1F	texto
Grafito	#6E6E73	texto secundario
Azul Acento	#0071E3	celda de acento y enlaces
Noche	#000000	relleno de celda oscuro

Materialidad y textura

• Simulación de superficie: Ninguna; las celdas se leen como compartimentos de una fiambrera lacada, pero la superficie es de color plano o imágenes y no imita ningún material.
• Reglas de borde: Sin borde por defecto; aparece un borde sólido de 1px rgba(0, 0, 0, 0.06) donde una celda blanca se asienta sobre una página blanca; el modo oscuro usa 1px rgba(255, 255, 255, 0.1).
• Desenfoque y elevación: El desenfoque es 0px por defecto; la elevación se limita a una sombra 0 1px 2px sobre la página y una elevación 0 12px 32px rgba(0, 0, 0, 0.12) al pasar el ratón.

Ornamentación e iconografía

• Iconografía: Iconos simples con un trazo de 1.5px a 2px y extremos redondos a 24px - 32px, en Tinta o en blanco sobre celdas de acento; como máximo un icono por celda.
• Ilustración: Renders de producto, capturas de pantalla de UI y números grandes, recortados al radio de la celda; degradados abstractos llenan celdas vacías.
• Elementos decorativos: Celda destacada a 2×2 · números de métrica sobredimensionados · recortes de captura de UI · píldoras · celdas degradadas

Movimiento e interactividad

• Nacido en pantalla: sí
• Física de transición: Las celdas entran en un escalonado de 40ms a 60ms, apareciendo gradualmente y elevándose 12px; al pasar el ratón, una celda escala a 1.02 y su sombra se profundiza; los vecinos no se mueven.
• Aceleración: cubic-bezier(0.25, 0.1, 0.25, 1)
• Duración (ms): 350
• Hover y active: Hover escala la celda a 1.02 y añade una sombra 0 12px 32px rgba(0, 0, 0, 0.12); active escala a 0.98; focus añade un anillo Azul Acento de 2px desplazado 2px.

Código y tokens iniciales

Establece data-style="bento-grid-ui" en el elemento raíz y pega los tokens. El archivo tokens.css tiene los mismos tokens y un conjunto de reglas de referencia.

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Patrones de Tailwind:

Elemento	Clases
página	bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8
cuadrícula	mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]
tarjeta	rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]
tarjeta destacada	rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2
titular	font-semibold text-2xl leading-[1.1] tracking-[-0.03em]

Paquete visual

Las imágenes e iconos de este estilo son archivos. Úsalos tal cual, o léelos como una especificación y dibuja los tuyos en el mismo lenguaje.

Archivo	Contenido
pack/hero.svg	Placa hero, 800 por 600. Una imagen abstracta en el lenguaje visual del estilo.
pack/pattern.svg	Mosaico de patrón, 80 por 80. Se repite en ambas direcciones.
pack/icons.svg	Sprite de iconos: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• Iconos: trazo, trazo 1.75 en un campo de 24px, extremos redondos, uniones redondas, contenedor: redondeado. Usar: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Un icono toma currentColor.
• Familia de iconos: el sprite está cortado de Lucide (Regular) por Lucide Contributors, licencia ISC. Razón: Una línea redonda simple con un peso: silenciosa en una celda, el valor predeterminado de las interfaces de producto actuales. Es un sustituto de código abierto para una demo. Para un producto, usa la biblioteca de iconos de la marca y elige la familia según las reglas a continuación.
• Tipo de visualización: peso 600, tracking -0.03em, leading 1.05, case: none.
• Pesos: display 600, subhead 500, body 400, negrita en texto 600, etiquetas y botones 500. El estilo usa 3 pesos (400, 500, 600) y ninguno más. La visualización es 200 más pesada que el cuerpo. El acento es el tamaño: una palabra más grande es el acento, por lo que los pesos se mantienen pocos.
• Tipo de cuerpo: 16px, leading 1.5.
• Página: hero apilado, alineado a la izquierda, densidad compacta, inclinación del acento 0°.
• Color de texto: --color-text es solo para el campo de lectura principal. En cada campo, usa su token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Cómo elegir un pack de iconos

Un pack de iconos es una tipografía para imágenes. Elígela con el mismo cuidado que la cara del texto. Estas reglas son válidas tanto para un conjunto de código abierto como para una biblioteca con licencia.

1. El trazo coincide con el asta. Coloca un icono junto al texto del cuerpo en el tamaño del texto. La línea del icono y el asta de una letra tienen el mismo peso.
2. Los terminales y las esquinas siguen el token de radio. Los extremos rectos y las uniones en ángulo recto van con un radio de cero. Los extremos redondos y las uniones redondas van con un radio suave.
3. El modo de relleno sigue la tecnología de la época. Las eras de impresión cortan formas sólidas. Las eras de pantalla con profundidad rellenan y sombrean la forma. Las interfaces de producto actuales dibujan un contorno.
4. Las metáforas no son más jóvenes que el estilo. Cada imagen es un objeto que la época conocía. Un icono con una metáfora posterior rompe el período.
5. Una familia, una cuadrícula. Todos los iconos provienen de una familia y una variante, dibujados en un campo. No mezcles familias en una misma superficie.
6. La familia cubre el producto. Enumera cada concepto que el producto necesita antes de comprometerte. Una familia que no tiene un icono para uno de ellos es la familia equivocada.
7. El color es un token. Un icono toma currentColor. Un segundo tono proviene de un token, no del archivo.
8. La licencia permite el uso. Lee la licencia del conjunto. Da crédito donde la licencia lo solicite. Un producto con una marca utiliza su biblioteca con licencia y aplica las mismas reglas para elegir la familia.

Alternativas de linaje

Cuando el usuario pida una variación, no improvises. Combínalo con el vecino nombrado aquí y carga su habilidad.

• Si el usuario pide más ordenado: muévete hacia swiss-international (Estilo Internacional Suizo). Configura el radio a 0px, elimina los rellenos de celda y divide las celdas con reglas de 1px; mantén la cuadrícula de 12 columnas y la escala tipográfica.

• Si el usuario pide más vítreo: muévete hacia glassmorphism (Vidrio Morfismo). Llena las celdas con rgba(255, 255, 255, 0.18) y backdrop-filter blur(20px) sobre una página degradada; mantén los espacios y el radio.

• Si el usuario pide más audaz: muévete hacia neo-brutalism-ui (Neo-Brutalismo UI). Añade un borde negro de 3px y una sombra 4px 4px 0 0 #000000, y llena las celdas con tonos planos llamativos; mantén la cuadrícula y el espacio de 16px.

• Si el usuario pide más plano: muévete hacia flat-design (Diseño Plano). Elimina las sombras y los bordes, y usa rellenos de celda sólidos sin fotografía; mantén el radio de 24px y el espacio.

• Proviene de (ve aquí para una versión más ortodoxa): flat-design, swiss-international

• Combina bien con: glassmorphism, swiss-international

• Más cercano por perfil vectorial: bauhaus, material-design, swiss-international

Objetivo emocional

Curiosidad ordenada: el espectador siente que el producto está organizado, compacto y fácil de escanear en segundos.

Palabras clave: organización, claridad, escaneabilidad, modernidad, pulcritud, minimalismo.

Notas de implementación

Para detalles de implementación completos y código de ejemplo, consulta el archivo tokens.css.

---

Este documento es parte de una colección de habilidades de diseño para agentes de IA.