Großunternehmen · Deutschland
SAP · Deutsche Bank · Bosch · Commerzbank
Gestaltungsleitfaden
Style Guide
Kleinstadtleben — verbindliche Gestaltungsgrundlagen für den Blog, online und im Druck.
01 Marke
Positionierung
Kleinstadtleben — ein unabhängiger Lokalpolitik- und Kleinstadt-Blog: Geschichten, Themen und Perspektiven aus der Kleinstadt. Die Marke tritteditorial und nahbar auf — nah an einer Lokalzeitung, nicht an einer Behörden- oder Agenturseite.
Gestaltungsprinzipien
- Ruhe durch Raster. Großzügiger Weißraum, strikter 4-pt-Rhythmus.
- Typografie trägt. Serif für Leitsätze, Sans für Fließtext, Mono für Labels.
- Farbe spart. Dominierend off-white und near-black; ein freundliches Blau akzentuiert.
- Kein Zierrat. Haarlinien statt Boxen, schlanker Akzentstrich statt Dekor.
- Nähe vor Effekt. Konkrete Orte, Namen, Belege — keine Floskeln.
Claim
„Geschichten, Themen und Perspektiven aus der Kleinstadt."
Leitsatz · Untertitel auf der Startseite.
Sprachgebrauch
- Anrede: Du (persönlich, einladend — z. B. „Hast Du Lust, hier zu schreiben?").
- Tonalität: verständlich, respektvoll, sachlich — auch bei Streitthemen.
- Ortsbezug konkret: Stadtteile, Gremien, Termine benennen statt allgemein bleiben.
02 Logo
Markenzeichen
Das Logo ist eine reduzierte Häuser-Silhouette — Giebeldächer einer Kleinstadt mit Sonne darüber, einfarbig und ruhig. Es steht für den Ortsbezug des Blogs, ohne konkrete Gebäude abzubilden.
Das verbindliche Logo wird zentral im Admin unter „Marke"gepflegt (Upload) und zur Laufzeit über die BrandRuntime in Header, Footer und Favicon eingesetzt. So ändert sich das Logo an einer Stelle für die ganze Seite. Im Header/Footer läuft es hell auf dunklem Grund.
Auf dunklem Grund (Header/Footer) — Live-Logo aus „Marke"Einsatz im UI
| Header | Marken-Logo (BrandRuntime) | hell auf Navy-Grund |
| Footer | Marken-Logo (BrandRuntime) | hell auf dunklem Grund |
| Favicon | Marken-Logo (BrandRuntime setzt es dynamisch) | — |
| Header-Bilder | wird ins generierte Header-PNG eingebettet | imgrender |
Quelle: hochgeladenes Marken-Logo (/uploads/branding/logo.png), verwaltet unter /admin/#marke. Die im Repo liegenden Platzhalter-SVGs (logo.svg, logo-on-dark.svg) dienen nur als Fallback, bis das Marken-Logo geladen ist.
Don'ts
- Nicht verzerren, rotieren oder beschneiden.
- Keinen Schlagschatten, Outline oder Verlauf.
- Nicht in markenfremde Farben einfärben — die Silhouette bleibt einfarbig.
- Nicht auf unruhigem Bildhintergrund ohne Abdeckfläche platzieren.
- Ausreichend Schutzraum lassen (mind. Logohöhe rundum frei).
03 Farbsystem
Basis: warmes Off-White (Porzellan) mit einem Near-Black, der minimal ins Warme kippt. Akzent: ein freundliches Blau (#339cff) für Buttons (weißer Text darauf), Akzentlinien und Icons. Link-Text auf hellem Grund steht in einem dunkleren Link-Blau (#0066cc), damit er AA-konform lesbar bleibt. Der Header steht in Navy (#053e7a). Burgunder bleibt seltenen Sonderfällen (Fehler) vorbehalten. Palette für sRGB (Bildschirm); CMYK-Werte sind Richtwerte — vor Druck mit ICC-Profil und Proof abstimmen.
Basis & Text
PorzellanGrundfläche#FAFAF7
Warm-GrauSektion / Card#F2F1ED
Near-BlackText / Headline#0E0E0E
Text MutedUntertitel#3A3A38
Text FaintMono-Labels#595954
Akzent (Alltag)
BlauButtons, Akzentlinie, Icons#339CFF
Link-BlauLink-Text (AA)#0066CC
Blau HoverHover / Focus#1F8AE6
NavyHeader-Hintergrund#053E7A
Blau FaintBadge / Tint#E3F0FF
Akzent (Besonders — sparsam!)
BurgunderFehler / Tupfer#6B1F28
Burgunder FaintHinweis-BG#F4E8E9
Linien
HairlineTrennlinie 1 px#E5E4DF
Linie starkRahmen / Divider#CDCCC6
Farbregeln
- Ein durchgängiger Akzent: Blau. Burgunder nur für Fehler/Warnung, nie dekorativ.
- Burgunder niemals flächig — nur als Strich, Stichpunkt oder sehr kleines Feld.
- Fließtext in Near-Black; Meta/Untertitel in Text Muted/Faint.
- Header/Footer in Navy (
#053e7a) mit hellem Logo; Dark-Mode nutzt die Token-Werte.
04 Typografie
Einheitlich IBM Plex — selbstgehostet, keine externe Verbindung. Drei Schnitte: Sans für Sprache, Serif für Leitsätze, Monofür Marker und technische Details.
IBM Plex Sans · Primär
Kleinstadtleben
Enterprise Architect · Datenschutz-Jurist · Projektmanager
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · ÄÖÜß
Gewichte: Regular 400 (& Italic), Medium 500, SemiBold 600, Bold 700.
IBM Plex Serif · Leitsätze
„Unklarheit kostet."
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Gewichte: Regular 400 (& Italic), Medium 500 (& Italic).
IBM Plex Mono · Labels & UI
01 — Leistungen
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Gewichte: Regular 400, Medium 500. Labels UPPERCASE · letter-spacing: 0.04em.
Typo-Skala (Web)
--text-xs | 0.75 rem · 12 px | Mono-Labels, Caption |
--text-sm | 0.875 rem · 14 px | Meta-Text, Form-Hint |
--text-base | 1 rem · 16 px | Body (Standard) |
--text-lg | 1.125 rem · 18 px | Lead-Paragraph |
--text-xl | 1.375 rem · 22 px | H3 klein, Subhead |
--text-2xl | 1.75 rem · 28 px | H3, Card-Title |
--text-3xl | 2.25 rem · 36 px | H2 |
--text-4xl | 3 rem · 48 px | H1 (Standard) |
--text-5xl | 4 rem · 64 px | Hero klein |
--text-6xl | 5.25 rem · 84 px | Hero groß |
--text-7xl | 7 rem · 112 px | Stat-Zahl / Manifest |
Zeilenhöhe & Laufweite
--leading-tight | 1.1 | Hero-Headlines |
--leading-snug | 1.25 | H1–H3 |
--leading-normal | 1.55 | Fließtext |
--leading-loose | 1.75 | Lange Lesestrecken |
--tracking-tight | −0.02 em | Hero |
--tracking-snug | −0.01 em | H1–H3 |
--tracking-wide | +0.04 em | Mono-Labels |
--tracking-wider | +0.1 em | Display-Labels |
Text-Utilities
Zwei globale Klassen für Fließtext-Seiten. Wer sie kombiniert, muss wissen was er tut — sie stapeln sich kumulativ.
.lead · einleitender Absatz
Ich denke systemisch, plane voraus und arbeite bevorzugt dort, wo Komplexität auf Strukturbedarf trifft.
font-size: --text-lg · color: --color-text-muted. Kein eigener Font — erbt IBM Plex Sans vom <body>. Setzt keinenmargin-top, daher von Haus aus eng am vorigen Element.
.prose · Lesestrecken-Wrapper
Regulärer Fließtext in .prose erhält automatischmax-width: --max-reading.
Aufeinanderfolgende Absätze bekommen margin-top: --space-4.Hervorhebungen erhalten volle Textfarbe zurück.
Wrapper-Klasse um zusammenhängenden Textblock. Enthält Regeln fürp + p (Abstand), p (max-width), h2,ul und strong. Nicht mit .leadverwechseln — Kombination ist möglich, dann wirkt .lead nur auf den einzelnen Absatz.
05 Raster & Abstände
Alle Abstände folgen einem 4-px-Grundraster. Tokens in rem definiert (1 rem = 16 px). Für Print: 1 pt ≈ 0,353 mm; die mm-Spalte ist Orientierung.
Skala
--space-1 | 0.25 rem · 4 px · 1.06 mm | Mikro-Gap (Icon ↔ Text) |
--space-2 | 0.5 rem · 8 px · 2.12 mm | Enger Gap |
--space-3 | 0.75 rem · 12 px · 3.18 mm | Kleiner Gap |
--space-4 | 1 rem · 16 px · 4.23 mm | Absatz zu Label |
--space-5 | 1.25 rem · 20 px · 5.29 mm | Formular-Gap |
--space-6 | 1.5 rem · 24 px · 6.35 mm | Container-Padding |
--space-8 | 2 rem · 32 px · 8.47 mm | Absatz-Abstand |
--space-10 | 2.5 rem · 40 px · 10.58 mm | Grid-Gap |
--space-12 | 3 rem · 48 px · 12.70 mm | Block ↔ Block |
--space-16 | 4 rem · 64 px · 16.93 mm | Section kompakt |
--space-20 | 5 rem · 80 px · 21.17 mm | Akzentstrich-Länge |
--space-24 | 6 rem · 96 px · 25.40 mm | Section Standard |
--space-32 | 8 rem · 128 px · 33.87 mm | Hero-Padding |
--space-40 | 10 rem · 160 px · 42.33 mm | Seiten-Intro |
Visuelles Lineal
4
8
16
24
48
96
160
Weißraum-Regeln
- Section-Padding vertikal
--space-24(96 px). Hero oben--space-40, unten--space-16. - Absatz → Absatz
--space-4. Absatz → neue Überschrift--space-8. - Cards padding
--space-8rundum. - Akzentstrich: 80 × 4 px, Blau, darüber
--space-4, darunter--space-6. - Nie kleiner als 4 px — sonst bricht der Rhythmus.
06 Layout
Container
--max-content | 75 rem · 1200 px | Standard (Grids, Header) |
--max-narrow | 56 rem · 896 px | Rechtstexte, Formulare |
--max-reading | 42.5 rem · 680 px | Lange Lesestrecken |
Section-Rhythmus
Drei Hintergrund-Töne wechseln ab. Nie zweimal die gleiche Farbe hintereinander.
A · Porzellan
#FAFAF7B · Warm-Grau
#F2F1EDC · Dunkel
#0B0B0BEcken, Linien, Schatten
--radius-sm | 3 px | Tags, Chips |
--radius-md | 8 px | Inputs, Buttons |
--radius-lg | 16 px | Cards |
--border-hair | 1 px · #E5E4DF | Section-Divider |
--border-strong | 1 px · #CDCCC6 | Form-Rahmen |
sm
md
lg
Schatten sind weich und warm — kein harter Schlagschatten.
07 Komponenten
Section-Header
.section-header
01 — Leistungen
Klarheit schaffen.
Button
.btn
Pull-Quote · Testimonial
.pull-quote
„Falk hat Struktur gebracht, wo keine war — und auf jedem Meeting den roten Faden."B.B. · Wiesbaden
Lead-Quote · Leitsatz
.lead-quote
„Unklarheit kostet."
Referenz-Kachel
.ref-card
Formularfeld
.form-group · Label + Input
Link (Inline)
.link-inline
Beispiel: Mehr dazu im Datenschutz-Abschnitt.
1 px Unterstrich in Linie-stark; Hover → Blau.
08 Bildsprache
Ja
- Portrait: Tageslicht, neutraler Hintergrund, ruhiger Blick.
- Detail-Stills: Bücher, Notizen, Hände — dokumentarisch.
- Architektur: klare Linien, graphischer Ausschnitt.
- Farbigkeit entsättigt, leicht warm.
Nein
- Keine Stock-Klischees (Handshake, Sprint-Board).
- Kein HDR, keine übersättigten Farben.
- Keine Vignetten, keine Filter-Looks.
- Icons ersetzen keine Bilder.
Icon-Set · Business (massiv)
Für inhaltstragende Kacheln (Leistungsfelder, Nutzen, Gründe) verwendet die Marke ein einheitliches Icon-Set in solidem, massivem Business-Stil. Einfarbig, ausschließlich currentColor (standardmäßig--color-accent = Blau). 48 × 48-Raster, 4 px Sicherheitsrand. Keine Strichstärken — Form entsteht aus Flächen, nicht aus Linien.
Verwendung
- Inline per
<svg><use href="#icon-…"/></svg>— Farbe folgtcurrentColor. - Für externe Nutzung liegen alle Icons als Einzeldateien in
/icons/*.svgbereit. - Mindestgröße 24 px. Standardgröße 40–64 px. Für Hero-Teaser 72–96 px.
- Farbe: Blau
#339CFFauf hellem Hintergrund; Off-White#FAFAF7auf Navy. Burgunder nur für besondere Anlässe, nie als Dauerfarbe. - Niemals kombinieren mit Outline-Icons (z. B. Lucide, Feather) — die Bildwirkung wäre inkonsistent.
Abstände & Rahmen
Icon in Kachel: 4 × 4-Raster-Quadrat mit optischem Zentrum. Abstand zum Titel darunter var(--space-4). Kein Rahmen, kein Schatten, kein Farbkreis hinter dem Icon — das Icon selbst trägt die Bildfläche.
09 Tonalität
So klingt der Blog
- Nahbar. Ansprache per Du, freundlich und einladend.
- Sachlich. Auch bei Streitthemen ruhig bleiben, Standpunkte belegen.
- Konkret. Orte, Gremien, Termine benennen statt allgemein bleiben.
- Fair. Andere Sichtweisen benennen, nicht abkanzeln.
Vermeiden
- Polemik, Empörungssprache, Superlative.
- Behörden-/Amtsdeutsch, wenn es einfacher geht.
- Persönliche Angriffe statt Sachargumente.
- Behauptungen ohne Beleg oder Quelle.
Beispiele
Nicht so
„Die Verantwortlichen haben mal wieder komplett versagt — ein Skandal, wie man ihn nur hier erlebt!"
Besser
„In der Sitzung am 30. Juni wurde der Verkauf ohne öffentliche Debatte angesetzt. Warum das aus meiner Sicht problematisch ist:"
10 Web → PDF
Diese Seite ist via Browser-Druck direkt als PDF exportierbar. Das Print-CSS ist in der Datei enthalten (@media print).
| Seitenformat | A4 Hochformat |
| Seitenränder | 22 mm oben · 20 mm rechts · 22 mm unten · 22 mm links |
| Basisschrift | 10 pt · IBM Plex Sans |
| Sidebar & Site-Chrome | ausgeblendet |
| Sections | starten auf neuer Seite (page-break-before: always) |
| Farben | werden gedruckt (print-color-adjust: exact) |
| Links | URLs stehen in Klammern neben dem Link-Text |
| Fußzeile | „Kleinstadtleben · Style Guide · Seite n" via @page |
Empfohlene Druck-Einstellungen
- Hintergrundgrafiken aktivieren (damit Farb-Swatches sichtbar bleiben).
- Kopf- und Fußzeilen des Browsers deaktivieren.
- Skalierung 100 % (kein „An Seite anpassen").
- Empfohlen: Chromium-basierte Browser (beste Print-CSS-Unterstützung).
11 Barrierefreiheit
Ziel: durchgängig WCAG 2.2 AA. Mindestens 4.5:1 für normalen Text,3:1 für großen Text (ab 18 pt bzw. 14 pt bold) und UI-Komponenten.
Kontraste im Einsatz
| Kombination | Kontrast | WCAG |
| Near-Black #0E0E0E auf Porzellan | ≈ 18:1 | AAA |
| Text Muted #3A3A38 auf Porzellan | ≈ 10:1 | AAA |
| Text Faint #595954 auf Porzellan | ≈ 5.9:1 | AA |
| Text Faint #595954 auf Warm-Grau | ≈ 5.5:1 | AA |
| Off-White #FAFAF7 auf Navy #053E7A (Header) | ≈ 10:1 | AAA |
| Link-Blau #0066CC auf Porzellan | ≈ 5.3:1 | AA |
| Blau #339CFF auf Porzellan | ≈ 2.7:1 | nur Buttons/Großelemente |
| Porzellan auf Dunkel #0B0B0B | ≈ 18:1 | AAA |
Zwei Blautöne, klar getrennt: Link-Text auf hellem Grund steht im dunkleren Link-Blau #0066CC (≈ 5.3:1 → AA) und ist zusätzlich unterstrichen. Das helle #339CFF trägt keinen Fließtextauf hellem Grund (nur ≈ 2.7:1) — es ist für Buttons (weißer Text auf Blau), Akzentlinien, Icons und den Navy-Header reserviert.
Regeln
- Interaktive Elemente haben sichtbaren Fokus (3 px Ring Blau).
- Icons sind nie die einzige Träger einer Information — stets Text oder
aria-label. - Formularfelder haben sichtbares
<label>, nicht nur Placeholder. - Bildalternativen sind aussagekräftig (nie „Bild" oder „Foto").
- Kein Autoplay-Video, keine aufdringliche Bewegung.