Brand & Corporate Identity

Design-System · haus-8.de · Stand Mai 2026

Logo & Marke

Logo-Varianten

Primär — auf weißem Hintergrund

Weiß — auf Navy #16273F

Auf Hellgrau #F5F7FA

Weiß — auf Gold #C9A84C

Logo-Anatomie

Icon-Mark

Haus-Silhouette (Navy #16273F) mit zentrierter „8" (Grau #67707E). Steht für Hausverwaltung + einprägsamer Zahlen-Anker.

Wortmarke „HAUS 8"

Geometrischer Bold Sans-Serif. Großbuchstaben, klares Tracking. Digital-first.

Claim

„Entlastungsagentur für HVs" — Regular, zentriert, spricht die Zielgruppe direkt an.

Mindestgröße digital

80px Breite (Minimum) · 120px (optimal) · Favicon: 32px (nur Icon)

Do & Don't

✓ Do

Nur auf definierten Hintergründen (Weiß, Navy, Hellgrau, Gold)
Schutzraum mind. = Höhe des „H" auf allen Seiten
Nur Originaldateien (PNG mit Transparenz oder SVG)
Proportionen immer beibehalten
Weißes Logo auf allen dunklen Flächen

✗ Don't

Nicht verzerren, drehen oder beschneiden
Keine Schatten oder Glow-Effekte aufs Logo
Keine anderen Farben als definiert
Nicht auf unruhigen Fotohintergründen ohne Overlay
Icon nicht allein ohne Wortmarke (außer Favicon/App-Icon)

Icon-Mark & Favicon

Standalone Icon — alle Varianten

Auf Weiß

Auf Navy (invertiert)

Auf Hellgrau

Auf Gold

Verwendungszwecke des Icons

🌐 Browser-Favicon

32×32px, 16×16px .ico / PNG

📱 App-Icon

180×180px (Apple Touch Icon)

💬 WhatsApp / Social

Profilbild auf Navy-Hintergrund

📧 E-Mail-Signatur

Icon 24px neben dem Namen

🔖 Bookmark-Icon

Safari / Chrome Tab-Icon

🔔 Browser-Push

Notification-Icon 96×96px

Farbpalette

Primärfarben

Navy

#16273F

Headlines, Buttons, Footer, Nav

--navy

Blue

#2E4769

Hover-States, sekundäre Elemente

--blue

Blue Light

#3D5A80

CTA-Gradient, Hover

--blue-l

Gold

#C9A84C

Akzent, Highlights, Premium

--gold

Neutrale & Hintergrundfarben

White

#FFFFFF

Primärer Hintergrund, Cards

--bg

Background Light

#F5F7FA

Alternierende Sections

--bg-l

Background Tint

#EEF2F7

Hover-Hintergründe, Zeilen

--bg-t

Border

#D8DFE8

Rahmen, Trennlinien

--gray-b

Textfarben

Text Primary

#16273F

Headlines, wichtige Texte

--txt

Text Body

#4B535D

Fließtext, Beschreibungen

--txt-b

Text Muted

#67707E

Labels, Captions (WCAG AA)

--txt-m

WCAG 2.2 Kontrast-Prüfung

Kombination	Ratio	AA (4.5:1)	AAA (7:1)
#16273F auf Weiß	13.5:1	✓ Pass	✓ Pass
#4B535D auf Weiß	7.8:1	✓ Pass	✓ Pass
#67707E auf Weiß	5.0:1	✓ Pass	~ Grenzwertig
Weiß auf #16273F	13.5:1	✓ Pass	✓ Pass
#C9A84C auf Weiß	2.4:1	✗ Fail	— nur Deko

⚠ Gold nur für dekorative Elemente — nie für lesbaren Text auf weißem Hintergrund.

Typografie

Schriftfamilien

Headlines — --fh

Playfair Display

AaBbCcDd 0123456789

600 SemiBold · 700 Bold
H1–H4, CTA-Headlines

UI / Body — --fb

DM Sans

AaBbCcDd 0123456789

400 · 500 · 600 · 700
Body, Labels, Buttons, Nav

Typografische Skala

Playfair Display700clamp(32px→52px)line-height 1.15

Digitale Entlastung für Hausverwaltungen

Playfair Display700clamp(26px→38px)

Unsere Leistungen für Ihre HV

Playfair Display60026px

Website & Tools für Hausverwaltungen

Playfair Display60020px

SEO & lokale Sichtbarkeit

DM Sans40019pxline-height 1.6Lead

Professionelle Websites und messbare SEO-Ergebnisse — damit Hausverwaltungen online gefunden werden.

DM Sans40016pxline-height 1.8Body

Der digitale Wandel macht auch vor der Hausverwaltungsbranche nicht halt. WEG-Eigentümer und Mieter erwarten heute digitale Kommunikation, schnelle Antworten und Transparenz.

DM Sans40014pxSmall

Kostenlose Erstberatung · Keine Bindung · Deutschlandweit

DM Sans70010pxletter-spacing .12emLabel / Eyebrow

Leistungen & Pakete

DM Sans70010pxGold-Eyebrow

Premium Partner

Buttons & CTAs

Erstgespräch buchen → Mehr erfahren Gründungspartner werden → Details ansehen ›

Erstgespräch buchen → Mehr erfahren Gründungspartner →

Größen

Klein Standard Groß

CTA-Gradient

Bereit für den nächsten Schritt?

Jetzt kostenloses Erstgespräch buchen

Erstgespräch buchen →

linear-gradient(135deg, var(--navy), var(--blue-l)) · border-radius: var(--r-xl)

Abstände & Layout

Spacing-Skala

4px — Micro

8px — Tiny

12px — XXS

16px — XS

24px — M (Container-Padding)

32px — L (Card-Padding)

48px — XL

56px — Section-Head margin

64px — CTA-Padding

80px — Section-Padding (Desktop)

Layout-Konstanten

Container max

1120px

Nav max-width

1200px

Hero padding-top

min. 200px

FAQ max-width

820px

Border-Radius

0px

Selten

4px

Micro

8px

Items

12px

--r-s · Dropdown

16px

--r-l · FAQ

20px

--r · Cards

24px

--r-xl · CTA

9999px

--r-f · Buttons

Schatten

Small — --sh-sm

0 2px 8px
rgba(22,39,63,.07)

Icon-Karten, kleine Elemente

Medium — --sh

0 4px 20px
rgba(22,39,63,.09)

Standard-Cards, Sektionen

Large — --sh-lg

0 12px 48px
rgba(22,39,63,.14)

Mega-Menu, Modals, Dropdowns

Alle Schatten in Navy-Ton — kein neutrales Grau. Verleiht eine kohärente, warme Tiefe.

Badges & UI-Elemente

Badges

Neu Premium Aktiv Empfohlen Beta

Focus-State (WCAG 2.2)

outline: 3px solid #4A90D9; outline-offset: 3px;

Motion & Animation

Easing-Kurve

--ease: cubic-bezier(.4, 0, .2, 1)

Dauer-Referenz

0.15s

Hover-Hintergründe

0.2s

Buttons, Links

0.25s

Mega-Menu

0.3s

Dropdowns, FAQ

0.4s

Nav-Übergang

0.6s

Scroll-Reveal

Scroll-Reveal-Klassen

.rv Fade + Y(20px)

.rl Fade + X(-24px)

.rr Fade + X(24px)

.d1–.d4 0.1–0.4s Delay

Alle Animationen deaktiviert bei prefers-reduced-motion: reduce (WCAG 2.1 AA 2.3.3).

Breakpoints

🖥

Desktop

> 900px

Volle Nav, Mega-Menu, 4-spaltige Footer-Grid

📱

Tablet / Mobile

≤ 900px

Burger-Menu, Nav ausgeblendet, 2-spaltige Footer-Grid

📲

Small Mobile

≤ 600px

1-spaltige Footer-Grid, Section-Padding 56px