Colours

Our colour system inherits the brand colours and leverage those to create compliant experiences.

Farben im Designsystem

Dieses Designsystem basiert auf den Farbvariablen von Bootstrap 5. Die Farben sorgen für Konsistenz, Barrierefreiheit und Wiedererkennbarkeit in allen Komponenten.

Primäre Farbpalette (angepasst)

Die folgenden Farben sind die Hauptfarben des Designsystems und basieren auf den bereitgestellten Preset-Variablen:

Name	Variable / CSS Custom Property	HEX	Beispiel
Primary	$primary / --color--accent	#d8613c	Beispiel
Secondary	$secondary / --color--accent-2	#c2a990	Beispiel
Success	$success / --color--accent-4	#b1c5a4	Beispiel
Danger	$danger / --color--accent-3	#cfcabe	Beispiel
Warning	$warning / --color--accent-5	#b5bdbc	Beispiel
Contrast	--color--contrast	#111111	Beispiel
Contrast 2	--color--contrast-2	#636363	Beispiel
Contrast 3	--color--contrast-3	#A4A4A4	Beispiel

Hinweis: Die Bootstrap-Variablen können in deinem SCSS wie folgt überschrieben werden:

$primary:   #cfcabe;
$secondary: #c2a990;
$success:   #b1c5a4;
$danger:    #d8613c;
$warning:   #b5bdbc;
// Kontrastfarben ggf. als Textfarben oder Utility-Variablen nutzen

Anwendung in Komponenten

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

Alerts

<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>

Eigene Farben definieren

Du kannst eigene Farben ergänzen, indem du neue SCSS-Variablen definierst:

$brand-main: #123456;
$brand-accent: #ff8800;

Diese können dann wie die Bootstrap-Variablen verwendet werden.

Hinweise zur Barrierefreiheit

• Achte auf ausreichenden Kontrast (z. B. mit WebAIM Contrast Checker)
• Verwende Farben nicht als einziges Unterscheidungsmerkmal

---

Weitere Informationen: Bootstrap Colors

Introduction

The Nova colour system helps you apply colour to your UI in a meaningful way. We define colours based on the role they play in the interface. There are 2 colour palettes, which we use to generate the values of all the colour variants in the palette.

Brand colours

The brand colours characterize the overall visual appearance. Both primary and secondary are available in the brand, but are used for different purposes. Within the Nova context, we call them primitives.

• Primary colours characterize the brand.
• Secondary colors are mostly used for visualisations.