# Bento-Grid

Auch bekannt als: Bento-Box-Layout, Bento-UI, Apple-Keynote-Raster, Feature-Grid-Kacheln  
Ära: ab 2022 (Apple-Event-Folien, dann 2023 jede SaaS-Landingpage)  
Seite: https://designforai.dev/de/style/bento-grid

## Merkmale

- ein rechteckiges Raster aus Kacheln in gemischten Größen (1x1, 2x1, 2x2) mit gleichen Gutters
- jede Kachel ist ein eigenständiges Feature: eine Headline, ein Visual, eine Kennzahl
- einheitlicher Radius (16-24px) und einheitlicher Abstand (12-16px) halten das Durcheinander zusammen
- Kacheln wechseln zwischen Dunkel, Hell und einer einzelnen Akzentfüllung
- Inhalt in den Kacheln ist groß und wenig: eine Zahl, ein Icon, ein Screenshot-Ausschnitt
- das Raster ist der Hero; ein separates Hero-Bild gibt es selten
- Hover hebt eine Kachel an oder skaliert sie leicht; sonst bewegt sich nichts

Palette: #0b0b0f Seite (dunkle Variante) oder #f5f5f7 (hell), #1c1c22 Kachel, #ffffff helle Kachel, #3b82f6 Akzentkachel, #a1a1aa gedämpfter Text, #fafafa Text

Schrift: Geist oder Manrope; Kacheltitel 600 bei 20-24px, große Kennzahlen 700 bei 48-72px mit -0.03em, Bildunterschriften 400 bei 14px

## Do

- entwirf das Raster mit 4 oder 6 Spalten auf Desktop und klappe es mobil auf 1-2 zusammen; halte die Kachelreihenfolge sinnvoll
- gib jeder Kachel genau eine Botschaft; braucht sie zwei, teile sie
- nutze auf jeder Kachel ohne Ausnahme denselben Radius, Abstand und dasselbe Padding

## Don't

- setze nicht überall reine Textkacheln; mindestens ein Drittel braucht ein Visual
- variiere Gutters oder Radien zwischen Kacheln nicht
- stapele nicht zwei Bento-Grids direkt hintereinander; eines pro Seitenabschnitt

Bekannt dafür: Apple-Produktseiten, Linear-Features-Seite, Vercel, Arc Browser

## CSS-Seed

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

## Prompt

Baue die Startseite als Bento-Grid. Seitenhintergrund #0b0b0f, Text #fafafa, gedämpft #a1a1aa. Raster: CSS Grid mit 6 Spalten und 14px gap bei 1200px, Kacheln über 2x1, 2x2, 3x1 und 1x1 Zellen, auf 2 Spalten bei 768px und 1 Spalte bei 480px zusammenklappend. Jede Kachel: background #1c1c22, border 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Mach eine Kachel #3b82f6 mit weißem Text und eine Kachel reinweiß mit #0b0b0f Text für Kontrast. Kachelinhalt: ein 20px 600 Titel, eine Zeile 14px Bildunterschrift und entweder eine 64px 700 Kennzahl (-0.03em) oder ein beschnittener Screenshot / eine Illustration, unten rechts verankert und vom Kachelradius beschnitten. Schrift Geist durchgehend. Hover: translateY(-2px) und der Rand hellt auf rgba(255,255,255,0.14) auf, 180ms ease-out. Kein anderer Abschnitt darf das Raster wiederverwenden; darunter reine Textabschnitte.