Out of Office – Brand Kit

Branding-Kit: Farben, Typo & UI-Bausteine

Ziel: Ein ruhiger, moderner Look, der Kompetenz und Freiheit vermittelt, ohne „Hype-Vibes“. Das passt besonders gut zu Webinaren, PDFs, Landingpages und Social Assets.

Primär-CTA Sekundär Soft Accent

Hinweis: Hex-Farben sind nahe am Screenshot-Look. Wenn du mir eure exakten CI-Werte gibst (oder ein .svg/.ai), setze ich sie 1:1 exakt um.

Brand-Essenz

Tonalität ruhig, erwachsen, klar, hilfreich

Versprechen Skills aufbauen, ortsunabhängig arbeiten

Design viel Weißraum, runde Formen, weiche Kontraste

→ Copy & Paste CSS-Tokens

Farben

Empfehlung: 1 Primary (Navy), 1 Background (Sand), 1 Accent (Teal) plus 1 Warm Accent (Sun/Coral).

Background Sand
Paper / Warm Neutral

#F2EEE8

Brand Navy
Primary

#0B1B2B

Ocean Teal
Accent

#4BA3B6

Sun Sand
Warm Accent

#E6B36A

Sunset Coral
Warm Accent 2

#F07A6A

Typografie

System-Fonts reichen (schnell, sauber). Wenn ihr Google Fonts wollt: Inter oder Manrope passen sehr gut.

Headline

Build skills. Work anywhere.

Kurze Sätze, klar, viel Luft.

Fließtext eher 14–16px. Überschriften mit leicht negativem Tracking. Maximal 2 Schriftgewichte.

Text & UI

Primärtext in --text, Sekundärtext in --muted, Meta in --muted-2. Links immer in Navy, ohne knalliges Blau.

CTA Button Secondary Soft

UI-Bausteine

Diese Bausteine kannst du direkt in Webseiten, Landingpages, Webinar-Seiten oder PDF-Layouts übernehmen.

Card

Für Abschnitte, Module, Bonus-Pakete, Testimonials.

ruhig & seriös

Note / Info

Kurze Hinweise, Tool-Tipps, „So nutzt du den Bonus“.

Links

Links immer dezent, nicht aggressiv.

Beispiel-Link

Layout-Regeln (10/10 Look)

Viel Weißraum: lieber weniger Elemente, dafür klar.
Runde Ecken (18px), sanfte Schatten, warme Borders.
Primärfarbe Navy nur für Headlines/CTA, nicht überall.
Akzente (Teal/Coral) sparsam: Icons, Highlights, kleine Flächen.
Bildwelt: echte Orte, arbeiten im Alltag (Café, Tisch, Terrasse), nicht Protz-Strand.

CSS-Tokens zum Kopieren

Diese Variablen kannst du direkt in eure Website / Funnel / OnePage / Webflow übernehmen.

:root{
  --bg:#F2EEE8;
  --surface:#FFFFFF;
  --surface-2:#FBF7F2;
  --text:#0F172A;
  --muted:#334155;
  --muted-2:#64748B;
  --border:#E6DFD6;

  --brand:#0B1B2B;
  --brand-2:#0F2740;
  --teal:#4BA3B6;
  --sky:#87C7D6;
  --sun:#E6B36A;
  --coral:#F07A6A;

  --radius:18px;
  --radius-sm:12px;
}