Design System · 2026
Tanken · Waschen · Genießen — das visuelle Vokabular der Südramol GmbH & Co. KG (Familienbetrieb seit 1961, Burgau) und ihrer fünf Sub-Marken RAN, WaschWelt, PIZZABOB, MARY LOU und BrotZeit & Kaffee. Erst README.md lesen, dann hier visuell prüfen.
13 Sektionen: Hero, Marken, Werte, Historie, Standorte, Nachhaltigkeit, Team, Presse, Kontakt — mit Live-Tweaks-Panel.
Sub-MarkePreistafel, 43-Standorte-Karte, Nahversorger-Konzept, Kundenkarte & Bezahlmethoden.
Sub-MarkeProgramm-Vergleich, So funktioniert's, App-Zahlung, Umweltbilanz.
GastroSpeisekarte mit 6 Gerichten, 13 Standorte, von früh bis spät.
GastroBowls & Feel-Good-Food, frisch gemacht — Speisekarte, Standorte, Zeiten.
GastroBackwaren & Kaffee — 365 Tage im Jahr, täglich ab 05:30 Uhr.
AngebotVertrauliches Kunden-Angebot: Der neue Südramol-Auftritt in 60 Tagen.
PräsentationAusgangslage, Konzept, alle 6 Marken-Heros, Roadmap. Pfeiltasten oder Klick zum Blättern.
Die finale Verschmelzung aus V2 + V3: 18 Sektionen auf der Nacht-Bühne, 3 Veo-Videos, Anlagen-System, Jury-geprüft (3 Kandidaten, 10 Juroren) mit allen Transplantaten der Mitbewerber.
KandidatBasis der Master-Version (Score 7,81) — unveränderte Fassung vor Grafts und Fixes.
KandidatPlatz 2 (7,75) — Nacht/Tageslicht-Kapitel; lieferte 6 der 8 Transplantate.
KandidatPlatz 3 (6,98) — stärkster Hero und die SVG-Standortkarte; CountUp-Technik übernommen.
Wie ein Wirtschaftsmagazin über einen Familienbetrieb: Cream, große Typo-Momente, editoriale Grids, Orange als Präzisions-Akzent. Ruhig und souverän.
Studie V2Die Nacht-Version: Tankstelle bei Dämmerung als dunkle Bühne, Signal-Orange als Licht, choreografierte Scroll-Momente, Marken als Film-Kapitel.
Studie V3Infrastruktur als Design-Sprache: rigide Grids, extreme Typo-Skala, Orange als Fahrbahn-Markierung, Marken als nummerierte Anlagen-Module.
RAN-Rot im Einsatz auf Cream und Dunkelblau.
Kraftstoffpreise mit Tabular-Ziffern.
Cyan mit dunklem Text — die Kontrast-Regel der Marke.
Waschprogramm-Karten mit „Beliebt"-Badge.
Italienisches Rot + Gelb-Akzent (nur als Badge).
Runde Foto-Kreise mit Preisen.
Kräuter-Grün: hell als Fläche, dunkel als Text.
Bowls in runden Foto-Kreisen.
Krusten-Braun auf Cream und Dunkelblau.
Bayerische Klassiker + 365-Tage-Pill.
Alle 5 Marken-Farben im Überblick.
Die 5 Original-Logos.
Südramol-Blau mit Stops.
Signal-Orange — der einzige Dachmarken-Akzent.
Cream, Paper, Ink — bayerisch-warm.
Sektions-Farben im Kontext.
Hero-Titel in Fira Sans 700.
H2 bis H5.
Lede, Body, Body Small.
Small-Caps und Stat-Nummern.
Fira Sans × Merriweather Italic.
16-Stop-Skala auf 4px-Basis.
8px Cards · 16px Hero · Pill-Buttons.
Blau-getönte Schatten-Stufen.
Primär, Sekundär, Ghost — alle Pill.
Floating Glass Pill mit CTA.
Full-Bleed-Foto mit Overlay und Stats.
Expansion-Formular mit Fokus-Stilen.
Kennzahlen mit Orange-Superscript.
Paper-Karte mit Hover-Lift.
Werte-Kanon als Karten.
Icon + Titel + Beschreibung.
Interaktiver Sub-Marken-Umschalter.
Leitsatz in Merriweather Italic.
Nummerierte Schritt-Reihe — vom Standort-Angebot zur Eröffnung.
Editorial-Tabellenzeile mit Hover — Sub-Marken als Zeilen.
CTA-Teaser auf Blau.
Marken-Laufband (sparsam einsetzen).
Der Fünfer-Kanon.
Vier-Spalten-Footer auf Nachtblau.
Schematische 43-Marker-Karte.