# Retícula bento

También llamado: layout de caja bento, UI bento, retícula de keynote de Apple, mosaico de funciones  
Época: 2022 en adelante (diapositivas de eventos de Apple, y después toda landing SaaS en 2023)  
Página: https://designforai.dev/es/style/bento-grid

## Rasgos

- una sola retícula rectangular de mosaicos en tamaños mixtos (1x1, 2x1, 2x2) con medianiles iguales
- cada mosaico es una función autocontenida: un titular, un visual, una cifra
- radio uniforme (16-24px) y hueco uniforme (12-16px) mantienen el desorden bajo control
- los mosaicos alternan entre oscuro, claro y un único relleno de acento
- el contenido dentro de los mosaicos es grande y escaso: un número, un icono, un recorte de captura
- la retícula es el hero; rara vez hay una imagen hero aparte
- el hover eleva o escala ligeramente un mosaico; nada más se mueve

Paleta: #0b0b0f página (variante oscura) o #f5f5f7 (clara), #1c1c22 mosaico, #ffffff mosaico claro, #3b82f6 mosaico de acento, #a1a1aa texto apagado, #fafafa texto

Tipografía: Geist o Manrope; títulos de mosaico 600 a 20-24px, cifras grandes 700 a 48-72px con -0.03em, pies 400 a 14px

## Haz

- diseña la retícula a 4 o 6 columnas en escritorio y colápsala a 1-2 en móvil; mantén un orden de mosaicos con sentido
- dale a cada mosaico exactamente un mensaje; si necesita dos, divídelo
- usa el mismo radio, hueco y padding en todos los mosaicos sin excepción

## Evita

- no pongas mosaicos solo de texto por todas partes; al menos un tercio necesita un visual
- no varíes medianiles ni radios entre mosaicos
- no apiles dos retículas bento seguidas; una por sección de página

Conocido por: Páginas de producto de Apple, página de funciones de Linear, Vercel, navegador Arc

## Semilla CSS

```css
:root{--bg:#0b0b0f; --fg:#fafafa; --muted:#a1a1aa; --tile:#1c1c22; --accent:#3b82f6; --radius:20px; --gap:14px; --font:'Geist',sans-serif}
```

## Prompt

Construye la página de inicio como una retícula bento. Fondo de página #0b0b0f, texto #fafafa, apagado #a1a1aa. Retícula: CSS grid con 6 columnas y gap 14px a 1200px, mosaicos que ocupan celdas 2x1, 2x2, 3x1 y 1x1, colapsando a 2 columnas a 768px y a 1 columna a 480px. Cada mosaico: background #1c1c22, borde 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Haz un mosaico #3b82f6 con texto blanco y otro blanco puro con texto #0b0b0f para contrastar. Contenido del mosaico: un título de 20px 600, una línea de pie a 14px, y o bien una cifra de 64px 700 (-0.03em) o bien una captura/ilustración recortada anclada abajo a la derecha y recortada por el radio del mosaico. Fuente Geist en todo. Hover: translateY(-2px) y el borde se aclara a rgba(255,255,255,0.14), 180ms ease-out. Ninguna otra sección puede reutilizar la retícula; debajo usa secciones de texto plano.