Farben | Online
Farben spielen bei der Gestaltung einer Website eine entscheidende Rolle. Sie sind nicht nur ein Medium zur ästhetischen Gestaltung, sondern dienen auch der intuitiven Führung und fördern die Benutzerführung. Die UI-Farbpalette für das FUNKE Medien Design System wird durch drei übergreifende Ziele definiert:
Konsistent
Das Farbsystem ermöglicht ein einheitliches Erscheinungsbild über verschiedene Produkte und Plattformen hinweg.
Barrierefrei
Das Farbsystem bietet ein ausreichendes Kontrastverhältnis und hält sich, soweit möglich, an die Richtlinien zur Barrierefreiheit von Webinhalten.
Konsistent
Das Farbsystem ermöglicht ein einheitliches Erscheinungsbild über verschiedene Produkte und Plattformen hinweg.
Unser Light Mode Color System bietet eine helle und einladende Benutzeroberfläche, die auf Klarheit und Lesbarkeit ausgelegt ist. Es verwendet eine Palette klarer Farben, um Inhalte ansprechend und zugänglich zu machen.
Text
Primary
#242424
Secondary
#666666
Disabled
#9E9E9E
Contrast
#FFFFFF
Brand Color | Functional Primary & Secondary
Brand Color / Primary Main
#4A7E3E
Primary 50
#F6F9F5
Primary Light
#BBD8BA
Primary Dark
#3D5837
Secondary 400
#310035
Secondary 300
#4A0050
Secondary 200
#74007C
Secondary 100
#9D00A8
Feature
Nur mit schwarzer Beschriftung oder als dekoratives Element zu verwenden.
Primary 300
#E164EB
Primary 200
#F9A8FF
Primary 100
#FCD3FF
Secondary 300
#0D90ED
Secondary 200
#ADDAFB
Secondary 100
#D6EDFD
Functional Colors | Semantic
Funktionale Farben bilden die Grundlage unseres Farbsystems und dienen als visueller Kompass für Benutzerinteraktion und Feedback.
Error Text
#B00020
Error Surface
#FAE6E6
Warning
#81541F
Warning Surface
#FDF3DD
Info
#0D1867
Info Surface
#E9EBF8
Success Text
#205C25
Success Surface
#D4E2D5
Alert
#CE0000
Functional Colors | Background
Background 100
#FFFFFF
Background 200
#F9F9F9
Background 300
#F2F2F2
Background 400
#DBDBDB
Background 500
#808080
Background 700
#696969
Background 700
#525252
Background 800
#3B3B3B
Background 900
#242424
Functional Colors | Grayscale
Die Grundstruktur unserer Seite basiert neben den kräftigen Funktionsfarben auf einem sorgfältig abgestimmten Spektrum an Graustufen. Eine Palette von Grautönen sorgt für unterschiedliche Trennungsebenen zwischen den Elementen und trägt dazu bei, dass der Inhalt übersichtlich und leicht verständlich bleibt.
Gray 50
#F9F9F9
Gray 100
#F2F2F2
Gray 200
#DBDBDB
Gray 300
#9E9E9E
Gray 400
#808080
Gray 700
#696969
Gray 800
#525252
Gray 900
#242424
Functional Colors | Stroke
Stroke 100
#DBDBDB
Stroke 200
#F9F9F9
Stroke 300
#808080
Functional Colors | Hover State
Hover-Zustände sind wichtige visuelle Hinweise, die darauf hinweisen, dass ein Element interaktiv ist. Sie verbessern die Benutzerfreundlichkeit, indem sie eine direkte Rückmeldung über das Vorhandensein einer Aktionsebene geben.
Hover
#000000 5%