Design System

Havera Brand Kit

Alles was du brauchst, um die Havera-Marke konsistent und wiedererkennbar einzusetzen. Farben, Typografie, Logo und Designrichtlinien.

FarbenGradientsTypografieLogoUI ComponentsBrand Voice

Farbpalette

Die Havera-Marke basiert auf einem warmen, energetischen Farbspektrum von Gelb über Orange bis Pink. Diese Farben transportieren Innovation, Wärme und Dynamik.

Primärfarben

Akzentfarbe

Neutraltöne

Der Havera Gradient

Der Signature Gradient ist das Herzstück der visuellen Identität. Er wird 135° diagonal von Gelb nach Pink eingesetzt.

Signature Gradient

135° · #FDB938 → #FF8839 → #FF6B5A → #FF5976

Varianten

Full Gradient (135°)

Für Hero-Hintergründe, große Flächen

Button Gradient (→)

Für CTAs und primäre Buttons

Text Gradient (→)

Für Headlines mit bg-clip-text

Subtle (10% Opacity)

Für Badge-Hintergründe, Akzente

Glow (20% + Blur)

Für dekorative Halo-Effekte

Page Background

Für Auth-Seiten und subtile Hintergründe

Do

  • ✓Gradient auf großen Flächen und als primärer Akzent einsetzen
  • ✓Richtung 135° für Hauptgradient, horizontal für Buttons
  • ✓Niedrige Opazität (10-20%) für Hintergründe nutzen
  • ✓Als Text-Gradient nur für eine Headline pro Sektion

Don't

  • ✗Gradient nicht auf kleinen Elementen (Icons, Tags) bei voller Opazität
  • ✗Farbrichtung nicht umkehren (immer Gelb → Pink)
  • ✗Nicht mehr als 2 Gradient-Elemente pro Viewport
  • ✗Gradient nicht mit anderen bunten Hintergründen mischen

Typografie

Inter ist unsere primäre Schriftart. Sie bietet hervorragende Lesbarkeit bei allen Größen und ein modernes, klares Erscheinungsbild.

Aa

Inter

font-family: 'Inter', ui-sans-serif, system-ui, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Schriftschnitte

Bold (700)

Property Intelligence

Headlines, Hero-Titel
Semibold (600)

Property Intelligence

Subheadlines, Card-Titel
Medium (500)

Property Intelligence

Body Text, Navigation
Regular (400)

Property Intelligence

Fließtext, Beschreibungen

Größen-Skala

7xl (84px)Hero Headline
5xl (48px)Sektions-Titel
3xl (30px)Card-Headline
xl (20px)Subheadline
lg (18px)Body Large
base (16px)Body
sm (14px)Small / Caption
xs (12px)Micro / Badge

UI Components

Die wichtigsten UI-Bausteine und wie sie eingesetzt werden. Basierend auf shadcn/ui mit Havera-Anpassungen.

Buttons

CTA (Large)
bg-gradient-to-r from-[#FDB938] via-[#FF8839] to-[#FF6B5A]

Badges

Gradient Badge
Simple Badge
Status Badge

Cards

Standard Card

Mit Icon-Container, Hover-Shadow und abgerundeten Ecken.

Gradient Border

Akzentuierte Card mit Gradient als Border-Effekt.

Glass Card

Glassmorphism-Effekt mit Backdrop-Blur und Transparenz.

Schatten & Tiefe

xs
sm
md
lg
xl

Border Radius

md (8px)
xl (10px)
2xl (16px)
3xl (24px)
full

Brand Voice & Tone

Wie Havera kommuniziert: Professionell, aber nicht steif. Modern, aber nicht übertrieben. Klar und auf den Punkt.

🎯

Professionell

Wir sprechen auf Augenhöhe mit Hausverwaltungen. Fachkompetenz ohne Fachjargon-Overload.

⚡

Modern

KI und Technologie sind unser Werkzeug, nicht unser Marketing-Gimmick. Wir zeigen Ergebnisse.

💎

Klar

Kurze Sätze. Aktive Sprache. Jedes Wort hat einen Zweck. Kein Corporate-Bullshit.

🤝

Empathisch

Wir verstehen den Alltag von Hausverwaltungen. Ihre Probleme sind unser Startpunkt.

Beispiele

Nicht so

Unsere innovative KI-Lösung revolutioniert das Property Management durch disruptive Technologien.

So schon

Havera übernimmt den Organisationsaufwand. Ihr Team kümmert sich um das Wesentliche.

Nicht so

Optimieren Sie Ihre Betriebsprozesse für maximale Effizienzsteigerung.

So schon

Mehr Einheiten betreuen. Weniger Personal brauchen.

Nicht so

Nutzen Sie unser synergistisches Ökosystem für eine holistischische Immobilienverwaltung.

So schon

Alles an einem Ort: Nachrichten, Vorgänge, Dokumente. Ohne Umwege.