FactoringWerkstatt

Corporate Design Guide

Kompletter Leitfaden für das einheitliche Corporate Design der FactoringWerkstatt - von Farben und Schriften bis hin zu Anwendungsrichtlinien und Best Practices.

Farben Typografie Logo & Marke

Farbsystem

Hauptfarben

Primary Blue
Primary Blue Gradient
#1e3a8a → #3b82f6
Hauptfarbe für Buttons, Links, Akzente
Secondary Green
Secondary Green Gradient
#059669 → #10b981
Sekundärfarbe für Erfolg, Bestätigungen
Accent Red
Accent Red Gradient
#dc2626 → #ef4444
Akzentfarbe für Warnungen, CTAs

WhatsApp Integration

WhatsApp Green
WhatsApp Brand Green
#25d366
Original WhatsApp Markenfarbe
WhatsApp Light
WhatsApp Light Green
#dcf8c6
Für Nachrichten-Hintergründe

Gradient Variationen

Primary Gradient
linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)
Secondary Gradient
linear-gradient(135deg, #059669 0%, #10b981 100%)
Logo Gradient
linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #059669 100%)

Typografie-System

Schriftart

Inter Font Family

Inter ist eine speziell für Bildschirme optimierte Schriftart, die bei allen Größen hervorragend lesbar ist. Sie wird als primäre Schriftart für alle FactoringWerkstatt Materialien verwendet.

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
Inter Light (300)
Inter Regular (400)
Inter Medium (500)
Inter SemiBold (600)
Inter Bold (700)
Inter ExtraBold (800)
Inter Black (900)

Größensystem

Hauptüberschrift (H1)

clamp(2.5rem, 5vw, 4rem) | font-weight: 900 | line-height: 1.1

Sekundäre Überschrift (H2)

clamp(2rem, 4vw, 3rem) | font-weight: 800 | line-height: 1.2

Tertiäre Überschrift (H3)

clamp(1.5rem, 3vw, 2rem) | font-weight: 700 | line-height: 1.3

Quaternäre Überschrift (H4)

clamp(1.25rem, 2.5vw, 1.5rem) | font-weight: 600 | line-height: 1.4

Großer Fließtext für wichtige Inhalte und Einleitungen.

1.125rem | font-weight: 400 | line-height: 1.7

Normaler Fließtext für die meisten Inhalte und Beschreibungen.

1rem | font-weight: 400 | line-height: 1.6

Kleiner Text für Zusatzinformationen und Metadaten.

0.875rem | font-weight: 400 | line-height: 1.5

Anwendungsrichtlinien

Do's & Don'ts

Do's - Das sollten Sie tun

  • Verwenden Sie die exakten Farbcodes für konsistente Darstellung
  • Nutzen Sie die Inter Schriftart in allen digitalen Medien
  • Halten Sie ausreichend Weißraum um das Logo
  • Verwenden Sie die Corporate Signatur in jeder WhatsApp-Nachricht
  • Testen Sie die Darstellung auf verschiedenen Geräten

Don'ts - Das sollten Sie vermeiden

  • Verwenden Sie keine anderen Farbvarianten oder Filter
  • Strecken, verzerren oder rotieren Sie niemals das Logo
  • Verwenden Sie keine alternativen Schriftarten
  • Platzieren Sie das Logo nicht auf unruhigen Hintergründen
  • Ändern Sie niemals die Corporate Signatur eigenmächtig

Anwendungsbeispiele

WhatsApp Header

FactoringWerkstatt Corporate System

Navigation Header mit Corporate Branding
FactoringWerkstatt

Template Content Card

Content Card mit Gradient Logo
Button-Styles mit Corporate Colors

Download Assets

Logo Package

Alle Logo-Variationen in verschiedenen Formaten

SVG, PNG, PDF

Farbpalette

Alle Farben als Photoshop/Sketch Datei

ASE, SKF, CSS

Font Package

Inter Schriftart in allen Gewichtungen

TTF, OTF, WOFF2

Kompletter Guide

Gesamtes Brand Guide als PDF

PDF, 15 Seiten