---
name: suedramol-design
description: Design system for Südramol GmbH & Co. KG — a family-owned Bavarian gas station group founded 1961 in Burgau. Deep royal blue + signal orange + warm cream palette, Fira Sans + Merriweather typography, friendly 8px radii, warm dusk photography. Use for corporate marketing, careers pages, expansion outreach, and sub-brand websites (RAN, WaschWelt, PIZZABOB, MARY LOU, BrotZeit).
user-invocable: true
---

# Südramol Design System

Südramol ist eine süddeutsche Tankstellen-Gruppe in dritter Generation, gegründet
1961 in Burgau, mit 43+ Tankstellen in Bayern und Baden-Württemberg. Die Marke
spricht als Familienunternehmen — sachlich in der Sie-Form, mit konkreten Zahlen
statt Adjektiven und regionaler Verwurzelung.

## Quick map

- **`README.md`** — Marken-Doku (voice + visual foundations)
- **`colors_and_type.css`** — Tokens (`--sued-blue`, `--sued-orange`, `--cream`)
  und Helper (`.ds-eyebrow`, `.ds-h2`, `.ds-lede`, `.ds-btn--primary`)
- **`assets/logo/`** — Dachmarke + 5 Sub-Marken-Logos
- **`assets/photos/`** — 6 Marken-Fotografien (Hero-Tankstelle, Café, Waschstraße etc.)
- **`ui_kits/website/`** — JSX-Komponenten der Corporate-Website
- **`reference/`** — Original-Website-Screenshots (read-only)
- **`preview/`** — Design-Karten für die Review
- **`HANDOFF_TO_CHEAP_AGENT.md`** — Erweiterungs-Plan für Sub-Marken

## House rules

1. **Nur drei Farben.** Südramol-Blau `#222165`, Südramol-Orange `#FF5F1E`,
   Cream `#FAF7F1`. Sub-Marken-Farben nur innerhalb einer Sub-Marken-Sektion einsetzen.
2. **8px Corner Radius** für Cards, Pill (999px) für Buttons. Nie scharf-kantig.
3. **Kein Emoji.** Ausnahme: Pfeil `→` (U+2192) in CTAs.
4. **Sie-Form durchgängig.** Nie duzen. Wir-Form für das Unternehmen selbst.
5. **Konkrete Zahlen als Beweis.** 43 Tankstellen, seit 1961, 3. Generation, 13
   Standorte, 365 Tage/Jahr. Nie „viele", nie „lange Tradition".
6. **Ortsverankerung.** Burgau, Bayern, Baden-Württemberg werden aktiv genannt,
   nicht versteckt.
7. **Der Werte-Kanon** wird wörtlich zitiert:
   *Klarheit · Anpassungsfähigkeit · Einbeziehen · Freude, Humor, Spaß · Ehrlichkeit.*
8. **Der Leitsatz** immer in Anführungszeichen wörtlich:
   „Wir wollen mit Freude Geschäfte betreiben, an denen alle Beteiligten gewinnen."
9. **Fira Sans für alles**, Merriweather Italic nur für emotionale Zitate und
   ein einzelnes Wort inline in Sans-Headlines.
10. **Photography-Style:** Warm-Dämmerung, tiefes Nachtblau + warmes Innenlicht-Orange,
    nasser Asphalt-Reflexion. Kein Studio-Look, keine Stock-Klischees.

## Suggested usage

Für ein neues Südramol-Artefakt:

1. `colors_and_type.css` verlinken.
2. Dominante Sektions-Farbe wählen: `--sued-blue` (Hero/Footer), `--cream` (Body),
   `--sued-orange` (Signal-CTA). Nie Blau UND Orange als Background gleichzeitig.
3. Sektion öffnen mit einem Eyebrow (Orange uppercase small-caps) +
   Fira-Sans-Headline (700 Weight, ein Wort optional in Merriweather Italic) +
   Lede (17-20px Fira Sans).
4. Zahlen mit `.ds-stat-num` und `.ds-stat-label`.
5. CTAs immer `.ds-btn--primary` (Pill, Orange) für die Haupt-Aktion.
6. Komponenten aus `ui_kits/website/` forken statt neu erfinden.