# Südramol Design System > **Südramol GmbH & Co. KG** — *Tanken · Waschen · Genießen*. Familienbetrieb seit 1961, Burgau (Bayern). Ein Design System für **Südramol**, eine süddeutsche Unternehmensgruppe in dritter Generation, die 43+ moderne Tankstellen sowie fünf Sub-Marken (RAN, WaschWelt, PIZZABOB, MARY LOU, BrotZeit & Kaffee) in Bayern und Baden-Württemberg betreibt. Das visuelle Vokabular ist **modern-mittelständisch mit süddeutscher Herzlichkeit** — Königsblau + Signal-Orange auf warmem Cream-Papier, Fira Sans für alles Sachliche, Merriweather Italic für emotionale Zitate, freundliche 8px-Radien statt scharfer Kanten, warme Dämmerungsfotografie an Tankstellen. Der Voice ist **sachlich-familiär in der Sie-Form** — konkrete Zahlen, kurze Sätze, regionale Verwurzelung ohne Bauern-Pathos. --- ## Quellen - **`reference/website-header.jpg`** — Original-Header-Foto der Südramol-Website (RAN-Tankstelle bei Dämmerung — Nacht­blau + Orange-Innen­beleuchtung) - **`reference/website-slider1.jpg`** — Zweites Slider-Foto von der Homepage - **`reference/website-karriere.jpg`** — Karriere-Bildmotiv (orange Puzzle-Metapher) - **`reference/website-umwelt.jpg`** — Nachhaltigkeits-Bildmotiv - **`assets/logo/logo-suedramol.svg`** — Original-Wortmarke als Vektor (aus der Website) - **`assets/logo/logo-{ran,waschwelt,pizzabob,marylou,brotzeit}.png`** — Sub-Marken-Logos - **`assets/photos/*.jpg`** — 6 kuratierte AI-generierte Marken-Fotografien (Hero-Tankstelle, Café-Szene, Waschstraße, Pizza, Feel-Good-Bowl, Bayern-Landschaft) - **Website** — `https://www.suedramol.de` (Homepage, Das-sind-wir, Kontakt/Expansion) Es gibt ein Produkt: die **Corporate-Website der Dachmarke** (`ui_kits/website/`). > Die fünf Sub-Marken (RAN, WaschWelt, PIZZABOB, MARY LOU, BrotZeit & Kaffee) > sind für einen zweiten Iterationsschritt vorgesehen — siehe > `HANDOFF_TO_CHEAP_AGENT.md`. --- ## Content Fundamentals Der Copy-Ton ist **sachlich-familiär, vertrauensvoll, süddeutsch-solide**. Sätze sind kurz und deklarativ, mit konkreten Zahlen als Beweis (43 Tankstellen, 1961, 3. Generation, Bayern + Baden-Württemberg, 13 Standorte, 365 Tage/Jahr). Die Marke verkauft **Verlässlichkeit für den mobilen Menschen** — die Sprache muss sich anfühlen wie eine gepflegte Hand­schrift, nicht wie Marketing-Slang. ### Voice-Regeln 1. **Sie-Form durchgängig.** Keine Duzerei. „Sie sehnen sich nach einer neuen Herausforderung?" — direkte Ansprache mit Respekt. 2. **Erste Person Plural im Body.** „Wir bauen und betreiben", „unser Konzept", „unsere Werte". Das Unternehmen spricht als Familie, nicht als Individuum. 3. **Konkrete Zahlen statt Adjektive.** Nie „viele Tankstellen" — immer „43 umsatz­starke Tankstellen". Nie „lange Tradition" — immer „seit 1961" oder „in dritter Generation". 4. **Ortsverankerung.** Burgau, Bayern, Baden-Württemberg, Süddeutschland — der Standort ist Teil der Marke und wird nicht versteckt. 5. **Werte als Rhythmus:** *Klarheit · Anpassungsfähigkeit · Einbeziehen · Freude, Humor, Spaß · Ehrlichkeit* — dieses Fünferset wird wörtlich zitiert, wenn Werte zur Sprache kommen. 6. **Der Leitsatz** wird immer in Anführungszeichen und wörtlich zitiert: > „Wir wollen mit Freude Geschäfte betreiben, an denen alle Beteiligten gewinnen." 7. **Keine Emoji.** Ausnahme: das **Pfeil-Symbol `→`** (U+2192) in CTAs. 8. **Ausrufezeichen sparsam.** Nur in echten Aufforderungen („Dann bewerben Sie sich jetzt bei uns!") — nicht in Body-Absätzen. 9. **Der „mobile Mensch"** ist der zentrale Begriff. Wird nicht durch „Kunde", „Autofahrer" oder „Verbraucher" ersetzt. 10. **Sentence Case in Headlines**, UPPERCASE nur in Buttons (mit tracked-out Letter-Spacing) und in Sektions-Eyebrows. 11. **Italics tragen die Emotion.** Verwendet für ein einzelnes emphati­sches Wort in einer Headline (`„sind wir *echt*"`) — in Merriweather Italic, in Orange. ### Beispiel-Headlines (Rhythmus studieren) > *„Tanken · Waschen · Genießen"* — Marken-Manifest, drei-teilig, Punkte statt Kommas > > *„Willkommen bei Südramol"* — direkte Ansprache, keine Aufmacher-Prosa > > *„Eine starke Unternehmensgruppe in Familienhand"* — Sub-Headline, sachlich > > *„Der mobile Mensch im Fokus"* — Werte-Statement, kurz und klar > > *„Arbeiten bei Südramol"* — Karriere-CTA, Gerundium > > *„Ihre Immobilie ist gefragt — wir suchen neue Standorte!"* — B2B-Ansprache mit einem Ausrufezeichen Das Muster: **kurze Aussage + optionaler Bindestrich + ergänzender Halbsatz**. Nie verschachtelt, nie mehr als eine Nebeninformation pro Headline. --- ## Visual Foundations ### Farben Eine **fokussierte Palette** aus drei Blöcken: Marken-Blau + Signal-Orange + warmen Cream-Neutrals. Alle drei Werte kommen direkt aus dem Original-Logo. Die Sub-Marken haben eigene Farben, die aber **nur in Sub-Marken-Sektionen** verwendet werden — die Dachmarke bleibt bei Blau + Orange. | Familie | Rolle | Hex | |---|---|---| | **Südramol-Blau** | Primary — Hero-Backgrounds, Header, Text auf Hell, Sekundär-CTAs | `#222165` | | **Südramol-Orange** | Signal-Akzent — Primär-CTAs, Eyebrows, italic Emphasis, hoverte Links | `#FF5F1E` | | **Sun-Hell** | Highlight — sehr helles Lavendel für Zitat-Backgrounds, Blau-auf-Blau-Kontrast | `#DCDBED` | | **Cream** | Warmer Hintergrund für Body-Sektionen | `#FAF7F1` | | **Paper** | Weiß für Karten auf Cream | `#FFFFFF` | | **Ink** | Dark Text auf Hell — nicht ganz Schwarz | `#1A1A22` | Jede Marken-Familie hat 3 Stops (deep/base/soft), sodass Hovers und Emphasis über denselben Farbton laufen. ### Sub-Marken-Farben (nur bei Sub-Marken-Sektionen einsetzen) | Marke | Farbe | Hex | |---|---|---| | **RAN** | Neon-Rot | `#E30613` | | **WaschWelt** | Aqua-Blau | `#009EE0` | | **PIZZABOB** | Italienisches Rot + Gelb | `#C8102E` / `#FFC72C` | | **MARY LOU** | Kräuter-Grün | `#A6CE39` | | **BrotZeit & Kaffee** | Krusten-Braun | `#8B5E34` | ### Typografie Ein **freundlich-präzises Sans-Serif-Duo mit Serif-Akzent** — nichts editoriales, nichts kaltes, mittelständisch und offen: - **Sans (alles):** *Fira Sans* — Weights 400 / 500 / 600 / 700. Fira Sans ist die Corporate-Wahl, weil sie sowohl solide (deutsche Ingenieurs-Präzision) als auch warm (leicht abgerundete Buchstaben) wirkt. - **Serif (nur für Zitate + Italic-Emphasis):** *Merriweather* — Weights 400 + Italic. Wird nur eingesetzt, wenn eine Passage emotional werden soll: der Leitsatz, ein einzelnes Wort in Italics innerhalb einer Sans-Headline, Blockzitate. **Tracking:** Display-Größen leicht negativ (`-0.015em`), Body neutral, Eyebrows +0.22em, Buttons +0.08em. ### Spacing 16-Stop-Skala anchored auf Vielfachen von 4: `4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 128`. Section-Padding: `clamp(72px, 9vw, 128px)`. Container-Max: `1320px` (etwas schmaler als das breite Artsan-System — freundlicher, näher am Leser). ### Radien & Karten - **Standard-Radius: 8px** — freundlich-modern, nicht scharf, aber auch nicht verspielt. - **Buttons: Pill-Radius (999px)** — CTAs sind vollständig abgerundet, das macht sie zugänglicher und modern. - **Cards** — 8px-Radius, `--shadow-card` (leichter Blau-Schatten), auf Hover `--shadow-card-hover` und leichter Lift (`translateY(-2px)`). - **Hero-Container / große Bild-Rahmen:** 16px-Radius für zusätzliche Weichheit. ### Backgrounds & Bildsprache - **Photo-Style:** Warm-Dämmerungslicht, RAN-Tankstelle in blauer Stunde ist die Signature-Ästhetik. Tiefes Blau + warmes Orange-Innenlicht + nasser Asphalt-Refl. - **Filter:** `contrast(1.03) saturate(1.05)` — leicht gesättigter als Artsan, weil die Marke wärmer und einladender wirken soll. - **Sekundäre Bilder:** Food-Fotografie (Feel-Good-Bowl, Kaffee, Pizza), Bayern- Landschaft, Tank­stellen-Interior. Alle natürlich beleuchtet, kein Studio-Look. - **Keine Gradients** — Ausnahme: subtiler Vertical-Fade `linear-gradient(180deg, transparent, rgba(23,22,63,0.6))` als Overlay auf Hero-Fotos für Text-Lesbarkeit. - **Keine Muster, keine Texturen** — die Marke ist industriell-praktisch, nicht dekorativ. ### Animation - **Reveal-on-Scroll:** IntersectionObserver, `translateY(16px) → 0`, `opacity 0 → 1`, Duration `0.7s`, Easing `cubic-bezier(.22, .61, .36, 1)`. Stagger `.08s` / `.16s`. - **Button-Hover:** `transform: translateY(-1px)` + Schatten-Intensivierung. - **Card-Hover:** `translateY(-2px)` + Schatten wechselt zu `--shadow-card-hover`. - **Kein Marquee**, keine Loops, keine automatischen Slider auf primären Sektionen. Der Homepage-Slider ist die einzige Ausnahme (mit sichtbaren Punkten und Pause-on-Hover). - **Honor `prefers-reduced-motion`** — alle Übergänge auf 0.01ms setzen. ### Hover / Press - **Primär-Button:** Orange → Deep-Orange, +1px Lift, Schatten verstärkt. - **Sekundär-Button:** Blue → Blue-Deep, +1px Lift. - **Ghost-Button:** Rand-blau, transparent → Blau-Fill mit Cream-Text. - **Cards:** Cream → Cream-Dark, +2px Lift, Schatten-Wechsel. - **Links (inline):** Blau → Orange auf Hover, mit sanftem 0.2s color-Transition. - **Keine Shrink-Presses** — die Marke shrinkt nie unter dem Klick. ### Layout-Regeln - **Container-Max: 1320px** (schmaler als bei B2B-Marken, näher am mobilen Menschen). - **Gutter: `clamp(20px, 4vw, 64px)`** — großzügig, aber nicht luxuriös weit. - **Zwei-Spalten-Grids:** meist symmetrisch `1fr / 1fr` — die Marke ist zugänglich, nicht editorial-asymmetrisch. Ausnahmen bei Text-Bild-Kombinationen (`1.1fr / 1fr`). - **Section-Padding:** `clamp(72px, 9vw, 128px)` vertikal, konsistent. - **Full-bleed Hero + Slider** — Bilder erstrecken sich über die volle Viewport-Breite. ### Transparenz & Blur - **Nur auf Hero-Overlay** — `backdrop-filter: blur(6px)` auf dem Hero-Info-Chip, zusammen mit `rgba(23, 22, 63, 0.65)`. Sonst nirgends. - **Form-Inputs auf Blau:** transparent mit Bottom-Border. Auf Cream: `--paper` Background. ### Iconography **Line-Style-Icons in Fira Sans-Anmut** — abgerundete Endungen, Stroke-Width `1.75`, konsistente 24×24-Grid-Basis. Zwei Farb-Verwendungen: 1. **Feature-Icons** in Blau (`--sued-blue`) auf Cream — für Werte-Cards 2. **Action-Icons** in Orange (`--sued-orange`) auf Blau — für CTAs und Prozess-Schritte Keine Icon-Font. Für Ergänzungen ist **Lucide** die vorgesehene CDN-Quelle (https://lucide.dev, stroke 1.75, Farbe manuell via `stroke="var(--sued-blue)"`). **Der einzige Unicode-Charakter als Icon**: der Pfeil `→` (U+2192). --- ## Fonts Beide Fonts werden über **Google Fonts** via `@import` in `colors_and_type.css` geladen: - Fira Sans (Weights 400, 500, 600, 700) - Merriweather (Weight 400 + Italic) Für Offline- oder Performance-Optimierung liegen die Variable-Files unter `fonts/` bereit für spätere Self-Hosting-Migration (Woff2, aus dem Google Fonts Downloader). --- ## Index | Datei / Ordner | Zweck | |---|---| | **`README.md`** | Diese Datei. Erst lesen. | | **`SKILL.md`** | Metadaten für Wiederverwendbarkeit | | **`colors_and_type.css`** | Alle Design-Tokens + `.ds-*`-Helper | | **`thumbnail.png`** | Cover-Bild (Hero-Vorschau der Marketing-Site) | | **`assets/logo/`** | Dachmarke + 5 Sub-Marken-Logos | | **`assets/photos/`** | 6 kuratierte Marken-Fotografien (AI-generiert) | | **`reference/`** | Original-Website-Screenshots (read-only) | | **`preview/`** | 20+ Design-System-Karten für die Review-Ansicht | | **`ui_kits/website/`** | JSX-Komponenten der Corporate-Marketing-Website | | **`HANDOFF_TO_CHEAP_AGENT.md`** | Präzise Aufgaben-Liste für den nächsten Agenten | ### Schnellstart ```html

N° 01 · Willkommen

Der mobile Mensch
im Fokus.

Seit 1961 bauen und betreiben wir moderne Tankstellen — für alle, die unterwegs sind.

```