Aufbau

Die E-Mail-Signatur folgt einem einheitlichen, tabellenbasierten HTML-Layout mit folgenden Bereichen:

Mit freundlichen Grüßen / Best regards
Vorname Nachname

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← 3 px Orange (#FF8500)
┌──────┐
│ Foto │  Vorname DE | Vorname EN
│50×50 │  Position DE | Position EN
└──────┘
  📞 +49 9971 20098-199
  📱 +49 170 1234567
  📠 +49 9971 20098-4199
  ✉️  vorname.nachname@bauer-group.com
  💬 Teams Chat

  📆 Terminbuchung / Appointment booking

  🔗 Social-Media-Icons (20×20 px)
──────────────────────────────  ← 1 px Trennlinie
  BAUER GROUP IT GmbH
  Janahof 30 · 93413 Cham · Deutschland
  Telefon · Telefax · E-Mail · Web
  Handelsregister · Geschäftsführer · USt-IdNr
──────────────────────────────  ← 1 px Trennlinie
  Vertraulichkeitshinweis (DE + EN)
  Sicherheitswarnung (DE + EN)
  🔒 Datenschutz-Link

Bereiche im Detail

1. Grußformel

Oberhalb der Signatur-Tabelle steht die Grußformel als normaler Absatz. Bei mehrsprachigen Signaturen werden die Sprachen mit / getrennt.

Der Name des Absenders folgt darunter mit etwas Abstand.

2. Orange Akzentlinie

Die Signatur-Tabelle beginnt mit einer 3 px starken Linie in BAUER Orange (#FF8500). Diese Linie ist das primäre Branding-Element und darf nicht verändert werden.

3. Mitarbeiter-Bereich

Bei mehrsprachigen Signaturen werden Name und Position mit | getrennt dargestellt:

Maxi DE | Max EN Esel | Donkey

4. Kontaktdaten

Kontaktdaten werden unterhalb des Fotos mit Emoji-Icons aufgelistet:

• Schriftgröße: 12 px, Farbe #3F3F46
• Icon-Spalte: 18 px breit, Farbe #A1A1AA
• Alle Kanäle sind optional und pro Unternehmen konfigurierbar

5. Terminbuchung

Optional kann ein Buchungslink angezeigt werden:

📆 Terminbuchung / Appointment booking

• Farbe: #C2570A, fett für die Primärsprache
• Unterstützt Microsoft Bookings und HubSpot

6. Social-Media-Icons

Social-Media-Profile werden als 20 × 20 px Icons in BAUER Orange dargestellt. Alle Icons sind verlinkt und öffnen im neuen Tab.

Unterstützte Netzwerke:

• Icons sind pro Mitarbeiter konfigurierbar
• Reihenfolge ist festgelegt (professionell → social → messaging → bewertungen)

7. Unternehmensblock

Unterhalb einer dünnen Trennlinie (1 px solid #E4E4E7) folgt der Unternehmensblock:

Die Angaben sind pro Unternehmen und Sprache konfigurierbar.

8. Rechtliche Angaben

Unterhalb der Kontaktdaten folgen die gesetzlich vorgeschriebenen Angaben. Diese variieren je nach Jurisdiktion:

• Schriftgröße: 10 px, Farbe #A1A1AA

9. Disclaimer

Der Disclaimer enthält vier Abschnitte in zwei Sprachen:

1. Vertraulichkeitshinweis (DE)
2. Sicherheitswarnung (DE)
3. Confidentiality note (EN)
4. Safety warning (EN)

• Schriftgröße: 9 px, Farbe #A1A1AA
• Überschriften fett
• Disclaimer-Texte sind pro Unternehmen konfigurierbar

10. Datenschutz-Link

Am Ende der Signatur steht ein Link zur Datenschutzerklärung:

🔒 Unsere Informationen zum Datenschutz / Privacy Policy

• Schriftgröße: 9 px, unterstrichen

Technische Spezifikationen

Regeln

• Die Orange Akzentlinie (#FF8500) ist Pflicht und darf nicht verändert werden
• Keine externen Stylesheets — nur Inline-CSS
• Keine JavaScript-Handler in der Signatur
• Alle Links müssen HTTPS verwenden (außer tel: und mailto:)
• Mitarbeiterfoto ist optional, aber empfohlen
• Social-Media-Icons werden nur angezeigt, wenn ein Profil hinterlegt ist
• Die Signatur muss in Outlook, Gmail, Apple Mail und Thunderbird korrekt dargestellt werden

Mehrsprachigkeit

Die Signatur unterstützt mehrere Sprachzonen, die unabhängig voneinander konfiguriert werden:

Für Arabisch wird automatisch die Textrichtung direction: rtl gesetzt.

Farbpalette

Doppelseitige Visitenkarten der BAUER GROUP — Vorderseite in der primären Sprache (Deutsch oder Chinesisch), Rückseite in Englisch. Jede Karte enthält einen personalisierten QR-Code zum LinkStack-Profil des Mitarbeiters.

Sprachvarianten

Spezifikationen

Layout — Vorderseite (Primärsprache)

Telefonnummern-Format

Vorwahlen werden ohne Klammern dargestellt:

Layout — Rückseite (Englisch)

Gleiches Layout wie Vorderseite, alle Texte in Englisch (Germany, Phone, Managing Director etc.).

QR-Code & LinkStack

Jede Visitenkarte enthält einen personalisierten QR-Code, der zum individuellen LinkStack-Profil des Mitarbeiters führt.

Downloads

Richtlinien und Spezifikationen für physische Markenmaterialien der BAUER GROUP. Für digitale Medien siehe Digitale Medien.

Produktübersicht

Geschäftsausstattung

Visitenkarten, Stempel und Briefpapier sind unter Print & Geschäftsausstattung dokumentiert.

Druckmaterialien

Werbeartikel

Textilien & Haushalt

Detailspezifikationen

Notizblöcke (Haftnotizen)

Kugelschreiber

Mappen

DIN-Lang (Verschlusslasche)

DIN-A4 (Visitenkartenschlitz)

Feuerzeuge

Taschen

Handtücher

Tassen

Klebeetiketten

Logo-Farbspezifikation (Print)

Verbindliche Farbwerte für alle Druckmaterialien:

Telefonnummern-Format

Vorwahlen werden ohne Klammern dargestellt. Gilt einheitlich für alle Geschäftsdrucksachen.

Canva-Einbettung

Entwürfe werden in Canva erstellt und können als Live-Embed im Brand Guide eingebettet werden. Vollständige Anleitung: Canva Design-Workflow →

Allgemeine Druckhinweise

Alle Druckmaterialien folgen den Spezifikationen aus Print & Produktion:

• Farben: CMYK-Werte verwenden, kein RGB
• Sonderfarbe: Pantone PMS 144 C (wo möglich)
• Papier: Siehe Papierempfehlungen
• QR-Codes: Immer über go.bauer-group.com — siehe QR-Code-Regeln

Die BAUER GROUP nutzt Canva als zentrale Design-Plattform für Print-Materialien, Werbemittel und digitale Inhalte. Fertige Entwürfe werden über Canva-Embed-Links direkt in diese Brand Guide eingebettet.

Warum Canva?

Einsatzbereiche

Einbettung im Brand Guide

Canva bietet native Embed-Links, die als iframe in VitePress-Seiten eingebettet werden können. Änderungen am Design in Canva werden automatisch live übernommen — kein manueller Export oder Re-Upload nötig.

Schritt-für-Schritt

1. Design in Canva öffnen
2. Teilen (oben rechts) klicken
3. Mehr … → Einbetten wählen
4. Smart Embed Link kopieren
5. In die entsprechende Markdown-Seite einfügen

Embed-Code Vorlage

<!-- Canva Embed — 16:9 (Standard) -->
<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;">
  <iframe src="https://www.canva.com/design/DESIGN_ID/view?embed"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    allowfullscreen></iframe>
</div>

Seitenverhältnisse

Beispiel: Visitenkarte einbetten

## Aktueller Entwurf

<div style="position:relative;width:100%;max-width:500px;height:0;
  padding-bottom:64.7%;margin:24px auto;">
  <iframe src="https://www.canva.com/design/DEIN_DESIGN_ID/view?embed"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;
    border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.12);"
    allowfullscreen></iframe>
</div>

Regeln & Hinweise

Referenzen

Seiten mit Canva-Einbettungen:

• Visitenkarten — Doppelseitige Visitenkarten (DE/EN, CN/EN)
• Werbemittel-Übersicht — Übersicht aller Werbemittel

Canva Brand Kit

Das BAUER GROUP Brand Kit in Canva enthält:

Vollständiges CSS Custom Properties Set für die Implementierung des BAUER GROUP Designsystems.

Komplettes Token Set

:root {
  /* ─── Primary: Orange ─── */
  --orange-50: #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #FF8500;  /* Brand Primary */
  --orange-600: #EA6D00;
  --orange-700: #C2570A;  /* Text AA */
  --orange-800: #9A4509;  /* Text AAA */
  --orange-900: #7C3A0A;

  /* ─── Warm Gray (Unterstützende Farben) ─── */
  --warm-50: #F9F8F6;
  --warm-100: #F0EDEA;
  --warm-200: #E0DBD6;
  --warm-300: #C4BDB7;
  --warm-400: #A69E97;
  --warm-500: #887F78;
  --warm-600: #6B635C;   /* Body Text AA */
  --warm-700: #524B45;   /* Strong Text AAA */
  --warm-800: #3A3430;   /* Headlines, Brand Dark */
  --warm-900: #231F1C;   /* Brand Black */

  /* ─── Neutral Gray (Print / Technisch) ─── */
  --gray-50: #F7F7F7;
  --gray-100: #EBEBEB;
  --gray-200: #D1D1D1;     /* Print-Raster */
  --gray-300: #B8B8B8;
  --gray-400: #9E9E9E;
  --gray-500: #7F7F7F;     /* Print-Akzentbalken */
  --gray-600: #666666;
  --gray-700: #4D4D4D;
  --gray-800: #333333;
  --gray-900: #1C1C1C;

  /* ─── Brand Neutrals ─── */
  --brand-white: #FFFFFF;
  --brand-light: #F9F8F6;  /* = Warm 50 */
  --brand-dark: #3A3430;    /* = Warm 800 */
  --brand-black: #231F1C;   /* = Warm 900 */

  /* ─── Semantisch ─── */
  --success-100: #DCFCE7;  --success-500: #22C55E;  --success-700: #15803D;
  --warning-100: #FEF9C3;  --warning-500: #EAB308;  --warning-700: #A16207;
  --error-100: #FEE2E2;    --error-500: #EF4444;    --error-700: #B91C1C;
  --info-100: #DBEAFE;     --info-500: #3B82F6;     --info-700: #1D4ED8;

  /* ─── Akzent ─── */
  --accent-blue: #2563EB;
  --accent-teal: #0D9488;
  --accent-amber: #D97706;
  --accent-indigo: #6366F1;

  /* ─── Semantische Aliase ─── */
  --text-primary: var(--warm-900);
  --text-secondary: var(--warm-600);
  --text-muted: var(--warm-500);
  --text-disabled: var(--warm-400);

  --bg-primary: #FFFFFF;
  --bg-subtle: var(--warm-50);
  --bg-muted: var(--warm-100);

  --border: var(--warm-200);
  --border-strong: var(--warm-300);

  /* ─── Typography ─── */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code",
    "Segoe UI Mono", Consolas, monospace;
}

Verwendung

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
}

h1, h2, h3 {
  color: var(--warm-800);
}

a {
  color: var(--orange-700);  /* AA-konform */
}

.btn-primary {
  background: var(--orange-500);
  color: white;
}

Die BAUER GROUP definiert vier Markenneutralen als feste Referenzpunkte. Diese sind aus der Warm-Gray-Skala abgeleitet und bilden die Eckpfeiler für Hintergrund-, Text- und Flächengestaltung.

Brand-Neutrals

Spezifikation

Mapping zur Warm-Gray-Skala

Die Brand-Neutrals sind direkte Referenzpunkte aus der Warm-Gray-Skala — kein Mapping-Abstand wie bei separaten Systemen.

Barrierefreiheit

Anwendungsbeispiele

Sektions-Wechsel

Komplette Markenfarbpalette

Print & Produktion

CSS Custom Properties

:root {
  --brand-white: #FFFFFF;
  --brand-light: #F9F8F6;  /* = Warm 50 */
  --brand-dark: #3A3430;    /* = Warm 800 */
  --brand-black: #231F1C;   /* = Warm 900 */
}

Orange Skala

Warm-Gray Skala

Neutral-Gray Skala

Rein neutrale Grautöne (Sättigung 0%) — bewährt in Print-Materialien (Rasterlinien, technische Elemente, Akzentbalken). Referenzwerte aus den Schreibblöcken.

CSS Custom Properties

:root {
  --orange-50: #FFF7ED;   --orange-100: #FFEDD5;
  --orange-200: #FED7AA;  --orange-300: #FDBA74;
  --orange-400: #FB923C;  --orange-500: #FF8500;
  --orange-600: #EA6D00;  --orange-700: #C2570A;
  --orange-800: #9A4509;  --orange-900: #7C3A0A;

  --warm-50: #F9F8F6;     --warm-100: #F0EDEA;
  --warm-200: #E0DBD6;    --warm-300: #C4BDB7;
  --warm-400: #A69E97;    --warm-500: #887F78;
  --warm-600: #6B635C;    --warm-700: #524B45;
  --warm-800: #3A3430;    --warm-900: #231F1C;

  --gray-50: #F7F7F7;     --gray-100: #EBEBEB;
  --gray-200: #D1D1D1;    --gray-300: #B8B8B8;
  --gray-400: #9E9E9E;    --gray-500: #7F7F7F;
  --gray-600: #666666;    --gray-700: #4D4D4D;
  --gray-800: #333333;    --gray-900: #1C1C1C;
}

Firmenstempel der BAUER GROUP — einfarbiger Abdruck in Schwarz mit Logo, Firmenadresse und Kontaktdaten.

Vorschau

Firmenstempel

Einfarbig Schwarz

Spezifikationen

Gestaltung

* Aktueller Druck verwendet Klammern um die Vorwahl. Bei Neudruck: Vorwahlen ohne Klammern (siehe Visitenkarten → Telefonnummern-Format).

Downloads

Die BAUER GROUP Schreibblöcke sind in zwei Formaten verfügbar: DIN A5 und DIN A6. Beide folgen einem einheitlichen Layout-System mit Logo, QR-Code, Rastergitter und Fußzeile.

Vorschau

DIN A5

148 × 210 mm

DIN A6

105 × 148 mm

Formate & Spezifikationen

Layout-Aufbau

Beide Formate folgen exakt demselben Layout — skaliert auf die jeweilige Blattgröße.

Kopfbereich

Schreibfläche

Fußbereich

QR-Codes

Jeder Schreibblock hat einen individuellen QR-Code mit produktspezifischer URL über den BAUER GROUP URL-Shortener.

QR-Code-Regeln (alle Printmaterialien)

1. Mindestgröße: 10 × 10 mm (für zuverlässiges Scannen)
2. Ruhezone: Mindestens 2 mm weißer Rand um den QR-Code
3. Farbe: Schwarz auf Weiß — kein Orange, kein invertierter Hintergrund
4. Fehlerkorrektur: Level M (15%) oder höher
5. Icon-Begleitung: Immer mit Info- oder Scan-Icon versehen
6. URL: Immer go.bauer-group.com/... verwenden, keine direkten Lang-URLs

Druckspezifikation

Weitere Druckhinweise: Print & CMYK · Papierempfehlungen

Downloads

Elektronik-Feuerzeuge in Weiß mit zweifarbigem Logo-Druck (Pantone Sonderfarben).

Vorschau

Elektronik-Feuerzeug

Weiß, Sonderfarben-Druck

Spezifikationen

Gestaltung

Druckfarben

Downloads

Quadratische Haftnotizen im BAUER GROUP Design. Das Layout folgt dem gleichen System wie die Schreibblöcke — angepasst auf das kleinere Format.

Vorschau

Haftnotiz

72 × 72 mm

Spezifikationen

Layout-Aufbau

QR-Code

Druckspezifikation

Downloads

Offizieller Werbekugelschreiber der BAUER GROUP — Klio-Eterna Cello softtouch Ms mit Soft-Touch-Oberfläche.

Vorschau

Druckfreigabe Klio-Eterna

Artikel 60286 Cello softtouch Ms

Spezifikationen

Gestaltung

Clip-Detail (200% vergrößert)

Das Logo auf dem Clip zeigt die vollständige Wide-Variante: orange Bildmarke (Raute + "B") links, Wortmarke "BAUER GROUP" rechts.

Downloads

Die BAUER GROUP verwendet zwei Mappenformate: DIN-Lang (mit Verschlusslasche) und DIN-A4 (mit Visitenkartenschlitz). Beide sind professionell gestaltet mit Fotomotiven, Logo und QR-Code.

Vorschau

Mappe DIN-Lang (Verschlusslasche)

Druckvorlage

Stanzansicht

Mappe DIN-A4 (Visitenkartenschlitz)

Druckvorlage

Stanzansicht

Spezifikationen

Gestaltung

Gemeinsame Elemente

QR-Codes

Druckspezifikation

Downloads

Mappe DIN-Lang

Mappe DIN-A4

Weiße Baumwolltaschen mit großem "B"-Bildmarke-Aufdruck in BAUER Orange — einfarbiger Druck für maximale Wirkung.

Vorschau

Baumwolltasche

Druckfläche 200 × 200 mm

Spezifikationen

Gestaltung

Downloads

Akzentfarben ergänzen das Orange-Grau-Farbsystem für Visualisierungen, Diagramme, Tags und andere Unterscheidungsmerkmale. Sie wurden bewusst gewählt, um die Primärfarbe Orange zu komplementieren — nicht zu überlagern.

Farbpalette

Zusammenspiel mit Orange

Warum diese Farben?

Diagramm-Reihenfolge

Anwendungsregeln

1. Akzentfarben sind nie die dominante Farbe — sie ergänzen Orange
2. Maximal 2 Akzentfarben pro Ansicht verwenden
3. Akzentfarben werden primär in Datenvisualisierungen eingesetzt
4. Blue ist die bevorzugte Akzentfarbe für interaktive Elemente
5. Amber nur einsetzen, wenn genug visueller Abstand zu Orange besteht

Die Primärfarbe der BAUER GROUP ist Orange (#FF8500). Sie steht für Energie, Innovation und Wärme und ist das zentrale Identitätsmerkmal der Marke.

BAUER Orange — #FF8500

Anwendung

Als Hintergrundfarbe

Als Textfarbe

Unterstützende Farben — Warme Grautöne

Die BAUER GROUP setzt auf ein monochromatisches Farbschema: Orange ist die einzige chromatische Farbe. Alle unterstützenden Töne basieren auf warm getönten Grautönen (Hue ≈28°), die mit Orange natürlich harmonieren.

→ Vollständige Warm-Gray-Dokumentation mit Skala und Anwendungsregeln

Die BAUER GROUP setzt auf ein monochromatisches Farbschema: Orange ist die einzige chromatische Markenfarbe. Alle unterstützenden Farbtöne basieren auf warm getönten Grautönen (Hue ≈28°, Sättigung ≈6%), die mit Orange eine natürliche Farbtemperatur-Harmonie bilden.

Designprinzip

Referenzfarben

Warm-Gray-Skala

Die 10-Stufen-Skala verwendet OKLCH-basierte Helligkeitsverteilung für perceptuell gleichmäßige Abstände. Alle Stufen teilen denselben warmen Grundton (Hue ≈28°).

Vollständige Werte

50  ████████████████████████████████████████████████  0.97
100 ███████████████████████████████████████████████░  0.94
200 ████████████████████████████████████████████░░░░  0.88
300 ███████████████████████████████████████░░░░░░░░░  0.79
400 ██████████████████████████████████░░░░░░░░░░░░░░  0.68
500 ████████████████████████████░░░░░░░░░░░░░░░░░░░░  0.57
600 ███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░  0.47
700 ███████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  0.38
800 ██████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  0.29
900 ██████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  0.20

Barrierefreiheit

Zusammenspiel mit Orange

Warum warme Grautöne?

Anwendung

UI-Beispiel

Als Hintergrundfarbe

Als Textfarbe

Anwendungsregeln

1. Warme Grautöne sind unterstützend — Orange bleibt die primäre Markenfarbe
2. Für dunkle Bereiche (Header, Footer) Warm 800–900 verwenden
3. Für Fließtext auf weißem Hintergrund mindestens Warm 600 für WCAG AA
4. Warm 50–200 eignen sich als warme Hintergründe und für visuelle Trennung
5. Orange für CTAs und Aktionselemente, warme Grautöne für alle anderen UI-Elemente

Dark Mode

Im Dark Mode werden hellere Warm-Töne verwendet, um Kontrast auf dunklen Hintergründen zu gewährleisten.

Print & Produktion

CMYK-Werte

Für professionellen Druck die CMYK-Werte direkt verwenden — nicht aus HEX konvertieren.

CSS Custom Properties

:root {
  /* Warm Gray Scale */
  --warm-50: #F9F8F6;   --warm-100: #F0EDEA;
  --warm-200: #E0DBD6;   --warm-300: #C4BDB7;
  --warm-400: #A69E97;   --warm-500: #887F78;
  --warm-600: #6B635C;   --warm-700: #524B45;
  --warm-800: #3A3430;   --warm-900: #231F1C;
}

Die Audioidentität ergänzt die visuelle Marke um eine akustische Dimension. Sie sorgt für Wiedererkennung in Videos, Präsentationen, Telefonanlagen und digitalen Produkten.

Elemente

Stilrichtung

• Modern & technisch — Keine klassische Kaufhausmusik
• Warm & professionell — Passend zum Markenwert "Partnerschaft"
• Dezent — Audio unterstützt, dominiert nicht
• Wiedererkennbar — Konsistente Tonalität über alle Touchpoints

Sound Logo — Anforderungen

• Dauer: 2–4 Sekunden
• Format: WAV (48 kHz, 24-bit) + MP3 (320 kbps)
• Stimmung: Selbstbewusst, modern, warm
• Keine Vocals oder gesprochener Markenname
• Muss auch bei niedriger Lautstärke erkennbar sein

Geplante Inhalte

• Sound Logo (Produktion & Freigabe)
• Klangwelt-Moodboard mit Referenzstücken
• Warteschleifen-Spezifikation
• Richtlinien für Podcast-Intros/Outros
• Audio-Assets zum Download

Die Bildsprache der BAUER GROUP transportiert Professionalität, Nahbarkeit und Technologiekompetenz. Bilder unterstützen die Markenbotschaft — sie sind kein Lückenfüller.

Stilrichtung

Farbbehandlung

• Weißabgleich: Leicht warm (passend zum Orange der Marke)
• Sättigung: Natürlich, nicht übersättigt
• Kontrast: Moderat — keine extremen Schatten oder Überbelichtung
• Farbfilter: Keine Instagram-artigen Filter

Bildkomposition

• Goldener Schnitt oder Drittel-Regel für Hauptmotive
• Weißraum für Textüberlagerung einplanen
• Blickrichtung von Personen ins Bild hinein, nicht heraus
• Tiefenunschärfe für Fokus auf Hauptmotiv

Geplante Inhalte

• Moodboard mit Referenzbildern
• Do/Don't-Galerie mit kommentierten Beispielen
• Stockfoto-Richtlinien (empfohlene Anbieter, Suchbegriffe)
• Bildbearbeitungs-Presets (Lightroom/Capture One)

Richtlinien für die konsistente Markendarstellung in digitalen Kanälen — Social Media, Web und E-Mail.

Übersicht

Grundprinzipien

• Konsistenz — Einheitliches Erscheinungsbild über alle digitalen Kanäle
• Primärfarbe sparsam — Orange (#FF8500) als Akzent, nicht als Fläche
• Lesbarkeit — WCAG 2.1 AA Kontrast auch in digitalen Medien einhalten
• Responsive — Vorlagen müssen auf allen Bildschirmgrößen funktionieren

Plattformen & Formate

Gestaltungsregeln

Do's

• Logo immer in einer Ecke platzieren (bevorzugt unten rechts)
• Ausreichend Kontrast zwischen Text und Hintergrund
• Einheitliche Schrifthierarchie pro Plattform
• Markenfarben als Akzente einsetzen

Don'ts

• Keine verzerrten oder abgeschnittenen Logos
• Kein Text auf unruhigem Hintergrund ohne Overlay
• Keine inkonsistenten Farbpaletten zwischen Plattformen
• Keine Stockfotos ohne Freigabe

Geplante Vorlagen

• LinkedIn Beitragsvorlage (Announcement, Hiring, Event)
• Social Media Story Template
• Karussell-Template für technische Inhalte
• Profilbild- und Banner-Vorlagen

Banner-Formate

Gestaltungsprinzipien

• Weißraum — Mindestens 20% der Fläche frei halten
• Logo-Platzierung — Immer in sichtbarer Position, nie zentriert auf Vollflächenbildern
• CTA-Buttons — In BAUER Orange (#FF8500) mit weißem Text
• Textmenge — Maximal 2 Zeilen Headline + 1 Zeile Subtext

Geplante Inhalte

• Open Graph Template für alle Unterseiten
• Hero Banner Vorlage (Figma/SVG)
• Blog Header Generator-Richtlinien
• Newsletter-Header Spezifikation

Die BAUER GROUP steht für Technologie, die bleibt — und für Partnerschaften, die wachsen. Unsere Markenwerte sind kein Marketing-Slogan, sondern die Grundlage jeder Entscheidung.

Unsere Taglines

Verwendung der Taglines

Kernwerte

Markenpersönlichkeit

Die BAUER GROUP kommuniziert:

Tonalität (Tone of Voice)

Do's

• Aktive Sprache — „Wir entwickeln" statt „Es wurde entwickelt"
• Klare Aussagen — „Das spart 40% Kosten" statt „Es könnten Einsparungen erzielt werden"
• Kurze Sätze — Ein Gedanke pro Satz
• Du/Sie nach Kontext — Technische Docs: „Du", Enterprise-Kommunikation: „Sie"

Don'ts

• Keine Superlative ohne Beleg („weltbeste", „einzigartig")
• Keine Buzzwords ohne Substanz („Synergie", „Paradigmenwechsel")
• Keine Passivkonstruktionen
• Kein unnötiges Gendern auf Kosten der Lesbarkeit

Unternehmensdaten

Die folgenden Anwendungen sind nicht gestattet und beschädigen die Markenintegrität.

Nicht strecken oder verzerren

Das Logo darf niemals in seinen Proportionen verändert werden — weder horizontal noch vertikal gestreckt oder gestaucht.

Nicht drehen

Das Logo darf nicht gedreht oder gekippt dargestellt werden. Die Ausrichtung ist immer horizontal.

Nicht umfärben

Die Markenfarben des Logos dürfen nicht verändert werden. Insbesondere darf die orange Bildmarke nicht in andere Farben umgefärbt werden.

Keine Effekte hinzufügen

Das Logo darf nicht mit Effekten versehen werden:

• ❌ Keine Schatten (Drop Shadow, Box Shadow)
• ❌ Keine Konturen (Outline, Stroke)
• ❌ Keine 3D-Effekte oder Bevel
• ❌ Keine Weichzeichnung (Blur)
• ❌ Keine Texturen oder Muster

Nicht auf unruhigem Hintergrund

Das Logo darf nicht auf fotografischen Hintergründen, Mustern oder Texturen platziert werden, die die Lesbarkeit beeinträchtigen.

Die BAUER GROUP verpflichtet sich zur Einhaltung der Web Content Accessibility Guidelines (WCAG) 2.1 auf Stufe AA für alle digitalen Produkte.

Farbkontrast-Regeln

Mindestkontrast für Text

Unsere Farben auf Weiß

Weitere Anforderungen

• Fokus-Indikatoren: Alle interaktiven Elemente müssen einen sichtbaren Fokus-Zustand haben
• Tastaturnavigation: Alle Funktionen müssen per Tastatur erreichbar sein
• Alternativtexte: Alle Bilder und Icons benötigen beschreibende alt-Attribute
• Semantisches HTML: Korrekte Verwendung von Headings, Landmarks und ARIA-Rollen

Empfohlene Farbkombinationen

Text auf weißem Hintergrund

Text auf Orange-Hintergrund

Text auf dunklem Hintergrund

Richtig vs. Falsch

Richtig

• Text in Orange 700 (#C2570A) auf weißem Hintergrund
• Text in Gray 600 (#52525B) als Standardtextfarbe
• Orange 500 als Buttonhintergrund mit weißem Text (≥24px)
• Orange 500 als dekorativer Akzent (Linien, Icons ≥24px)

Falsch

• ❌ Text in Orange 500 (#FF8500) auf weißem Hintergrund
• ❌ Orange 500 auf Orange 50 für kleinen Text
• ❌ Gray 400 als Fließtextfarbe
• ❌ Weiß auf Orange 500 für Text unter 18px bold

Tools zur Kontrastprüfung

• WebAIM Contrast Checker
• Colour Contrast Analyser (CCA)
• Browser DevTools → Accessibility Panel

Alle Marken-Assets und Ressourcen zum Herunterladen.

Logo-Pakete

Logo Wide (Querformat)

Logo Square (Quadratisch)

Farbdefinitionen

• CSS Variablen — Custom Properties für Web-Projekte
• SCSS Variables — Auf Anfrage
• Design Tokens (JSON) — Auf Anfrage

Vorlagen

Semantische Farben kommunizieren Status und Bedeutung in der Benutzeroberfläche. Jede Farbe hat eine feste Bedeutung — konsistent über alle Komponenten.

Statusfarben

Anwendungsbeispiele

Badges

Semantische Farben werden in Badges als Kombination aus hellem Hintergrund + dunkler Textfarbe der jeweiligen Farbe verwendet:

Hinweis-Boxen

Farbpaare (Hintergrund + Text)

CSS Custom Properties

:root {
  --brand-success: #22C55E;
  --brand-warning: #EAB308;
  --brand-error: #EF4444;
  --brand-info: #3B82F6;

  --brand-success-bg: #DCFCE7;
  --brand-warning-bg: #FEF9C3;
  --brand-error-bg: #FEE2E2;
  --brand-info-bg: #DBEAFE;

  --brand-success-text: #15803D;
  --brand-warning-text: #A16207;
  --brand-error-text: #B91C1C;
  --brand-info-text: #1D4ED8;
}

Status Badges

Badges kommunizieren den Status eines Elements durch Farbcodierung.

CSS

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.badge-success { background: #DCFCE7; color: #15803D; }
.badge-warning { background: #FEF9C3; color: #A16207; }
.badge-error   { background: #FEE2E2; color: #B91C1C; }
.badge-info    { background: #DBEAFE; color: #1D4ED8; }

Mit Punkt-Indikator

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

Anwendungsregeln

1. Ein Badge pro Element — nicht mehrere Status gleichzeitig
2. Kurze Labels — maximal 2 Wörter
3. Konsistente Verwendung — gleiche Bedeutung = gleiche Farbe
4. Nicht als Buttons — Badges sind informativ, nicht interaktiv

Varianten

Größen

Disabled State

CSS

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.btn-primary {
  background: #FF8500;
  color: white;
}

.btn-primary:hover {
  background: #EA6D00;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 133, 0, 0.3);
}

.btn-secondary {
  background: #F4F4F5;
  color: #18181B;
}

.btn-outline {
  background: transparent;
  color: #C2570A;
  border: 2px solid #FF8500;
}

Hover & Active States

Eingabefelder

Vorschau

Validierung — Vorschau

Spezifikation

CSS

.input {
  padding: 12px 16px;
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  background: white;
  color: #18181B;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.input:focus {
  border-color: #FF8500;
  box-shadow: 0 0 0 3px rgba(255, 133, 0, 0.12);
}

.input::placeholder {
  color: #A1A1AA;
}

Labels

.label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #52525B;
  margin-bottom: 6px;
  display: block;
}

Validierung

Wiederverwendbare Interface-Elemente im BAUER GROUP Designsystem für konsistente digitale Produkte.

Designprinzipien

Übersicht

• Buttons — Primäre, sekundäre und Outline-Varianten in drei Größen
• Badges & Status — Semantische Statusanzeigen mit Farbcodierung
• Formulare — Eingabefelder, Labels und Validierung

CSS Basis

Alle Komponenten basieren auf den BAUER GROUP CSS Custom Properties:

:root {
  --orange-500: #FF8500;  /* Primary Actions */
  --gray-100: #F4F4F5;    /* Secondary Actions */
  --gray-900: #18181B;    /* Text */
  --gray-200: #E4E4E7;    /* Borders */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Das BAUER GROUP Logo ist das zentrale Element unserer Markenidentität. Es besteht aus der Bildmarke (oranges Diamant-Symbol mit weißem „B") und der Wortmarke (BAUER GROUP).

Hauptlogo — Horizontal (Wide)

Das horizontale Logo ist die primäre Variante für alle Anwendungen, bei denen ausreichend horizontaler Platz vorhanden ist.

Aufbau

Bildmarke — Square

Die Bildmarke wird verwendet, wenn der Platz begrenzt ist: Favicons, App-Icons, Social-Media-Profile, Wasserzeichen.

Logo auf dunklem Hintergrund

Auf dunklem Hintergrund wird die Schrift in Weiß dargestellt. Die Bildmarke (oranges Diamant mit weißem B) bleibt unverändert.

Schutzzone

Die Schutzzone definiert den Mindestabstand zwischen dem Logo und anderen grafischen Elementen. Sie stellt sicher, dass das Logo immer klar erkennbar ist.

Maßeinheit X = Höhe des „B"-Zeichens in der Bildmarke.

Visualisierung

1× X

1× X

1× X

1× X

Richtig vs. Falsch

✓ Richtig

Ausreichend Freiraum um das Logo

✗ Falsch

Text zu nah am Logo

Elemente dringen in die Schutzzone ein

Mindestgrößen

Um die Lesbarkeit und Erkennbarkeit zu gewährleisten, gelten folgende Mindestgrößen:

Wide Logo (Horizontal)

160px / 40mm Min

Square Logo (Bildmarke)

40px / 12mm Min

Farbvarianten

Standard — Heller Hintergrund

Die Standardvariante für alle Anwendungen auf hellem Hintergrund.

Auf Dunkel — Dunkler Hintergrund

Auf dunklem Hintergrund wird die Schrift in Weiß dargestellt. Die Bildmarke bleibt unverändert.

Bildmarke (Square)

Die Bildmarke allein wird verwendet, wenn der Platz begrenzt ist.

Erlaubte Hintergründe

Das Logo darf auf folgenden Hintergründen platziert werden:

Übersicht

Farbspezifikationen für die professionelle Druckproduktion.

CMYK Primärfarben

Pantone Farbreferenzen

Druckhinweise

Logo-Druck

• Mindestgröße Wide Logo: 40mm Breite
• Mindestgröße Square Logo: 12mm Breite
• Logo immer in Vektordateien (SVG, EPS) liefern
• Keine JPG/PNG für Print verwenden

Farbgenauigkeit

• Proof-Druck vor der Serienproduktion anfordern
• ICC-Profile verwenden (ISO Coated v2 für Offset)
• Überdrucken für Schwarz aktivieren

Geschäftsausstattung

Marketingmaterial

Veredlungen

Kompletter Font Stack

Body Text

:root {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Monospace

:root {
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code",
    "Segoe UI Mono", Consolas, "Liberation Mono",
    Menlo, Monaco, monospace;
}

Fallback-Reihenfolge erklärt

Integration

HTML

<style>
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #18181B;
  }
</style>

CSS Custom Properties

:root {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code",
    Consolas, monospace;
}

body { font-family: var(--font-body); }
code { font-family: var(--font-mono); }

Skalierung

Live-Beispiele

Schriftgewichte

BAUER GROUP verwendet System Fonts — die nativen Schriftarten jedes Betriebssystems. Das garantiert maximale Kompatibilität, optimale Performance und keine externen Font-Abhängigkeiten.

Font Stack

font-family: system-ui, -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Plattform-Zuordnung

Monospace Font Stack

Für Code-Blöcke, technische Angaben und Farbwerte:

font-family: ui-monospace, "SF Mono", "Cascadia Code",
  "Segoe UI Mono", Consolas, monospace;

Vorteile des System Font Stacks

• Keine Ladezeiten — kein externer Font-Download
• Native Darstellung — Nutzer sehen die Schrift ihres Systems
• DSGVO-konform — keine Google-Fonts-Verbindungen
• Barrierefreiheit — System-Fonts sind für Lesbarkeit optimiert