--- title: "Abstände und Raster im Interface: Weißraum, 8-Punkt-System und Layout-Grids einfach erklärt" url: "https://insideuxdesign.com/de/blog/abstaende-und-raster-im-interface-weissraum-8-punkt-system-und-layout-grids-einfach-erklaert" language: "de" description: "Weißraum, Abstände und Raster im Interface verstehen. Lerne das 8-Punkt-System und Layout-Grids mit Beispielen kennen und gestalte ruhigere Screens." published: "2025-08-20T09:00:00+02:00" updated: "2026-10-15T00:38:57+02:00" --- # Abstände und Raster im Interface: Weißraum, 8-Punkt-System und Layout-Grids einfach erklärt Warum Abstände über Ordnung und Lesbarkeit entscheiden: Weißraum, das 8-Punkt-System und Layout-Grids einfach erklärt, mit Vorher-nachher-Beispielen und einer Anleitung für Figma. Stell dir vor, du baust deine erste Landingpage, zum Beispiel für ein kleines Yogastudio. Farben, Schriften und Fotos stehen, alles sieht für sich genommen ordentlich aus. Trotzdem wirkt die Seite unruhig. Die Überschrift klebt am Bild, die Kursbeschreibungen stehen mal eng, mal weit auseinander, und der Button scheint irgendwo im Leeren zu schweben. Als jemand aus der Entwicklung nachfragt, welche Abstände gelten sollen, öffnest du die Datei und findest 13, 17, 22 und 30 Pixel, verteilt ohne erkennbares System. Genau hier setzen Abstände und Raster an. Sie sind das unsichtbare Gerüst eines Interfaces. Niemand lobt eine Website für ihre Abstände, aber fast alle merken sofort, wenn sie nicht stimmen. Die gute Nachricht: Für ordentliche Abstände brauchst du kein besonderes Talent, sondern ein paar einfache Regeln. In diesem Artikel lernst du drei Werkzeuge kennen, die zusammengehören: Weißraum als bewusst eingesetzte Fläche, das 8-Punkt-System als feste Skala für Abstände und Größen und Layout-Grids als Spaltenraster für die Anordnung auf der Seite. Am Ende siehst du, wie du das in Figma umsetzt und wie es im Code ankommt. Vorwissen brauchst du keines. ## Weißraum: Leere Fläche mit Aufgabe Weißraum (englisch whitespace oder negative space) ist jede Fläche zwischen und um Elemente herum, auf der nichts steht. Der Name täuscht ein wenig: Weißraum muss nicht weiß sein. Auch der dunkle Hintergrund einer App im Dark Mode oder eine farbige Fläche zählt dazu, solange dort kein Inhalt sitzt. Einsteigende sehen Weißraum oft als verschenkten Platz, den man noch füllen könnte. In Wahrheit erledigt er wichtige Aufgaben. Er trennt Inhalte voneinander, zeigt, was zusammengehört, lenkt den Blick auf das Wichtige und gibt Texten Luft zum Lesen. Ein Interface ohne Weißraum ist wie ein Text ohne Absätze: Alle Informationen sind da, aber niemand findet sich zurecht. ### Mikro- und Makro-Weißraum Es hilft, zwei Arten von Weißraum zu unterscheiden. **Mikro-Weißraum** ist der kleine Abstand innerhalb von Elementen: zwischen Icon und Beschriftung in einem Button, zwischen Label und Eingabefeld, zwischen den Zeilen einer Liste. **Makro-Weißraum** ist der große Abstand zwischen ganzen Bereichen: zwischen Kopfbereich und Inhalt, zwischen zwei Abschnitten einer Landingpage, am Rand der Seite. Beide brauchen unterschiedliche Größenordnungen. Mikro-Abstände liegen typischerweise zwischen 4 und 16 Pixeln, Makro-Abstände oft bei 48 Pixeln und mehr. Wenn beide Arten etwa gleich groß sind, verschwimmen die Grenzen: Man erkennt nicht mehr, wo ein Abschnitt endet und der nächste beginnt. ### Nähe zeigt Zusammengehörigkeit Warum Abstände so viel ausmachen, erklärt eines der [Gestaltgesetze](https://insideuxdesign.com/de/glossar/gestaltgesetze), das Gesetz der Nähe. Es besagt, dass Menschen Elemente, die nahe beieinander liegen, als zusammengehörig wahrnehmen. Das passiert automatisch, noch bevor jemand den Text liest. Für dich als gestaltende Person folgt daraus eine einfache Faustregel: **Der Abstand innerhalb einer Gruppe ist kleiner als der Abstand zur nächsten Gruppe.** Klingt banal, wird aber ständig verletzt. Ein typisches Beispiel aus Formularen: > **Vorher:** Das Label „E-Mail-Adresse“ steht 16 Pixel über seinem Eingabefeld. Das nächste Label „Passwort“ steht ebenfalls 16 Pixel unter dem E-Mail-Feld. Auf den ersten Blick ist unklar, ob „Passwort“ zum Feld darüber oder darunter gehört. > > **Nachher:** Label und Feld haben 8 Pixel Abstand, zwischen zwei Feldgruppen liegen 24 Pixel. Jetzt bilden Label und Feld sichtbar eine Einheit, und das Formular liest sich von oben nach unten wie eine Liste. Diese Regel funktioniert auf jeder Ebene. Innerhalb einer Karte stehen Titel und Text eng zusammen, Karten untereinander haben mehr Abstand, und ganze Abschnitte der Seite haben noch mehr. So entsteht eine Abstufung, die das Auge ohne Linien oder Rahmen versteht. ## Das 8-Punkt-System Wenn Weißraum so wichtig ist, stellt sich die Frage: Wie groß sollen die Abstände denn sein? Hier hilft eine feste Skala. Statt bei jedem Element neu zu überlegen, ob 13 oder 15 Pixel besser aussehen, wählst du aus einer kleinen Menge vorher festgelegter Werte. Die bekannteste dieser Skalen ist das 8-Punkt-System. Die Idee ist schlicht: Alle Abstände und die meisten Größen im Interface sind ein Vielfaches von 8. Also 8, 16, 24, 32, 40, 48, 64 und so weiter. Ein Button ist dann zum Beispiel 48 Pixel hoch, eine Karte hat 24 Pixel Innenabstand, und zwischen zwei Abschnitten liegen 64 Pixel. ### Was mit „Punkt“ gemeint ist Der Begriff „Punkt“ kann verwirren, weil verschiedene Plattformen eigene Einheiten nutzen. Apple spricht von Points (pt), Android von density-independent pixels (dp), im Web arbeitest du mit CSS-Pixeln (px). Allen gemeinsam ist, dass sie nicht den physischen Bildpunkten des Displays entsprechen, sondern einer gedachten Einheit, die auf hochauflösenden Bildschirmen hochskaliert wird. Laut der Android-Dokumentation ist ein dp auf einem Bildschirm mit 160 dpi ungefähr ein Pixel groß. Für das 8-Punkt-System kannst du dir merken: Ein Punkt ist eine Einheit in deinem Designprogramm, und 8 davon sind ein Schritt auf der Skala. ### Warum gerade 8 Für die 8 sprechen mehrere praktische Gründe. Sie lässt sich mehrfach glatt halbieren (8, 4, 2, 1), was beim Skalieren auf verschiedene Bildschirmdichten hilft, weil keine halben Pixel entstehen. Viele gängige Bildschirmbreiten wie 360, 768, 1280 oder 1440 sind durch 8 teilbar. Und die Schritte sind groß genug, dass man den Unterschied zwischen zwei Werten tatsächlich sieht. Zwischen 13 und 15 Pixeln erkennt kaum jemand einen Unterschied, zwischen 16 und 24 schon. Ein weiterer Grund ist schlicht Verbreitung. Googles Material Design hat das System bekannt gemacht. In der ersten Fassung der Richtlinien heißt es, dass alle Komponenten an einem 8-dp-Raster ausgerichtet sind, auf Smartphone, Tablet und Desktop. Auch die aktuelle Android-Dokumentation nennt das 8-dp-Raster als Grundlage für Layout, Komponenten und Abstände. Wer im 8er-Raster arbeitet, liegt also nah an dem, was viele Teams und Bibliotheken ohnehin nutzen. Der wichtigste Grund ist aber ein anderer: weniger Entscheidungen. Wenn nur eine Handvoll Werte erlaubt ist, wird die Gestaltung automatisch einheitlicher. Und die Übergabe an die Entwicklung wird einfacher, weil alle dieselben Zahlen verwenden. ### Die 4 als halber Schritt Manchmal sind 8 Pixel zu grob, etwa für den Abstand zwischen einem kleinen Icon und seinem Text oder für Details in einer dichten Tabelle. Dafür nutzen viele Teams die 4 als halben Schritt. Material Design empfiehlt für kleinere Elemente wie Icons und Schrift ein 4-dp-Raster. Manche Teams sprechen deshalb gleich vom 4-Punkt-System. Das widerspricht sich nicht: Die Grundlage bleibt die 8, und die 4 kommt dort hinzu, wo es feiner sein muss. ### Eine Abstandsskala aufstellen In der Praxis legst du nicht jeden Vielfachen von 8 fest, sondern eine kurze Skala mit sinnvollen Abstufungen. Für den Anfang reicht so etwas: - **4:** sehr enge Abstände, etwa zwischen Icon und Text - **8:** eng zusammengehörige Elemente, etwa Label und Eingabefeld - **16:** Standard-Innenabstand, etwa in Buttons und kleinen Karten - **24:** Abstand zwischen Elementgruppen, Innenabstand größerer Karten - **32 und 48:** Abstand zwischen Blöcken innerhalb eines Abschnitts - **64 und 96:** Abstand zwischen großen Abschnitten einer Seite Fällt dir auf, dass die Abstände nach oben hin größer werden? Das ist Absicht. Bei kleinen Werten fallen schon 8 Pixel Unterschied auf, bei großen Abschnitten erst 16 oder 32. Eine Skala, die nach oben weiter auseinanderläuft, bildet das ab. Zurück zum Yogastudio: Mit dieser Skala sieht die Startseite so aus. > **Vorher:** Überschrift 13 Pixel unter dem Bild, Kursbeschreibungen mit 17 und 22 Pixeln Abstand, der Button 30 Pixel unter dem Text, zwischen den Abschnitten mal 40, mal 55 Pixel. > > **Nachher:** Überschrift 24 Pixel unter dem Bild, jede Kurskarte mit 24 Pixeln Innenabstand und 24 Pixeln Abstand zur nächsten Karte, Titel und Text in der Karte 8 Pixel auseinander, der Button 32 Pixel unter dem Text, zwischen den Abschnitten einheitlich 96 Pixel. Die Inhalte sind dieselben, aber die Seite wirkt plötzlich ruhig und aufgeräumt. Und die Entwicklung hat eine klare Antwort auf die Frage nach den Abständen. ### Innenabstand, Außenabstand und Lücke Drei Begriffe begegnen dir beim Arbeiten mit Abständen ständig. Der **Innenabstand** (englisch padding) ist der Raum zwischen dem Rand eines Elements und seinem Inhalt, etwa zwischen dem Rahmen eines Buttons und seiner Beschriftung. Der **Außenabstand** (margin) ist der Raum um ein Element herum, der es von anderen trennt. Die **Lücke** (gap) ist der Abstand zwischen mehreren Elementen in einer Reihe oder einem Raster. Für alle drei gilt dieselbe Skala. Achte bei Buttons und Karten darauf, dass der Innenabstand zur Größe passt. Ein großer Button mit 4 Pixeln Innenabstand wirkt gequetscht, eine kleine Karte mit 48 Pixeln Innenabstand wirkt leer. ## Layout-Grids: Spalten für Ordnung auf der Seite Das 8-Punkt-System regelt die Größe von Abständen. Ein Layout-Grid regelt, wo Elemente auf der Seite stehen. Es teilt die verfügbare Breite in gleich breite Spalten auf, an denen du Inhalte ausrichtest. Das Prinzip stammt aus dem Zeitungs- und Buchdruck und hat sich im digitalen Design gehalten, weil es dasselbe Problem löst: viele unterschiedliche Inhalte so anzuordnen, dass sie zusammen ein ruhiges Bild ergeben. ### Spalten, Gutter und Ränder Ein Layout-Grid besteht aus drei Teilen. Die **Spalten** (columns) sind die Flächen, in denen Inhalte stehen. Die **Gutter** (auf Deutsch auch Spaltenabstand oder Zwischenraum) sind die festen Lücken zwischen den Spalten. Die **Ränder** (margins) sind die Abstände zwischen dem äußersten Spaltenrand und dem Rand des Bildschirms. Ein Element kann sich über eine oder mehrere Spalten erstrecken, inklusive der Gutter dazwischen. Ein Textblock nimmt zum Beispiel acht Spalten ein, eine Seitenleiste daneben vier. Wichtig: Inhalte beginnen und enden an Spaltenkanten, nicht mitten im Gutter. So entstehen gemeinsame Kanten über die ganze Seite, und genau die erzeugen den Eindruck von Ordnung. Auch Gutter und Ränder folgen dem 8-Punkt-System. Material Design nannte in seinen Richtlinien Werte von 8, 16, 24 oder 40 dp für Ränder und Gutter und stellte klar, dass beide nicht gleich groß sein müssen. Ein Layout mit 40 Pixeln Rand und 24 Pixeln Gutter ist also völlig in Ordnung. ### Warum oft 12 Spalten Am Desktop wirst du sehr häufig 12 Spalten begegnen. Das hat einen mathematischen Grund: 12 lässt sich durch 2, 3, 4 und 6 teilen. Damit kannst du dieselbe Seite in zwei Hälften, drei Drittel, vier Viertel oder sechs Sechstel aufteilen, ohne dass eine Spalte übrig bleibt. Ein Raster mit 10 Spalten kann dagegen keine Drittel. Auch das verbreitete CSS-Framework Bootstrap arbeitet laut eigener Dokumentation mit 12 Spalten und einem Standard-Gutter von 1,5rem. Das entspricht bei der üblichen Grundschriftgröße von 16 Pixeln genau 24 Pixeln, also wieder einem Wert aus dem 8er-System. ### Weniger Spalten auf kleinen Bildschirmen Auf einem Smartphone sind 12 Spalten zu schmal, um sinnvoll damit zu arbeiten. Deshalb passt sich die Spaltenzahl an die Bildschirmbreite an. Material Design sah in seinen ersten Richtlinien zum Beispiel 4 Spalten für schmale Smartphones vor, 8 Spalten für kleine Tablets und 12 Spalten für größere Bildschirme, mit Guttern von 16 dp auf kleinen und 24 dp auf großen Geräten. Für den Einstieg reicht diese Faustregel: 4 Spalten auf dem Smartphone, 8 auf dem Tablet, 12 am Desktop. Weil 4 und 8 sich glatt in 12 einfügen, lassen sich Layouts gut von einer Größe auf die andere übertragen. Ein Element, das am Desktop drei von zwölf Spalten einnimmt (ein Viertel), nimmt auf dem Smartphone eben eine von vier Spalten oder die volle Breite ein. ### Raster als Hilfe, nicht als Käfig Ein Layout-Grid ist ein Werkzeug, kein Gesetz. Ein Hintergrundbild darf über die volle Breite laufen, ein Zitat darf bewusst aus dem Raster herausragen, um aufzufallen. Solche Ausnahmen wirken aber nur, wenn der Rest der Seite sauber im Raster steht. Breche das Raster also gezielt und selten, nicht aus Versehen. Neben Spaltenrastern gibt es noch das **Grundlinienraster** (baseline grid), ein Raster aus waagerechten Linien, auf denen die Textzeilen sitzen. Es sorgt dafür, dass Text in benachbarten Spalten auf gleicher Höhe steht. Für Einsteigende ist es aber kein Muss. Wenn deine Zeilenhöhen und Abstände der 4er- oder 8er-Skala folgen, bist du schon nah dran. ## Schritt für Schritt: Abstände und Raster in Figma Die meisten Teams gestalten heute in [Figma](https://insideuxdesign.com/de/ressourcen/figma). Dort lassen sich alle drei Werkzeuge direkt umsetzen. Am Beispiel der Yoga-Startseite sieht das so aus. ### 1. Raster auf den Frame legen Lege einen Frame in Desktop-Breite an, etwa 1440 Pixel. In der rechten Seitenleiste fügst du einen sogenannten Layout Guide hinzu. Figma hat die Funktion im Mai 2025 von „Layout grid“ in „Layout guide“ umbenannt, in vielen Anleitungen findest du noch den alten Namen. Wähle den Typ „Columns“, stelle die Anzahl auf 12 und den Typ auf „Stretch“. Dann trägst du Rand (Margin) und Gutter ein, zum Beispiel 80 und 24 Pixel. Mit der Tastenkombination Umschalt und G blendest du alle Raster ein und aus. Für die Smartphone-Ansicht legst du einen zweiten Frame mit 360 oder 390 Pixeln Breite an, dort mit 4 Spalten, 16 Pixeln Rand und 16 Pixeln Gutter. ### 2. Verschiebeschritte anpassen Figma verschiebt ein Element mit den Pfeiltasten standardmäßig um 1 Punkt und mit gedrückter Umschalttaste um 10 Punkte. Die 10 passt nicht zum 8er-System. Unter Einstellungen (Preferences) und „Nudge amount“ kannst du den großen Schritt auf 8 setzen. Danach landest du mit Umschalt und Pfeiltaste automatisch auf Werten der Skala. ### 3. Abstände mit Auto Layout festlegen Auto Layout ist die Figma-Funktion, mit der ein Frame seine Inhalte automatisch untereinander oder nebeneinander anordnet. Dort trägst du Innenabstand und Lücke als Zahl ein, und Figma hält sie ein, auch wenn sich der Inhalt ändert. Für die Kurskarte heißt das: Innenabstand 24, Lücke zwischen Titel und Text 8, Lücke zum Button 24. Ändert sich später der Text, bleiben die Abstände trotzdem gleich. Seit 2025 gibt es in Auto Layout außerdem eine Grid-Anordnung, mit der sich Inhalte in Zeilen und Spalten anordnen lassen, etwa für eine Kachelübersicht der Kurse. Für den Anfang reichen aber die einfache horizontale und vertikale Anordnung. ### 4. Die Skala für alle sichtbar machen Damit nicht jede Person im Team eigene Werte erfindet, lohnt es sich, die Abstandsskala festzuhalten. Das kann eine einfache Seite in der Figma-Datei sein, auf der jeder Wert mit einem Beispiel steht. Wer später ein [Design System](https://insideuxdesign.com/de/glossar/design-system) aufbaut, macht aus dieser Skala benannte Werte, die Design und Code gemeinsam nutzen. Wie das in kleinen Teams gelingt, beschreibt der Artikel [Design Systems für kleine Teams](https://insideuxdesign.com/de/blog/design-systems-fuer-kleine-teams). ## Abstände und Barrierefreiheit Abstände sind nicht nur eine Frage der Ästhetik. Sie entscheiden auch darüber, ob Menschen ein Interface sicher bedienen können. Besonders wichtig ist das bei klickbaren Elementen, die nah beieinander liegen, etwa Links in einer Fußzeile oder Symbole in einer Werkzeugleiste. Die Web Content Accessibility Guidelines (WCAG) 2.2, der internationale Standard für barrierefreie Websites, verlangen im Erfolgskriterium 2.5.8 auf Stufe AA, dass Zielflächen für Klicks oder Tipps mindestens 24 mal 24 CSS-Pixel groß sind. Kleinere Ziele sind erlaubt, wenn genug Abstand um sie herum besteht: Ein gedachter Kreis mit 24 Pixeln Durchmesser um die Mitte jedes Ziels darf kein anderes Ziel und keinen anderen solchen Kreis berühren. Abstand kann also fehlende Größe ausgleichen. Plattformrichtlinien gehen oft weiter. Material Design empfahl schon in seinen ersten Richtlinien Touch-Ziele von mindestens 48 mal 48 dp, wieder ein Vielfaches von 8. Warum größere und gut erreichbare Ziele schneller zu treffen sind, erklärt [Fitts’ Law](https://insideuxdesign.com/de/glossar/fitts-law) im Glossar. ## Vom Design in den Code Im Code findest du die Begriffe aus diesem Artikel fast eins zu eins wieder. In CSS gibt es die Eigenschaften `padding` für den Innenabstand, `margin` für den Außenabstand und `gap` für Lücken zwischen Elementen in Flexbox- und Grid-Layouts. Mit CSS Grid lassen sich Spaltenraster direkt umsetzen, etwa mit `grid-template-columns: repeat(12, 1fr)` für zwölf gleich breite Spalten. Viele Teams legen die Abstandsskala als CSS-Variablen an, zum Beispiel `--space-2: 8px` oder `--space-6: 24px`. Wenn Design und Entwicklung dieselbe Skala nutzen, entfallen Rückfragen wie „Sind das hier 22 oder 24 Pixel?“ fast vollständig. Am einfachsten klappt das, wenn ihr die Skala vor dem ersten Screen gemeinsam festlegt, statt sie nachträglich aus fertigen Entwürfen herauszumessen. ## Typische Fehler am Anfang Ein paar Muster tauchen bei Einsteigenden besonders häufig auf. Wenn du sie kennst, erkennst du sie in deinen eigenen Entwürfen schneller. ### Alles gleich weit auseinander Wer überall 16 Pixel Abstand setzt, hat zwar ein System, aber keine Gruppen. Label, Feld, nächstes Label und nächster Abschnitt stehen gleich weit auseinander, und nichts gehört sichtbar zusammen. Nutze bewusst mehrere Stufen der Skala, damit das Gesetz der Nähe greifen kann. ### Angst vor Leere Der Reflex, jede freie Fläche mit einem weiteren Element zu füllen, ist verständlich, aber selten hilfreich. Ein Hero-Bereich mit Überschrift, einem Satz und einem Button wirkt mit großzügigem Weißraum klarer als mit zusätzlichen Siegeln, Icons und Aufzählungen. Wenn ein Bereich leer wirkt, ist die Lösung oft ein besserer Abstand, kein weiteres Element. ### Nur nach Zahlen ausrichten Zahlen sind ein guter Startpunkt, aber das Auge entscheidet. Ein rundes Icon wirkt neben einem eckigen Text oft etwas zu klein, ein Button mit gleichem Innenabstand oben und unten wirkt manchmal leicht nach unten verschoben, weil Großbuchstaben keine Unterlängen haben. Hier darfst du einen halben Schritt aus der 4er-Skala nehmen. Das System ist dafür da, dir Entscheidungen abzunehmen, nicht dafür, dein Auge zu ersetzen. ### Raster nur am Desktop Ein sauberes 12-Spalten-Raster am Desktop hilft wenig, wenn die Smartphone-Ansicht ohne Raster entsteht. Lege für jede Bildschirmgröße, die du gestaltest, ein eigenes Raster an und prüfe, wie sich Elemente von einer Größe zur nächsten verhalten. ## Fazit Abstände und Raster gehören zu den Grundlagen, die am wenigsten auffallen und am meisten bewirken. Weißraum gliedert Inhalte und zeigt, was zusammengehört. Das 8-Punkt-System gibt dir eine kleine Menge erlaubter Werte, sodass Entwürfe einheitlich werden und die Übergabe an die Entwicklung leichter fällt. Layout-Grids sorgen für gemeinsame Kanten und damit für Ruhe auf der Seite. Du musst nicht alles auf einmal einführen. Ein guter Anfang ist eine Abstandsskala mit sechs bis acht Werten und die Regel, dass Abstände innerhalb einer Gruppe kleiner sind als zwischen Gruppen. Das Raster kommt dazu, sobald du ganze Seiten gestaltest. Schon nach dem ersten Projekt mit klarer Skala wirst du merken, wie viel schneller du Entscheidungen triffst. ## Checkliste - Abstandsskala auf Basis von 8 festlegen, mit 4 als halbem Schritt für feine Details. - Abstände innerhalb einer Gruppe kleiner wählen als zwischen Gruppen. - Mikro- und Makro-Weißraum deutlich unterscheiden. - Innenabstände von Buttons und Karten passend zur Größe wählen. - Layout-Grid pro Bildschirmgröße anlegen, etwa 4, 8 und 12 Spalten. - Inhalte an Spaltenkanten ausrichten, nicht im Gutter enden lassen. - In Figma den großen Verschiebeschritt auf 8 setzen und Abstände über Auto Layout festlegen. - Klickziele mindestens 24 mal 24 Pixel groß machen oder mit genug Abstand versehen. - Skala dokumentieren und mit der Entwicklung als gemeinsame Werte teilen. ## Quellen - [Material Design (Version 1): Metrics & keylines](https://m1.material.io/layout/metrics-keylines.html) - [Material Design (Version 1): Responsive UI](https://m1.material.io/layout/responsive-ui.html) - [Android Developers: Grids and units](https://developer.android.com/design/ui/mobile/guides/layout-and-content/grids-and-units) - [Laws of UX: Law of Proximity](https://lawsofux.com/law-of-proximity/) - [Figma Help Center: Create layout guides](https://help.figma.com/hc/en-us/articles/360040450513) - [Figma Help Center: Use the grid auto layout flow](https://help.figma.com/hc/articles/31289469907863) - [Figma Help Center: Set small and big nudge values](https://help.figma.com/hc/en-us/articles/4404575206295) - [Bootstrap: Grid system](https://getbootstrap.com/docs/5.1/layout/grid/) - [W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) - [MDN Web Docs: gap (CSS)](https://developer.mozilla.org/de/docs/Web/CSS/gap)