Bento-Grid-UI

Was macht Bento-Grid-UI?

Eine Seite ist am einfachsten zu scannen, wenn jede Idee in ihrem eigenen Fach sitzt und die Fächer in einem dichten, regelmäßigen Raster angeordnet sind.

Ein rechteckiges Raster aus abgerundeten Zellen mit gemischten Spannweiten, jede enthält eine Idee, mit gleichmäßigen kleinen Lücken dazwischen. Apples Feature-Seiten haben es ab 2022 zum Standard-Produktlayout gemacht.

Zeitraum: 2022–heute · Ära: Zeitgenössisch & Räumlich · Bereich: Grafik- & UI-Design · Auch genannt: Bento-Layout, Bento-Box-Raster, Modulares Kartenraster

Wann dieser Skill geladen werden soll

Lade ihn, wenn der Benutzer fragt nach: „Bento“, „Bento-Raster“, „Bento-Box-Layout“, „Kartenraster“, „Feature-Raster“, „modulare Karten“, „Apple-ähnliche Features“, „Kachel-Layout“, „Dashboard-Kacheln“.

Geeignet für: Produkt-Feature-Seiten, SaaS-Landingpages, persönliche Portfolios, App-Dashboards, Versionshinweise-Seiten.

Nicht verwenden, wenn:

• Der Inhalt aus längerem Fließtext besteht, da Zellen mit maximal 30 Wörtern ein Argument fragmentieren.
• Die Elemente eine strenge Reihenfolge oder Rangfolge haben, der ein Leser von oben nach unten folgen muss.
• Der Inhalt ungleichmäßig oder spärlich ist, da ein Raster mit weniger als 5 Zellen sichtbare Löcher hinterlässt.

Systemanweisungen

Beim Erstellen von UI- oder Grafiklayouts im Bento-Grid-UI-Stil MUSST du:

1. Die Seite in ein 4-Spalten- oder 12-Spalten-Raster unterteilen und jede Zelle 1, 2 oder 3 Spalten und 1 oder 2 Reihen überspannen lassen.
2. Ein einheitliches Gap von 12px bis 16px zwischen allen Zellen beibehalten und niemals Gap-Größen mischen.
3. Jeder Zelle einen Radius von 20px bis 28px geben und auf allen Zellen einer Seite denselben Radius verwenden.
4. Eine Nachricht pro Zelle platzieren: eine Überschrift von maximal 8 Wörtern, ein Bild oder eine Zahl.
5. Die Feature-Zelle auf 2 mal 2 setzen und die anderen Zellen auf 1 mal 1 oder 2 mal 1 füllen, sodass die Größen die Reihenfolge der Wichtigkeit angeben.
6. Zellen mit 2 bis 4 Abstufungen einer Familie füllen, plus einer oder zwei Zellen in der Akzentfarbe.
7. Zellinhalte auf denselben Innenabstand von 24px ausrichten und Text oben links oder unten links verankern.

Leitplanken

Jede der folgenden Zeilen bricht den Stil. Überprüfe deine Ausgabe anhand der Liste, bevor du sie zurückgibst.

• NIEMALS: Unterschiedliche Gap-Größen zwischen Zellen in einem Raster.
• NIEMALS: Leere Löcher im Raster, die das Rechteck brechen.
• NIEMALS: Zellen mit unterschiedlichen Eckenradien auf einer Seite.
• NIEMALS: Mehrere Nachrichten oder Handlungsaufrufe in einer Zelle.
• NIEMALS: Mehr als 8 Zellen im ersten Viewport.
• NIEMALS: Starke Ränder oder harte Schatten, die mit der Kachelung kämpfen.
• NIEMALS: Absätze von mehr als 30 Wörtern innerhalb einer Zelle.

Vektorprofil

Achse	Punktzahl	1 bedeutet	5 bedeutet
Ornamentierung	■■□□□ 2/5	puristisch minimal	maximalistisch
Dimensionalität	■■□□□ 2/5	strikt 2D	voll 3D / räumlich
Rasterstarrheit	■■■■■ 5/5	chaotisch / organisch	streng mathematisches Raster
Skeuomorpher Realismus	■■□□□ 2/5	abstrakt digital	fotorealistisches Material
Typografische Ausdruckskraft	■■■□□ 3/5	neutral / unsichtbar	experimentell / illustrativ

Halte diese Werte. Wenn eine Anfrage eine Achse um 2 Punkte oder mehr verschiebt, hast du den Stil verlassen: Gehe zu „Abstammungsalternativen".

Räumliche & Rasterlogik

• Rastermechanik: Ein 4-Spalten-Raster auf Desktop mit 16px Lücken und Reihen von 200px bis 280px; Zellen überspannen 1 bis 3 Spalten und 1 bis 2 Reihen, und das Raster schrumpft auf 1 oder 2 Spalten unter 768px.
• Weißraumverhältnis: Lücken nehmen 5–8% der Fläche ein; offener Raum bewegt sich in die Zellen, wo der Abstand 24px bis 32px beträgt; die Abstandsskala ist 8, 12, 16, 24, 32 und 64px.
• Ausrichtungsregeln: Zellkanten richten sich auf beiden Achsen am Raster aus; Text innerhalb einer Zelle ist linksbündig und oben oder unten verankert; der gesamte Bento-Block ist in einem Container von 1120px bis 1280px zentriert.
• Behältergeometrie: Zellen sind abgerundete Rechtecke mit einem Radius von 24px und ohne Außenabstand; die Seitenverhältnisse der Zellen sind 1:1, 2:1 und 1:2, und die visuellen Inhalte sind auf denselben Radius beschnitten.

Typografie

• Klassifikationen: Neo-Groteske Sans · Geometrische Sans
• Laufweite: Display-Größen nehmen -0,03em; Fließtext bleibt bei 0; kleine Bildunterschriften nehmen +0,01em.
• Zeilenabstand: Display 1,05 bis 1,15; Fließtext 1,45; Bildunterschriften 1,3.
• Hierarchieregeln:
  • Setze die Feature-Zellen-Überschrift auf 40px bis 56px, andere Überschriften auf 20px bis 28px und Bildunterschriften auf 14px.
  • Verwende Gewicht 600 für Überschriften und 400 für Bildunterschriften; verwende eine zurückhaltende Farbe mit 4,5:1 für sekundäre Zeilen.
  • Begrenze eine Überschrift auf 8 Wörter und eine Bildunterschrift auf 20 Wörter, da die Zelle wenig Platz hat.
  • Paare eine große Zahl bei 64px oder mehr mit einer 14px Bildunterschrift für jede wichtige Kennzahl.

Schriftkombinationen

Display	Fließtext	Hinweis
Inter Tight	Inter	Schmale Display-Größen für kurze Zellenüberschriften.
Geist	Geist	Eine einzelne Familie in den Gewichten 400, 500 und 600.
Plus Jakarta Sans	Inter	Ein wärmeres Display für Konsumgüter.

Farbe & Beleuchtung

• Palettenstruktur: Eine neutrale Seite, Zellen in zwei bis vier Abstufungen einer Familie mit geringer Sättigung und ein oder zwei Akzentzellen, die etwa 15% des Rasters abdecken.
• Kontrastregeln: Tinte auf Zelle ergibt etwa 17:1 und Graphit auf Zelle ergibt etwa 5:1; weißer Text auf Akzentblau ergibt etwa 4,7:1, was WCAG AA für Fließtext besteht; halte jedes Zellenpaar bei 4,5:1 oder besser.
• Oberflächenbehandlung: Flache oder fast flache Füllungen; Zellen können ein Foto, ein Produkt-Render oder einen Verlauf aus zwei nahen Abstufungen enthalten, und eine Zelle mischt nie mehr als einen Oberflächentyp.
• Licht und Schatten: Meistens keine; ein optionaler Schatten 0 1px 2px rgba(0, 0, 0, 0.06) oder ein 1px Rand von rgba(0, 0, 0, 0.06) trennt weiße Zellen von der Seite.

Palette

Name	Hex	Rolle
Seite	#F5F5F7	Seitenhintergrund
Zelle	#FFFFFF	Standard-Zellenfüllung
Zellenabstufung	#E8E8ED	Sekundäre Zellenfüllung
Tinte	#1D1D1F	Text
Graphit	#6E6E73	Sekundärer Text
Akzentblau	#0071E3	Akzentzelle und Links
Nacht	#000000	Dunkle Zellenfüllung

Materialität & Textur

• Oberflächennachahmung: Keine; die Zellen lesen sich wie Fächer einer lackierten Brotdose, aber die Oberfläche ist flache Farbe oder Bildmaterial und imitiert kein Material.
• Randregeln: Standardmäßig kein Rand; ein 1px durchgehender Rand rgba(0, 0, 0, 0.06) erscheint, wo eine weiße Zelle auf einer weißen Seite sitzt; der Dunkelmodus verwendet 1px rgba(255, 255, 255, 0.1).
• Unschärfe und Erhebung: Unschärfe ist standardmäßig 0px; Erhebung ist auf einen Schatten 0 1px 2px auf der Seite und einen Schatten 0 12px 32px rgba(0, 0, 0, 0.12) beim Hover begrenzt.

Ornamentierung & Ikonografie

• Ikonografie: Einfache Symbole mit einem Strich von 1,5px bis 2px und runden Endkappen bei 24px bis 32px, in Tinte oder in Weiß auf Akzentzellen; höchstens ein Symbol pro Zelle.
• Illustration: Produkt-Renderings, UI-Screenshots und große Zahlen, auf den Zellenradius zugeschnitten; abstrakte Verläufe füllen leere Zellen.
• Dekorative Elemente: Feature-Zelle auf 2 mal 2 · übergroße Metrikzahlen · UI-Screenshot-Ausschnitte · Pill-Tags · Verlaufszellen

Bewegung & Interaktivität

• Für den Bildschirm geboren: ja
• Übergangsphysik: Zellen treten in einem Staffelzug von 40ms bis 60ms ein, verblassen ein und heben sich 12px; beim Hover skaliert eine Zelle auf 1,02 und ihr Schatten vertieft sich; Nachbarn bewegen sich nicht.
• Easing: cubic-bezier(0.25, 0.1, 0.25, 1)
• Dauer (ms): 350
• Hover und aktiv: Hover skaliert die Zelle auf 1,02 und fügt einen Schatten 0 12px 32px rgba(0, 0, 0, 0.12) hinzu; aktiv skaliert auf 0,98; Fokus fügt einen 2px Akzentblau-Ring mit 2px Versatz hinzu.

Code & Token-Grundlagen

Setze data-style="bento-grid-ui" auf das Wurzelelement und füge die Tokens ein. Die Datei tokens.css enthält dieselben Tokens und eine Reihe von Referenzregeln.

[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;
}

Tailwind-Muster:

Element	Klassen
Seite	bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8
Raster	mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]
Karte	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)]
Feature-Karte	rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2
Überschrift	font-semibold text-2xl leading-[1.1] tracking-[-0.03em]

Visuelles Paket

Die Bilder und Symbole dieses Stils sind Dateien. Verwende sie so, wie sie sind, oder lies sie als Spezifikation und zeichne deine eigenen in derselben Sprache.

Datei	Inhalt
pack/hero.svg	Heldenplatte, 800 mal 600. Ein abstraktes Bild in der visuellen Sprache des Stils.
pack/pattern.svg	Musterkachel, 80 mal 80. Wiederholt sich in beide Richtungen.
pack/icons.svg	Symbol-Sprite: Home, Suche, Herz, Stern, Glocke, Benutzer, Mail, Kalender, Bild, Blitz, Play, Check, Schließen, Schieberegler.

• Symbole: Umriss, Strichstärke 1,75 auf einem 24px-Feld, runde Endkappen, runde Verbindungen, Behälter: abgerundet. Verwendung: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Ein Symbol verwendet currentColor.
• Symbolfamilie: Der Sprite stammt aus Lucide (Regular) von den Lucide Contributors, Lizenz ISC. Grund: Ein einfacher runder Linienstrich mit einem Gewicht: ruhig in einer Zelle, der Standard aktueller Produktschnittstellen. Es ist ein Open-Source-Ersatz für eine Demo. Für ein Produkt verwende die Symbolbibliothek der Marke und wähle die Familie nach den folgenden Regeln.
• Schriftart Display: Gewicht 600, Laufweite -0,03em, Zeilenabstand 1,05, Groß-/Kleinschreibung: keine.
• Gewichte: Display 600, Untertitel 500, Fließtext 400, Fett im Text 600, Labels und Buttons 500. Der Stil verwendet 3 Gewichte (400, 500, 600) und keine anderen. Das Display ist 200 schwerer als der Fließtext. Der Akzent ist Größe: Ein größeres Wort ist der Akzent, daher bleiben die Gewichte gering.
• Schriftart Fließtext: 16px, Zeilenabstand 1,5.
• Seite: Held gestapelt, linksbündig, kompakte Dichte, Akzentneigung 0°.
• Textfarbe: --color-text ist nur für das Hauptlesefeld. Auf jedem Feld verwende sein Token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

So wählst du ein Symbolpaket aus

Ein Symbolpaket ist eine Schriftart für Bilder. Wähle es mit derselben Sorgfalt wie die Textschriftart. Diese Regeln gelten sowohl für einen Open-Source-Satz als auch für eine lizenzierte Bibliothek.

1. Der Strich entspricht dem Stamm. Setze ein Symbol neben den Fließtext in Textgröße. Die Linie des Symbols und der Stamm eines Buchstabens haben dasselbe Gewicht.
2. Enden und Ecken folgen dem Radius-Token. Stumpfe Endkappen und Gehrungsverbindungen passen zu einem Radius von Null. Runde Endkappen und runde Verbindungen passen zu einem weichen Radius.
3. Der Füllmodus folgt der Technologie der Ära. Druck-Ären schneiden massive Formen. Bildschirm-Ären mit Tiefe füllen und schattieren die Form. Aktuelle Produktschnittstellen zeichnen einen Umriss.
4. Die Metaphern sind nicht jünger als der Stil. Jedes Bild ist ein Objekt, das die Ära kannte. Ein Symbol mit einer späteren Metapher bricht den Zeitraum.
5. Eine Familie, ein Raster. Alle Symbole stammen aus einer Familie und einer Variante, gezeichnet auf einem Feld. Mische keine Familien auf einer Oberfläche.
6. Die Familie deckt das Produkt ab. List jedes Konzept auf, das das Produkt benötigt, bevor du dich festlegst. Eine Familie, die kein Symbol für eines davon hat, ist die falsche Familie.
7. Die Farbe ist ein Token. Ein Symbol verwendet currentColor. Ein zweiter Ton stammt aus einem Token, nicht aus der Datei.
8. Die Lizenz erlaubt die Nutzung. Lies die Lizenz des Satzes. Gib die Quelle an, wenn die Lizenz danach verlangt. Ein Produkt mit einer Marke verwendet seine lizenzierte Bibliothek und wendet dieselben Regeln zur Auswahl der Familie an.

Abstammungsalternativen

Wenn der Benutzer nach einer Variation fragt, improvisiere nicht. Nähere dich dem hier genannten Nachbarn an und lade seinen Skill.

• Wenn der Benutzer nach geordneter fragt: bewege dich in Richtung swiss-international (Swiss International Style). Setze den Radius auf 0px, entferne Zellenfüllungen und teile Zellen mit 1px-Regeln; behalte das 12-Spalten-Raster und die Schriftskala bei.

• Wenn der Benutzer nach glasiger fragt: bewege dich in Richtung glassmorphism (Glassmorphismus). Fülle Zellen mit rgba(255, 255, 255, 0.18) und backdrop-filter blur(20px) über einer Verlaufsseite; behalte die Lücken und den Radius bei.

• Wenn der Benutzer nach kräftiger fragt: bewege dich in Richtung neo-brutalism-ui (Neo-Brutalismus-UI). Füge einen 3px schwarzen Rand und einen Schatten 4px 4px 0 0 #000000 hinzu und fülle Zellen mit lauten flachen Farbtönen; behalte das Raster und den 16px-Abstand bei.

• Wenn der Benutzer nach flacher fragt: bewege dich in Richtung flat-design (Flaches Design). Entferne die Schatten und Ränder und verwende solide Zellenfüllungen ohne Fotografie; behalte den Radius von 24px und die Lücke bei.

• Abstammung von (gehe hier für eine orthodoxere Version hin): flat-design, swiss-international

• Mischt sich gut mit: glassmorphism, swiss-international

• Nächstgelegen per Vektorprofil: bauhaus, material-design, swiss-international

Emotionales Ziel

Geordnete Neugier: Der Betrachter hat das Gefühl, dass das Produkt organisiert, kompakt und in Sekunden leicht zu scannen ist.

Schlüsselwörter