So liest du diese Demo-Seite
Jede Sektion besteht aus drei verschachtelten Ebenen: Section, Container, Content. Die gestrichelten Rahmen zeigen dir die Grenzen, die Badges sagen dir welche Ebene welche Aufgabe hat. Zwei davon sind reines Layout, nur Content hält deinen echten Inhalt.
Section — volle Breite, padding 96/48. Bestimmt Außenabstand der Sektion und die Seitenränder. Reines Layout.
Container — zentriert, kein eigenes Padding. Begrenzt nur die Breite: 1440 für Visuals und Grids, 1200 für Textsektionen. Reines Layout.
Section · volle Breite · padding 96/48
Container · maxWidth 1200 · Textsektion
Content · hier lebt der Inhalt
Papp Media · Spacing System
Konsistentes Spacing über die ganze Seite
Drei verschachtelte Stacks sorgen dafür, dass jede Sektion gleich atmet. Der äußere bestimmt den Abstand, der mittlere die Breite, der innere hält den Inhalt. Diese Hero-Sektion folgt exakt den Regeln aus der Legende oben.
Jetzt starten
Mehr erfahren
Container · maxWidth 1440 · Visuals/Grid
Content · Headline + Karten Grid
Drei Schichten, drei Aufgaben
Trenne Layout von Inhalt. So musst du Padding nur an einer Stelle pflegen und der Content-Stack bleibt frei für das Eigentliche.
Section
Volle Breite, padding 96 oben/unten und 48 an den Seiten. Sorgt für gleichmäßigen Abstand zwischen den Sektionen und schützt die Seitenränder.
Container
maxWidth 1440 und zentriert. Hat selbst kein Padding. Seine einzige Aufgabe ist, den Inhalt auf großen Screens nicht ausufern zu lassen.
Content
Hier lebt der echte Inhalt. Headline, Text, Karten, Buttons. Das gap regelt den vertikalen Rhythmus, ganz ohne manuelle Abstände.
Section · volle Breite · padding 96/48
Container · maxWidth 1200 · Textsektion
Content · zusätzlich auf 720 begrenzt für Lesbarkeit
Bereit, das System zu nutzen?
Bei reinen Text-Sektionen darf der Content zusätzlich enger sein als der Container. So bleibt die Zeilenlänge angenehm lesbar, während Außenabstand und Seitenränder identisch zu allen anderen Sektionen bleiben.
Section · padding 96/48
Container · maxWidth 1440 · Visuals/Grid
Content · Cheat Sheet
Werte zum Mitnehmen
Alle Spacing-Werte des Systems pro Breakpoint. Kopiere sie direkt in dein Projekt. Alle Zahlen folgen der Skala und der Skalierungs-Faustregel: je kleiner der Screen, desto enger der Außenabstand, der Rhythmus im Content bleibt proportional.
Phone · 0 bis 809 px
Tablet · 810 bis 1199 px
Desktop · ab 1200 px
Eigenschaft
Phone
Tablet
Desktop
Sektion oben/unten
64
80
96
Sektion seitlich
20
32
48
Container maxWidth
100%
100%
1440
Content Rhythmus (gap)
16
20
24
Headline zu Text
12
12
16
Karten Padding
20
24
28
Grid gap
16
16
20
Button Padding (v/h)
14 / 24
16 / 28
16 / 28
So baust du es
So baust du das in Framer
Drei Schritte, immer gleich. Wenn du sie einmal verstanden hast, baust du jede Sektion in unter einer Minute sauber auf.
1
Section anlegen
Erstelle einen Frame mit Breite 100% und Stack vertikal. Padding 96 oben und unten, 48 links und rechts. Diese äußere Ebene regelt den Abstand zwischen den Sektionen und schützt die Seitenränder.
Screenshot · Section-Einstellungen · Padding 96/48
2
Container rein
Lege darin einen Stack an, Breite 100%, Distribution zentriert, kein eigenes Padding. Setz die maxWidth: 1440 für Visuals und Grids, 1200 für Textsektionen. Diese Ebene begrenzt nur die Breite.
Screenshot · Container · maxWidth + zentriert
3
Content füllen
In den Container kommt dein Inhalt als Stack mit einem gap aus der Skala, zum Beispiel 24 oder 48. Das gap steuert den vertikalen Rhythmus zwischen Headline, Text und Karten, ganz ohne manuelle Abstände.
Screenshot · Content-Stack · gap aus der Skala
Die Skala
Nur diese Werte
Jeder Abstand auf der Seite kommt aus dieser Reihe. Kein 10, kein 21, nichts dazwischen. Wenn 24 nicht reicht, ist 32 der nächste Wert.
4
8
12
16
20
24
32
48
64
96
128
Spickzettel
Werte pro Gerät
Die wichtigsten Werte je Gerät. Mehr brauchst du am Anfang nicht im Kopf zu haben.
Gerät
Section o/u
Side
Head zu Body
Card innen
Handy
64
24
16
16
Tablet
80
32
20
20
Desktop
96
48
24
24
Ultra Wide
128
48
24
24
Vorlagen
Vorlagen zum Kopieren
Kopier dir die passende Sektion und füll sie mit Inhalt. Textsektion nutzt Container 1200, Visuals und Grids nutzen 1440. Padding und Gaps sind schon korrekt gesetzt.
Vorlage · Textsektion · Container 1200
Headline
Hier kommt dein Fließtext rein. Der Container ist auf maxWidth 1200 gesetzt, der Lesetext bricht bei 720 um.
Vorlage · Visuals/Grid · Container 1440
Headline
Visual oder Grid · maxWidth 1440
Pro Gerät
Spacing und Padding pro Gerät
Pro Breakpoint siehst du das Gerät und die konkreten Werte. Regel dahinter: je kleiner der Screen, desto enger der Aussenabstand, der innere Rhythmus bleibt proportional. Padding Reihenfolge ist oben, rechts, unten, links. Alle Werte folgen der 8er Logik.
Breakpoint
Phone
0 bis 809 px
Regeln
Section Padding · erste
80 / 16 / 64 / 16
Section Padding · weitere
64 / 16 / 64 / 16
Container maxWidth
Visual 1440 · Text 1200 · Lese 680
Heading zu Subtext
16
Textblock zu Content
40
Karten Gap horizontal
16
Grid Reihen Gap
32
Breakpoint
Tablet
810 bis 1199 px
Regeln
Section Padding · erste
104 / 32 / 80 / 32
Section Padding · weitere
80 / 32 / 80 / 32
Container maxWidth
Visual 1440 · Text 1200 · Lese 680
Heading zu Subtext
16
Textblock zu Content
48
Karten Gap horizontal
24
Grid Reihen Gap
40
Breakpoint
Desktop
ab 1200 px
Regeln
Section Padding · erste
128 / 48 / 96 / 48
Section Padding · weitere
96 / 48 / 96 / 48
Container maxWidth
Visual 1440 · Text 1200 · Lese 680
Heading zu Subtext
16
Textblock zu Content
64
Karten Gap horizontal
32
Grid Reihen Gap
48
Content Blöcke (zwei)
80
Lesbarkeit
Wie lang darf eine Textzeile sein
Je länger die Zeile, desto schwerer findet das Auge zurück zum Anfang der nächsten. Faustregel: Fließtext liest sich bei etwa 60 bis 75 Zeichen pro Zeile am besten. Größere Schrift darf etwas breiter, kleinere bleibt schmaler. Deshalb bekommt jeder Texttyp eine eigene maxWidth, auch wenn der Container 1200 breit ist.
Headline · 48 bis 56px · maxWidth 820 · Ziel 2 bis 3 Zeilen
So bleibt die Headline kurz, knackig und sofort lesbar
Subheadline · 20px · maxWidth 680 · 55 bis 70 Zeichen
Die Subheadline gibt Kontext und führt in den Abschnitt ein. Sie bleibt schlank, damit das Auge den Zeilenanfang leicht wiederfindet.
Body · 16 bis 18px · maxWidth 680 · 60 bis 75 Zeichen
Im Fließtext zählt die Zeilenlänge am meisten. Ungefähr 60 bis 75 Zeichen pro Zeile lesen sich am angenehmsten. Wird die Spalte zu breit, verliert das Auge beim Sprung in die nächste Zeile den Anfang und ermüdet schneller. Deshalb kappt der Lesetext bei rund 680 Pixeln, selbst wenn der Container 1200 breit ist.
Kleintext · 14 bis 16px · maxWidth 560 · 45 bis 60 Zeichen
Kleintext wie Bildunterschriften, Labels oder Hinweise bleibt besonders schmal und kurz.
Am Handy
Am Handy spielt die Breite keine Rolle. Der Screen ist schmaler als jede maxWidth, also greifen die Caps nie und die Zeilenlänge passt von selbst. Diese Werte gelten daher vor allem für Desktop und auf dem Tablet nur am oberen Rand.
