24h Notdienst: +49 171 245 10 29
Kontakt Impressum Datenschutz
← Startseite
Design System

Brand Styleguide

Veltum GmbH — Heizung · Lüftung · Sanitär · Ökologische Systeme

Version 1.0 · Februar 2026
02 — Farbpalette

Farben

Die Veltum-Farbpalette basiert auf dem markanten Magenta als Primärfarbe, ergänzt durch einen Grün-Akzent und ein System aus UI- und Textfarben.

Primärfarben

Veltum Magenta
#E5007D
RGB 229, 0, 125
CTAs, Akzente, Links, Markenfarbe
Veltum Schwarz
#1A1A18
RGB 26, 26, 24
Überschriften, Logotext, Footer
Magenta Dunkel
#c4006a
RGB 196, 0, 106
Button-Hover, Akzent-Variante

Akzent- / UI-Farben

Akzent-Grün
#93C01C
RGB 147, 192, 28
Dezenter Akzent, Logo-Element
Hover-Rot
#CD0011
RGB 205, 0, 17
Navigation Hover-Zustand
Magenta Hell
#f0339a
RGB 240, 51, 154
Hellere Variante, Gradienten
Grün Hell
#CAD66F
RGB 202, 214, 111
Logo-Begleitfarbe
Navy
#003B6A
RGB 0, 59, 106
Template-Variante

Textfarben

Text Standard
#555555
Fließtext
Text Dunkel
#333333
Betonter Text
Text Gedämpft
#999999
Labels, Platzhalter

Hintergrundfarben

Weiß
#FFFFFF
Standard-Hintergrund
Hellgrau
#f8f9fa
Alternierende Sektionen
Grau
#ECECEC
Input-Hintergründe
03 — Typografie

Typografie

Veltum setzt auf Helvetica Neue als Primärschrift. Die Basisschriftgröße beträgt 17px, alle Größen werden in em-Einheiten definiert.

Schriftschnitte & Größen

H1 1.882em (32px) Weight 700
Heizung · Lüftung · Sanitär
H2 1.412em (24px) Weight 700
Ökologische Systeme für Ihr Zuhause
H3 1.059em (18px) Weight 700
Unsere Leistungen im Überblick
Body 17px (1rem) Weight 400
Veltum GmbH steht für hochwertige Lösungen in den Bereichen Heizung, Lüftung, Sanitär und ökologische Systeme.
Small 0.824em (14px) Weight 400
Kleingedruckter Text für Hinweise und sekundäre Informationen.
Nav-Links 1.059em (18px) Weight 600
Startseite Leistungen Kontakt

Font Stack

  • Primär: Helvetica Neue LT W01_41488878
  • Medium: Helvetica Neue LT W01_65 Md
  • Fallback: 'Helvetica Neue', Calibri, Arial, Helvetica, sans-serif
  • Einbindung: fonts.net API
04 — Interaktion

Buttons

Alle Buttons nutzen border-radius: 4px und font-weight: 600.

Primary (Magenta)
Outline
Ghost (Magenta Outline)
Farbvarianten
Auf dunklem Hintergrund

Spezifikationen

  • Border-Radius: 4px (keine Pills)
  • Font-Weight: 600
  • Small: 8px 16px · 0.82rem
  • Default: 10px 24px · 1rem
  • Large: 14px 32px · 1.05rem
  • Hover: #c4006a (Magenta Dunkel)
  • Transition: all 0.2s ease
05 — Komponenten

Karten

Service-Karten mit Hover-Effekt: erhöhter Schatten, Magenta-Rahmen und leichtem Anheben.

Heizung

Moderne Heizsysteme für maximale Effizienz und Komfort.

Lüftung

Kontrollierte Wohnraumlüftung für ein gesundes Raumklima.

Sanitär

Professionelle Sanitärinstallation und -wartung.

Ökologische Systeme

Nachhaltige Energielösungen mit Solarthermie und Wärmepumpen.

Karten-Spezifikationen

  • Border-Radius: 12px
  • Shadow (default): 0 2px 12px rgba(0,0,0,0.08)
  • Shadow (hover): 0 8px 30px rgba(0,0,0,0.12)
  • Hover: translateY(-6px) + border: 2px solid #E5007D
06 — Ikonografie

Icons

SVG-Linien-Icons in Magenta mit stroke-width 2–2.5px und einem ViewBox von 64×64.

Heizung
Lüftung
Sanitär
Solar
Steuerung
Gebäude
Kontakt
E-Mail
Dokument
Suche
07 — Verläufe

Gradienten

Markenverläufe für Hero-Bereiche, Karten und dekorative Elemente.

Magenta
linear-gradient(135deg, #E5007D, #c4006a)
Magenta Hell
linear-gradient(135deg, #E5007D, #f0339a)
Magenta-Dark (Hero)
linear-gradient(135deg, #E5007D, #1A1A18)
Navy-Magenta
linear-gradient(135deg, #003B6A, #E5007D)
Dark
linear-gradient(135deg, #1A1A18, #333333)
08 — Tiefe

Schatten

Das Schatten-System definiert die visuelle Tiefe der UI-Elemente.

Default
0 2px 12px rgba(0,0,0,0.08)
Hover
0 8px 30px rgba(0,0,0,0.12)
Header
0 0 8px rgba(0,0,0,0.1)
Header (Scroll)
0 0 8px rgba(0,0,0,0.5)
Search
3px 3px 3px rgba(0,0,0,0.15)
09 — Richtlinien

Do's & Don'ts

Leitlinien für den korrekten Umgang mit den Markenelementen.

✓ Do
Magenta als Primärfarbe für CTAs, Links und Akzente verwenden.
✗ Don't
Grün als Primärfarbe einsetzen — Grün ist nur ein dezenter Akzent.
✓ Do
Auf dunklen Hintergründen die invertierte (weiße) Logo-Variante nutzen.
✗ Don't
Das Standard-Logo auf dunklen Flächen verwenden — es ist dort nicht lesbar.
✓ Do
Buttons mit 4px border-radius und font-weight 600 gestalten.
✗ Don't
Runde Pill-Buttons oder abweichende Border-Radien verwenden.
✓ Do
Logos immer als SVG einbinden für maximale Schärfe auf allen Bildschirmen.
✗ Don't
Das Logo verzerren, drehen oder in nicht-freigegebenen Farben darstellen.
10 — Abstände

Spacing

Em-basiertes Spacing-System mit einer Basisgröße von 17px.

Token em px Visualisierung
--space100.588em10px
--space150.882em15px
--space201.176em20px
--space301.765em30px
--space402.353em40px
--space502.941em50px
--space603.529em60px

Layout-Maße

  • Container: 1280px (75.294em)
  • Content: 880px (51.765em)
  • Header: 130px
  • Nav Bar: 48px
  • Basis: 17px

Breakpoints

  • Desktop: ≥ 769px
  • Tablet: ≤ 769px
  • Mobile: ≤ 480px
CSS Custom Properties — :root 
/* Veltum Brand Design Tokens */

:root {
  --primary: #E5007D;
  --primary-dark: #c4006a;
  --dark: #1A1A18;
  --accent-green: #93C01C;
  --hover-red: #CD0011;
  --navy: #003B6A;

  --text: #555555;
  --text-dark: #333333;
  --bg-light: #f8f9fa;
  --border: #ECECEC;

  --font: 'Helvetica Neue', Calibri, Arial, sans-serif;
  --font-size-base: 17px;
}
11 — Barrierefreiheit

Kontrast

Übersicht der Kontrastverhältnisse gemäß WCAG 2.1 Richtlinien.

Magenta auf Weiß
4.6 : 1 AA Groß
Schwarz auf Weiß
17.4 : 1 AAA
Text auf Weiß
7.5 : 1 AAA
Gedämpft auf Weiß
2.8 : 1 Nicht AA
Navy auf Weiß
9.8 : 1 AAA
Kopiert!