Markenhaltung

Diese Seite legt fest, wie sich Mittelstand Vernetzt auftritt, bevor es um konkrete Designumsetzungen oder -anpassungen geht. Die Markenhaltung beantwortet nicht, welche Farben verwendet werden, sondern: welche Wirkung die Anwendung vermitteln soll? Mittelstand Vernetzt ist ein Arbeitswerkzeug, kein Marketing-Auftritt. Es soll professionell, ruhig, klar, zugänglich, effizient und vertrauenswürdig wirken.

Sie ist der Maßstab, an dem neue Oberflächen und Texte gemessen werden. Die konkreten visuellen Werte stehen in Farben & Typografie und Design-Tokens. Was das Produkt fachlich ist (Rollen, Zugang etc.), steht in Kernkonzepte.

Markenidentität

Mittelstand Vernetzt ist ein Veranstaltungsportal des Mittelstand-Digital Zentrum Lingen.Münster.Osnabrück, ein geschlossener, seriöser, souveräner Raum für Veranstaltungen. Die Identität ist die einer öffentlich geförderten Einrichtung, die zugleich zugänglich und modern auftritt, nicht die einer werblichen SaaS-Plattform.

Diese Haltung zeigt sich in jeder Gestaltungsentscheidung, ruhig statt laut, sachlich statt verspielt, nachvollziehbar statt effekthascherisch. Aktuelle technologische Standards sorgen für eine einfache, intuitive Bedienung.

Logo und Wortmarke

Das visuelle Erkennungsmerkmal von Mittelstand Vernetzt besteht aus der Bildmarke (den Tropfen) und der Wortmarke, orientiert an der Förderinitiative Mittelstand-Digital und den Mittelstand-Digital Zentren Deutschlandweit.

Hauptlogo

Schwarz #000000 Rot #CD141E Gold #FFCC00

Das Logo verbindet ein Knoten-/Verbindungsmotiv aus zwei Tropfen mit der Wortmarke „Mittelstand Vernetzt”. Das Wort „Vernetzt” ist in der Schriftart Manrope SemiBold gesetzt, seine Silbe „netzt” rot nach gold getönt. Damit greift das Motiv die Triade von Mittelstand-Digital auf. Es erscheint in Header und Login. Alle Assets liegen unter apps/web/public/brand/.

App-Icon

app-icon 512

192

apple-touch

favicon 32

favicon 16

Das App-Icon nutzt die Bildmarke ohne Wortmarke über alle Größen (wie PWA-Icons, Apple-Touch und Favicons). Der sog. Tropfen ist die Signatur-Markenform (abgerundet quadratisch, oben rechts eckig) und an Mittelstand-Digital sowie die Mittelstand-Digital Zentren angelehnt. In seiner doppelten Ausführung symbolisiert er als Verbindungsmotiv die Vernetzung zwischen und mit Nutzer:innen innerhalb der Anwendung.

Plattform-Logo

Das Plattform-Logo sitzt im Footer und beinhaltet den Schriftzug „Eine Plattform des” und den Träger, das Mittelstand-Digital Zentrum Lingen.Münster.Osnabrück.

Markenwerte

Die zentralen Eigenschaften, jeweils mit ihrer Bedeutung für Gestaltung und Text:

• Seriös: Sachlicher Ton, keine werbliche Übertreibung, keine Ausrufezeichen.
• Vertrauenswürdig: Nachvollziehbare Zustände und Aktionen, nichts Verstecktes.
• Klar: Eine Sache pro Ansicht im Vordergrund, scanbare Struktur.
• Datenschutzkonform: Souveränität und DSGVO-Konformität sind Teil des Versprechens, kein Kleingedrucktes.
• Zugänglich: Verständliche Sprache, lesbare Kontraste, Tastaturbedienung.
• Effizient: Optimiert für Wiederholungstätigkeiten in den Admin-Bereichen.

Zielgruppe und Nutzererwartung

Die Anwendung richtet sich an Teilnehmende an Veranstaltungen von Mittelstand-Digital sowie an das Management, die Veranstaltungen betreiben. Die Rollen im Detail stehen in Kernkonzepte.

Erwartet wird:

• schnelle Orientierung ohne Einarbeitung,
• klare, vorhersagbare Prozesse,
• wenig Ablenkung,
• verständliche Fehlermeldungen,
• ein seriöses, vertrauenswürdiges Auftreten.

Tonalität und Sprache

So spricht die Anwendung in Buttons, Hinweisen, Fehlermeldungen, Empty States und Hilfetexten:

• Integrativ: Primärsprache ist Deutsch. Übersetzungen in Englisch und Ukrainisch fördern die Zugänglichkeit und Integration (siehe Mehrsprachigkeit).
• Formell, aber warm: Die Nutzer:innen werden implizit gesiezt. Nicht geschwätzig, kein „Hey!”, keine Marketing-Ausrufezeichen.
• Knapp und handlungsorientiert: Buttons sind kurze Verb- oder Nomen-Phrasen: Anmelden, Bestätigen, Ablehnen, Zum Event, Speichern, Veröffentlichen.
• Erklärend, wo es hilft: Hilfetexte sind ruhig und konkret, nicht belehrend.
• Kein Emoji: Bedeutung und Status tragen Lucide-Linien-Icons und Farbe, niemals Emoji. Das gilt überall, auch in dieser Doku.
• Deutsche Formate: Datum als „28. Mai 2026”, Uhrzeit als „14:30”. Das Format wechselt mit der Locale.

Visueller Charakter

Der Eindruck ist ruhig, neutral, institutionell-aber-modern: eine graustufige Fläche mit einer klaren Akzentuierung. Neben dem Primärrot (#CD141E) für globale Highlights und Kernbereiche kommen in den verschiedenen Themenbereichen gezielte Abschnittsfarben zum Einsatz. Gewünscht sind ein reduziertes Layout, viel Weißraum, klare Kontraste, dezente Schatten (Hairline-Rahmen im Ruhezustand, Schatten erst bei Hover), ruhige Farben und konsistente Abstände.

Auf dekorative Verläufe, Effekte oder Illustrationen wird verzichtet. Alle Flächen sind flach und solide gehalten. Die einzige illustrierte Fläche ist der Login-Hintergrund. Die konkreten Werte (Palette, Radien, Motion) stehen in Farben & Typografie und Design-Tokens.

UI-Haltung

Wie sich die Oberfläche anfühlen soll: direkt, ruhig, unterstützend, nicht verspielt und nicht überladen. Daraus folgen konkrete Regeln:

• Primäre Aktion hervorheben. Falls eine Ansicht eine primäre Aktion hat, diese klar betonen (z. B. Speichern, Absenden) über section-submit in der Abschnittsfarbe. Sekundäres bleibt zurückhaltend.
• Kritische Aktionen visuell absichern (Bestätigung, rote Kennzeichnung destruktiver Buttons).
• Keine Karten in Karten: ungerahmte Abschnitte oder Listen bevorzugen.

Das UI-Verhalten im Detail steht in Komponenten und Patterns.

Vertrauenssignale

Vertrauen entsteht durch Nachvollziehbarkeit, nicht durch Schmuck:

• Klare Zustände: aktiv, Entwurf, ausstehend, abgelehnt, archiviert sind als Badges sofort erkennbar.
• Nachvollziehbare Aktionen mit Rückmeldung (Statusmeldung nach dem Speichern).
• Bestätigung bei kritischen Vorgängen statt sofortigem, stillem Löschen.
• Transparente Upload- und Löschprozesse: sichtbarer Fortschritt, Zugriff nur für zugeordnete Teilnehmende (Zero-Trust).
• Sichere Authentifizierung ohne Registrierungshürden und Passwörter (Login direkt per Magic-Link).
• Konsistente Fehlermeldungen im gleichen Muster und Ton.

Umgang mit Fehlern und leeren Zuständen

In schwierigen Situationen bleibt die Marke ruhig und hilfreich:

• Fehlertexte sind konkret, ruhig und lösungsorientiert. Sie beginnen mit „Bitte” und benennen das betroffene Feld (Wording-Regeln in Patterns → Validierung & Wording).
• Empty States erklären kurz, was fehlt, und nennen die sinnvolle nächste Aktion. Eine ruhige, zentrierte Zeile in einer gerahmten Karte, keine illustrationslastige „Empty Hero” (siehe Patterns → Empty States).

Gestaltungsregeln

Richtlinie	Typ
Klar und konkret schreiben: Präzise Bezeichnungen und verständliche Texte verwenden.
Primäre Aktion hervorheben: Falls vorhanden, die wichtigste Aktion klar betonen (z. B. Speichern, Absenden).
Ruhige Brand- und Neutralfarben: Eine zurückhaltende Farbpalette für Standard-Zustände einsetzen.
Solide Badges mit weißem Text: Klare Kennzeichnungen mit ausreichendem Kontrast nutzen.
Bedeutung über Icon + Farbe + Text: Informationen barrierefrei und redundant codieren.
Destruktive Aktionen absichern: Kritische Operationen durch Bestätigungsabfragen schützen.
Flache, solide Flächen: Klare Konturen und reduzierten Weißraum bevorzugen.
Vage Systemmeldungen: Unklare Fehlertexte ohne Lösungsvorschläge anzeigen.
Mehrere gleich starke Call-to-Actions: Nutzende durch konkurrierende Hauptaktionen verwirren.
Signalfarben für normale Zustände: Warn- oder Akzentfarben unbedacht einsetzen.
Blasse bg-*/10-Töne: Schlecht lesbare Textkontraste bei Badges erzeugen.
Emoji als Status- oder Bedeutungsträger: Emojis statt funktionaler Icons verwenden.
Sofortiges Löschen ohne Rückfrage: Datenverlust durch voreilige Aktionen riskieren.
Dekorative Verläufe, Effekte oder Illustrationen: Visuelles Rauschen durch verspieltes Design erzeugen.

Siehe auch

• Farben & Typografie: Palette, Theme, Schriften
• Design-Tokens: Radius, Abstände, Tropfen, Bewegung
• Komponenten: Die UI-Bausteine
• Patterns: Wie Oberflächen zusammengesetzt werden