Gestaltung
Styleguide
Idee
Der Sitzkreis
Ein Männerkreis trifft sich am Abend, sitzt im Kreis und hört zu. Die Gestaltung macht das sichtbar: eine Mitte, Dinge wenden sich einander zu, viel Luft dazwischen. Plakativ, wo es um die Einladung geht, ruhig, wo gelesen wird.
Grundlage ist ein Raster aus zwölf Spalten mit einer Kante. Genau vier Züge brechen es: die Marginalspalte, die Überlappung, der Anschnitt und das Plakatwort. Jeder höchstens einmal je Fläche.
Farbe
Vier Gründe, eine Glut
Farben sind Rollen. Jede Rolle hat einen Wert bei Tag und einen bei Nacht; Text erreicht auf jedem Grund mindestens 4,5 : 1, Konturen 3 : 1.
Papier
Text auf Papier
Akzent
HandlungBand
Text auf Band
Akzent
HandlungZweites Dunkel
Text auf Zweites Dunkel
Akzent
HandlungDunkler Grund
Text auf Dunkler Grund
Akzent
HandlungCMYK-Werte sind rechnerische Richtwerte aus sRGB. Verbindlich ist ein Proof auf dem Papier, das gedruckt wird. Die Glut (Handlung) und der Funke wirken auf ungestrichenem Papier dunkler; dort lieber gestrichenes Papier wählen oder die Werte mit der Druckerei abstimmen.
Schrift
Plakat und Brief
Cormorant für Titel, Daten und Plakatworte (variabel, ab Stärke 500, die betonte Stelle kursiv). IBM Plex Sans für alles, was erklärt.
- text-marginal
- IBM Plex Sans · Notiz in der Marginalspalte
- 0.875rem · Zeilenhöhe 1.5 · Laufweite 0.01em
Kein Ersatz für Therapie.
- text-xs
- IBM Plex Sans · Kleingedrucktes
- 0.8125rem · Zeilenhöhe 1.45
© Männerkreis Niederbayern
- text-sm
- IBM Plex Sans · Labels, Hinweise
- 0.875rem · Zeilenhöhe 1.5
Nächster Termin
- text-base
- IBM Plex Sans · Buttons, Felder, Daten
- 1rem · Zeilenhöhe 1.55
Zur Anmeldung
- text-md
- IBM Plex Sans · Fließtext
- clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) · Zeilenhöhe 1.65
Wer spricht, hat die ganze Aufmerksamkeit der anderen.
- text-lg
- IBM Plex Sans · Einleitung
- clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem) · Zeilenhöhe 1.55
Wir sitzen im Kreis und sprechen über das, was uns gerade beschäftigt.
- text-xl
- IBM Plex Sans · FAQ-Fragen, Datenwerte
- clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem) · Zeilenhöhe 1.4
Muss ich etwas erzählen?
- text-quote
- Cormorant · Ein kurzes Zitat
- clamp(1.75rem, 1.45rem + 1.2vw, 2.625rem) · Zeilenhöhe 1.2 · Laufweite -0.01em
Ich sorge dafür, dass jeder in Ruhe sprechen kann.
- text-sub
- Cormorant · Zwischentitel, Werte, Daten
- clamp(1.625rem, 1.4rem + 0.9vw, 2.25rem) · Zeilenhöhe 1.15 · Laufweite -0.01em
Freitag, 20. November 2026
- text-section
- Cormorant · Titel einer Sektion
- clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem) · Zeilenhöhe 1.02 · Laufweite -0.015em
Wie ein Abend abläuft
- text-page
- Cormorant · Titel einer Unterseite
- clamp(2.75rem, 1.6rem + 4.6vw, 6rem) · Zeilenhöhe 0.98 · Laufweite -0.02em
Termine und Anmeldung
- text-hero
- Cormorant · Die Aussage der Startseite
- clamp(3rem, 1.6rem + 5.2vw, 5.625rem) · Zeilenhöhe 0.96 · Laufweite -0.02em
Ein Abend, an dem du nichts darstellen musst.
- text-index
- Cormorant · Ziffer in der Marginalspalte
- clamp(3rem, 1.9rem + 4.4vw, 6.5rem) · Zeilenhöhe 0.9 · Laufweite -0.04em
01
- text-poster
- Cormorant · Ein Wort oder eine Zahl, groß wie auf einem Plakat
- clamp(4.5rem, 1.4rem + 12.4vw, 13.5rem) · Zeilenhöhe 0.86 · Laufweite -0.05em
Dabei sein.
Raster
Zwölf Spalten, eine Kante
1200 px Inhalt, 28 / 40 / 56 px vom Fensterrand. Im Druck: dieselben Verhältnisse auf dem Satzspiegel, Ränder mindestens 8 mm.
- section
- 5.5rem · ab 48rem: 7rem · ab 64rem: 9rem
- band
- 3.5rem · ab 48rem: 4rem · ab 64rem: 5rem
- group
- 2.5rem · ab 48rem: 3rem · ab 64rem: 4rem
- grid
- 2rem · ab 80rem: 3rem
- gutter
- 1.75rem · ab 48rem: 2.5rem · ab 80rem: 3.5rem
- overlap
- 2.5rem · ab 48rem: 4rem · ab 64rem: 6rem
- how far an element crosses an edge: 40 / 64 / 96px
Rasterbruch
Die vier Züge
Das Raster bricht nur auf diese vier Arten, jede höchstens einmal je Sektion oder Seite. So bleibt es lebendig und trotzdem ruhig.
1 · Marginalspalte
Die erste Runde
Reihum sagt jeder kurz, wie es ihm gerade geht.
2 · Überlappung
3 · Anschnitt
Termine per E-Mail erhalten
4 · Plakatwort
Fünf Absprachen
Vertraulichkeit, Ehrlichkeit, Annehmen statt bewerten, von sich sprechen, Respekt.
So
- Einen Zug pro Sektion wählen und ihn deutlich setzen.
- Den Anschnitt im Seitenverlauf links und rechts wechseln.
- Überlappungen nur auf eigenem Grund (Scheibe, Fläche).
Nicht so
- Treppen aus versetzten Blöcken.
- Gedrehte Elemente.
- Schatten, Rahmen oder Boxen um Inhalt.
- Text über einem Foto.
Motive
Der Kreis, in vier Formen
Die Marke (vier Figuren im Kreis), der Sitzring, der Stempel und die Ziffer. Mehr Dekoration gibt es nicht.
Logodateien (SVG, PNG, einfarbig schwarz und weiß) liegen im Repository unter brand/logo/.
Bausteine
Gleiche Aufgabe, gleiche Form
Was man drückt, ist rund. Was etwas hält, ist eckig. Eine Fläche hat genau eine gefüllte Handlung.
Danke, du bekommst eine Bestätigung per E-Mail.
Bitte prüfe die markierten Angaben.
Nächster Termin
- Zeit
- 19:30–21:30 Uhr
- Ort
- Geiselhöring
- Beitrag
- Spendenbasis
3 von 7 Plätzen frei
Muss ich etwas erzählen?
Ist das spirituell?
Der Rahmen
Nächster Termin
Bilder
Kreis oder Anschnitt
So
- Menschen im Kreis zeigen (rund freigestellt), Orte, Wald und Abendlicht im angeschnittenen Rechteck.
- Warmes, natürliches Licht; echte Abende und Orte in Niederbayern.
- Eine Bildform je Sektion; Bildunterschrift als Randnotiz.
Nicht so
- Gestellte Gruppenbilder, Stockfotos, Pathos (Fäuste, Lagerfeuer-Inszenierung).
- Erkennbare Teilnehmer ohne ihre ausdrückliche Zustimmung.
- Text oder Logo auf ein Foto legen.
Sprache
Wie ein Kreisleiter spricht
So
- Du, kurze Sätze, einfaches Deutsch. Beschreiben, was passiert.
- Den Rahmen klar benennen: fünf Absprachen, jede Übung ist ein Angebot, Nein ist eine gute Antwort.
- Jede Einladung mit der Erlaubnis, nicht mitzumachen.
- Eine Sache einmal je Seite sagen.
Nicht so
- Heilsversprechen, Therapie-Floskeln („das darf sein“, „was sich zeigt“).
- Bruder-Ton, Esoterik, Pathos.
- Parolen nach dem Muster „nicht X, sondern Y“, Dreierreihen für den Klang.
- Gedankenstriche als Effekt.
Druck und Beiträge
Vorlagen
Flyer, Plakat, Visitenkarte und Beiträge entstehen aus denselben Bausteinen, mit den nächsten Terminen und einem QR-Code zur Anmeldung.
- Flyer A6, Vorder- und Rückseite105 × 148 mm · mit Beschnitt 111mm × 154mmPDF, PNG
- Flyer DIN lang99 × 210 mm · mit Beschnitt 105mm × 216mmPDF, PNG
- Plakat A3297 × 420 mm · mit Beschnitt 303mm × 426mmPDF, PNG
- Visitenkarte, Vorder- und Rückseite85 × 55 mm · mit Beschnitt 89mm × 59mmPDF, PNG
- Instagram-Beitrag 1:11080 × 1080 pxPNG
- Instagram-Beitrag 4:51080 × 1350 pxPNG
- Story 9:161080 × 1920 pxPNG
- Vorschaubild (Open Graph)1200 × 630 pxPNG
- Vorschaubild der persönlichen Seite1200 × 630 pxPNG
- Logo mit Wortmarke1600 × 640 pxPNG, PDF
Erzeugt werden sie im Repository mit bun run brand:render: PDF mit 3 mm Beschnitt (Visitenkarte 2 mm) und eingebetteten Schriften, PNG für Beiträge und Vorschaubilder. Die Termine kommen aus der Website oder aus einer JSON-Datei.
PDFs sind RGB. Für den Offsetdruck wandelt die Druckerei nach CMYK (Proof anfordern). Farbwerte, Schriften und Logodateien für andere Programme: brand/tokens.json, brand/palette.ase,brand/logo/.
Der QR-Code steht immer auf hellem Grund, mit Ruhezone, mindestens 20 mm breit.