Markengold
#C99A32Steht für Wertigkeit, Wärme und besondere Aufmerksamkeit. Es kennzeichnet Akzente und ausgewählte Aktionen; mit 30 % Deckkraft entstehen sanfte Goldflächen.
Mission Sauber Designsystem
Styleguide
Dieser Leitfaden zeigt, wie Mission Sauber visuell auftritt: hochwertig, klar und persönlich. Farben, Schriften und Komponenten bilden gemeinsam einen wiedererkennbaren Gesamtauftritt.
So verwenden Sie diesen Styleguide
- 1.Den passenden Bereich über das Inhaltsverzeichnis auswählen.
- 2.Komponenten passend zur Bedeutung des Inhalts einsetzen.
- 3.Farben, Abstände und Hierarchien konsequent beibehalten.
Grundlagen
Farben
Die Farbwelt verbindet die Wärme des Goldtons mit der Klarheit dunkler Neutralfarben. Helle, leicht warme Flächen sorgen dafür, dass die Website hochwertig statt kühl oder technisch wirkt.
Tiefschwarz
#11110FVermittelt Klarheit, Verlässlichkeit und Präzision. Es ist die Hauptfarbe für Texte und primäre Buttons.
Leinwand
#FDFCF8Der warme Grundton ersetzt hartes Reinweiß auf größeren Flächen und gibt der Gestaltung eine ruhige, freundliche Basis.
Warme Fläche
#F6F4EEGliedert Sections und Cards dezent voneinander ab. Der Ton schafft Tiefe, ohne mit Inhalten zu konkurrieren.
Anthrazit
#181816Wird gezielt für starke Kontrastbereiche verwendet. Es verleiht Referenzen und besonderen Botschaften mehr Gewicht.
Reinweiß
#FFFFFFWird für Cards und klar abgegrenzte Inhaltsflächen verwendet. So heben sie sich behutsam von den warmen Seitentönen ab.
Gedämpfter Text
#5D5B56Bildet die zweite Leseebene für Beschreibungen und ergänzende Informationen, ohne an Lesbarkeit zu verlieren.
Linienfarbe
#DEDBD2Strukturiert Cards, Sections und Trennlinien zurückhaltend. Sie sorgt für Ordnung, ohne sichtbare Härte zu erzeugen.
Grundlagen
Bildwelt
Eine wiederkehrende Person macht Mission Sauber persönlich und glaubwürdig. Die Motive verbinden echte Arbeitssituationen mit einer hellen, hochwertigen und aufgeräumten Bildsprache.
Dateistandard: Bilder werden als hochauflösende JPG-Dateien in Qualitätsstufe 100 angeliefert. Zuschnitte und technische Optimierung übernimmt anschließend das CMS.
Leitmotiv
Arbeit sichtbar machen
Weite, ruhige Motive eignen sich für Hero- und große Servicebereiche. Die Person bleibt klar erkennbar, während Umgebung und Tätigkeit genügend Kontext geben.
Portrait
Für Unternehmen, Qualität und persönliche Ansprache.
Bodenpflege
Technik und fachgerechte Ausführung stehen im Mittelpunkt.
Unterhaltsreinigung
Authentische Arbeitsszenen für regelmäßige Leistungen.
Detailarbeit
Nähere Ausschnitte zeigen Sorgfalt und Handarbeit.
Hygiene
Saubere Materialdetails vermitteln Präzision und Ruhe.
Express Service
Bewegung und Ausrüstung vermitteln schnelle Einsatzbereitschaft.
Natürlich: echte Arbeitshaltung statt gestellter Werbeposen.
Konsistent: dieselbe Person, Kleidung und Farbwirkung.
Aufgeräumt: helle Architektur und klar erkennbare Tätigkeit.
Grundlagen
Typografie
Die Typografie bleibt bewusst sachlich, kräftig und direkt. Große Überschriften schaffen Präsenz, während großzügige Zeilenhöhen längere Inhalte ruhig und gut lesbar halten.
Display / Hero
Für die zentrale Aussage am Seitenanfang. Nur einmal pro Seite.
Sauberkeit mit
Premium-Anspruch
36–60 px · 800 · Zeilenhöhe 1.08 · Laufweite −3.5 %
Section Headline
Leitet einen neuen großen Inhaltsbereich ein.
Qualität, die man sieht. Service, den man spürt.
30–48 px · 800 · enge Laufweite
Card Headlines
Zwei Größen für breite und kompakte Cards.
Unterhaltsreinigung
Card groß · 30–36 px
VIP Express Service
Card kompakt · 20–24 px
Labels
Orientierung, Kategorie und Kontext.
Qualität & Unternehmen
Eyebrow · 14 px · 700
Spezialgebiet
Overline · 12 px · 800 · Versalien
Fließtext
Drei Stufen für Einführung, Inhalt und Zusatzinformation.
Mission Sauber verbindet persönliche Abstimmung mit klaren Abläufen.
Lead · 18 / 32 px
Umfang und Vorgehen werden passend zu den tatsächlichen Anforderungen abgestimmt.
Body · 16 / 28 px
Zusatzinformationen bleiben sichtbar, drängen sich aber nicht in den Vordergrund.
Small · 14 / 24 px
Komponenten
Cards
Cards gruppieren Inhalte zu klaren Einheiten. Je nach Aufgabe arbeiten sie mit Bild, Icon oder einer starken typografischen Idee – Text bleibt immer der Mittelpunkt.
3-Spalten-Raster
Kompakte Cards für schnelle Orientierung
Kurze Inhalte, ein klarer Gedanke pro Karte und eine reduzierte Aktion. Ab breiten Ansichten stehen drei Cards nebeneinander.
Vorteil mit Icon
Zuverlässig geplant.
Ein klarer Ablauf und feste Absprachen schaffen Sicherheit im täglichen Betrieb.
Prozess
Bedarf verstehen
Objekt, Flächen und Anforderungen werden zuerst gemeinsam geklärt.
Der erste Schritt zum klaren Ablauf.
Leistung mit Bild
Glasreinigung
Klare Sicht und gepflegte Flächen für einen überzeugenden ersten Eindruck.
Leistung ansehen1-Spalten-Raster
Lange Card für zentrale Inhalte
Die gesamte verfügbare Breite wird genutzt. Bild und Text dürfen ausführlicher sein und stehen auf großen Ansichten nebeneinander.
Hervorgehobene Karte
Qualität, die man sieht.
Für zentrale Inhalte mit größerem Informationsbedarf. Auf breiten Ansichten stehen Bild und Text nebeneinander.
2-Spalten-Raster
Cards mit mehr Raum für Charakter
Zwei Cards pro Reihe erlauben stärkere Typografie, längere Texte und abwechslungsreiche Bildaufteilungen.
Editorial Card
Persönlich abgestimmt.
Professionell umgesetzt.
Eine ruhige, textstarke Karte für Leitgedanken, Qualitätsversprechen oder prägnante Zwischenbotschaften.
Kompakte Bildkarte
VIP Express Service
Für kurzfristigen Bedarf, wenn eine schnelle und klare Abstimmung zählt.
Service ansehenKomposition
Section-Beispiele
Sections geben den Komponenten Rhythmus und Kontext. Die folgenden Muster können je nach Inhalt kombiniert werden, ohne dass jede Seite gleich aufgebaut wirkt.
Section 01
Bild und Inhalt
Für Qualität, Unternehmen oder eine zentrale Leistung
Qualität & Unternehmen
Service, den man spürt.
Persönliche Abstimmung und klare Abläufe bilden die Grundlage für eine passende Reinigungslösung.
- Planbare Abläufe
- Direkte Kommunikation
Section 02
Zentrierter Fokus
Für CTA, Einstieg oder Abschluss eines Themenblocks
Individuell statt von der Stange
Die passende Lösung für Ihr Objekt.
Ein klarer, konzentrierter Abschnitt lenkt den Blick auf eine zentrale Botschaft und höchstens zwei nächste Schritte.
Section 03
Argumente im Raster
Für Vorteile, Prozessschritte oder Leistungsmerkmale
Was uns wichtig ist
Klar in jedem Schritt.
Drei gleichwertige Argumente erhalten durch Icons, kurze Titel und ruhige Beschreibungen eine klare Ordnung.
Persönlich
Direkte Ansprechpartner und verständliche Kommunikation.
Planbar
Leistungsumfang und Rhythmus werden klar vereinbart.
Gründlich
Die Ausführung orientiert sich am tatsächlichen Bedarf.
Section 04
Dunkler Kontrast
Für Referenzen, starke Botschaften oder besondere Angebote
Sauberkeit im Objekt
Der erste Eindruck beginnt mit gepflegten Flächen.
Die dunkle Fläche schafft einen bewussten Rhythmuswechsel und gibt einer ausgewählten Botschaft besonderes Gewicht.