Farben

Unsere Farbpalette ist sorgfältig ausgewählt, um Emotionen zu wecken und eine konsistente Markenerfahrung zu schaffen.

Primärfarben

Die Primärfarben bilden das Herzstück unserer Markenidentität und werden für alle Hauptelemente der visuellen Kommunikation eingesetzt.

Helix Pink

  • HEX
  • RGB223, 42, 98

Hauptaktionen, Primärfarbe

Helix Gelb

  • HEX
  • RGB255, 190, 19

Akzente, Highlights

Helix Türkis

  • HEX
  • RGB59, 171, 204

Informationen, Links

Helix Lila

  • HEX
  • RGB160, 63, 136

Sekundäre Aktionen

Neutralfarben

Neutrale Farben sorgen für Balance, Struktur und Lesbarkeit in allen Kommunikationsmitteln der Marke.

Gray 900

  • HEX
  • RGB17, 24, 39

Überschriften, Fließtext

Gray 700

  • HEX
  • RGB55, 65, 81

Sekundärer Text

Gray 500

  • HEX
  • RGB107, 114, 128

Platzhaltertext

Gray 300

  • HEX
  • RGB209, 213, 219

Trennlinien, Rahmen

Gray 100

  • HEX
  • RGB243, 244, 246

Hintergrundflächen

Gray 50

  • HEX
  • RGB249, 250, 251

Seitenhintergrund

Farbverläufe

Unsere Farbverläufe kombinieren die Primärfarben für dynamische, visuell ansprechende Effekte. Klicken Sie auf einen Verlauf, um den CSS-Code zu kopieren.

Pink zu Lila

Für Print-Anwendungen:

#DF2A62 #A03F88

Hero-Bereiche, Header

Türkis zu Pink

Für Print-Anwendungen:

#3BABCC #DF2A62

Call-to-Action, Feature-Boxen

Gelb zu Pink

Für Print-Anwendungen:

#FFBE13 #DF2A62

Highlights, Akzente

Lila zu Türkis

Für Print-Anwendungen:

#A03F88 #3BABCC

Sekundäre Bereiche

Pink Radial

Nicht druckbar

#DF2A62 #A03F88

Hintergrund-Effekte

Verwendungsrichtlinien

Erlaubt
Primärfarben für wichtige Aktionen

Setzen Sie Primärfarben gezielt für CTAs, Links und Hauptelemente ein.

Neutralfarben für Text und Hintergründe

Nutzen Sie die Grau-Abstufungen für Fließtext, Rahmen und Hintergrundflächen.

Kontrastverhältnisse einhalten (WCAG AA)

Mindest-Kontrast 4,5:1 für Normaltexte, 3:1 für große Texte.

Semantische Farben konsistent verwenden

Erfolg immer grün, Fehler immer rot – keine eigenmächtigen Umdeutungen.

Nicht erlaubt
Zu viele Primärfarben gleichzeitig mischen

Mehr als zwei Primärfarben nebeneinander verwässern die Markenwirkung.

Eigene Farbtöne außerhalb des Systems

Verwenden Sie ausschließlich die definierten CSS-Variablen des Farbsystems.

Barrierefreiheits-Standards ignorieren

Farbe darf nicht das einzige Mittel zur Informationsübertragung sein.

Fehlerfarben für positive Aktionen

Rot ist für Fehler und Warnungen reserviert – nicht für Erfolgs-Zustände.