| Name | Wert | Verwendung |
|---|---|---|
| darkblue | #4661A9 | Primäre Card-Kopfsegmente, Portalheader, Toggle-Handle sowie primäre Chart-Werte ohne Positiv-Negativ-Darstellung. |
| darkgreen | #4D646E | Alternative Card-Kopfsegmente. |
| darkbrown | #665F57 | Gedämpfte alternative Card-Kopfsegmente. |
| light-grey | #E2E5E9 | Card-Flächen, Card-Bodies, Formularflächen, Optionszeilen, inaktive Buttons, Sandwich-Menü-Flächen und Chart-/Score-Hintergründe. |
| medium-grey | #D4D6DB | Aktive Standardbuttons, geöffnete Pulldown-Flächen, Hilfetext-Flächen, Fragezeichen-Icons, Referenzwerte in Charts sowie Entfernen-Button in Eingabefeldern. |
| dark-grey | #7B879D | Ausgewählte Tab-Buttons als Fläche sowie Schriftfarbe für deaktivierte oder zurückgenommene Interaktionselemente. |
| black | #000000 | Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten. |
| white | #FFFFFF | Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern. |
| signal-green | #009101 | Positive Score-Balken und positive Chart-Werte. |
| signal-yellow | #9C7A00 | Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen. |
| signal-red | #9B3B2F | Negative Score-Balken und negative Chart-Werte. |
| font-dark | #414959 | Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung. |
| font-light | #FFFFFF | Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons. |
| font-hyperlink | #FF6900 | Links in Texten, Prozessbuttons und Page-Navigations-Cards. |
| process-inactive | #FFAE79 | Inaktive Hintergrundfläche des Prozessbuttons. |
| background-purple | #373C4A | Globaler Portalhintergrund. |
| background-purple-light | #656C7D | Group Cards und gruppierende Card-Flächen. |
| transparent | transparent | Transparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche. |
| Name | Wert | Verwendung |
|---|---|---|
| form-area | background: light-grey | Hintergrund von Formularbereichen, Optionszeilen und Formular-Preview-Flächen. Die Fläche gehört nicht zum einzelnen Formularelement. |
| form-active | background: white; color: font-dark | Aktive oder ausgewählte Eingabefelder, Checkboxen, Radios, Pulldown-Trigger und Pulldown-Optionen. Bei Pulldowns zeigt die Zahl in Klammern die Anzahl gewählter Optionen. |
| form-inactive-selectable | background: white; color: font-dark | Nicht aktive, aber auswählbare Formularfelder, Checkboxen, Radios und Pulldown-Trigger. Dieser Zustand nutzt keine Transparenz. |
| form-disabled | background: white; color: dark-grey; opacity: disabled-opacity | Fachlich nicht verfügbare oder technisch deaktivierte Formularoptionen. Dieser Zustand ist nicht bedienbar. |
| pulldown-panel-open | background: medium-grey | Geöffnete Pulldown-Fläche. Das Panel öffnet unter dem Trigger, schließt bei Klick außerhalb und richtet sich bei Bildschirmrand automatisch links oder rechts aus. |
| overlay-panel-open | background: medium-grey oder light-grey je nach Komponente | Ausklappbare Overlays wie Pulldown-Panels, Hilfetexte und Sandwich-Menüs. Es ist immer nur das jeweils relevante Overlay geöffnet. |
| Name | Wert | Verwendung |
|---|---|---|
| body | Open Sans, 1rem, Regular | Standardtext im Portal. |
| brand | Open Sans, 1.6rem, Regular | Portal-Brand im Portal Header. |
| h1 | Open Sans, 1.5rem, Regular | Hauptüberschriften; kleiner als Portal-Brand und 50% größer als Fließtext. |
| h2 | Open Sans, 1.25rem, Regular | Zwischenüberschriften; kleiner als H1 und 25% größer als Fließtext. |
| strong | Open Sans, 1rem, Semibold | Hervorgehobener Text, Labels und Button-Text. |
| section-title | Open Sans, 1rem, Regular | Section-Titel; aktuell identisch mit body, aber separat benannt. |
| bar-label | Open Sans, 1rem, Semibold | Labels bei Score-Balken. |
| table-label | Open Sans, 0.8rem, Regular | Tabellen- und Grafikbeschriftungen sowie kurze Hilfetexte und Tooltip-Inhalte. |
| table-value | Open Sans, 0.8rem, Semibold | Hervorgehobene Tabellen- und Grafikwerte. |
| Portal | Abweichung | Verwendung |
|---|---|---|
| NAURUA | darkblue → #354A52; body → Avenir, sans-serif | Portalgebundene Foundation-Overrides für das zweite Portal. Die Überschreibung greift nur, wenn das Root-Element `data-portal="naurua"` setzt. |
| Name | Wert | Verwendung |
|---|---|---|
| spacing-small | 0.3rem | Kleine Abstände zwischen Interaktionselementen, Card-Segmenten, Pulldown-Optionen, Overlay-Triggern und eng zusammengehörigen Cards. |
| spacing-large | 1rem | Große Abstände zwischen Cards und Gruppen. |
| card-segment-padding | 0.75rem vertikal / 1rem horizontal (Desktop), 0.5rem horizontal (Mobile) | Innenabstand von Card-Segmenten; auf Mobile wird das horizontale Padding reduziert. |
| interaction-padding | 0.25rem vertikal / 1rem horizontal | Innenabstand von Interaktionselementen. |
| Name | Wert | Verwendung |
|---|---|---|
| interaction-height | 2rem | Einheitliche Höhe für Buttons, Tabs, Pulldowns, Eingabefelder und Sandwich-Menü-Buttons. |
| compact-interaction-height | 1.5rem | Einheitliche Höhe für schmale Interaktionselemente wie Tasten-Navigation-schmal. |
| compact-interaction-padding | 0.15rem vertikal / 0.75rem horizontal | Innenabstand schmaler Interaktionselemente. |
| small-interaction-element-size | 1.25rem | Eigene Höhe und Breite kleiner Interaktionselemente wie Fragezeichen-Icon, Checkboxen und Radio Buttons. |
| disabled-opacity | 0.45 | Deckkraft für fachlich nicht verfügbare oder technisch deaktivierte Interaktionselemente. |
| sandwich-line-width | 1.25rem | Länge der Striche im Sandwich-Menü-Button. |
| sandwich-line-height | 4px | Dicke der Striche im Sandwich-Menü-Button. |
| sandwich-line-gap | 3px | Abstand zwischen den Strichen im Sandwich-Menü-Button. |
| score-bar-height | 1rem | Höhe horizontaler Score-Balken. |
| score-marker-width | 6px | Breite des Median-Markers. |
| score-marker-height | score-bar-height + 2px | Median-Marker ragt oben und unten je 1px über den Score-Balken hinaus. |
| chart-height-bar | 24rem | Basis-Höhe für Bar Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite. |
| chart-height-line | 18rem | Basis-Höhe für Line Charts; in der Component wird sie proportional reduziert, die Chart-Höhe skaliert nicht mit der Breite. |
| chart-axis-label-column-width | 4rem | Breite der Y-Achsenbeschriftungsspalte bei Charts. |
| chart-axis-label-gap | 5px | Horizontaler Abstand zwischen Y-Achsenbeschriftung und Y-Achse. |
| chart-grid-line-width | 1px | Linienstärke von Gridlines und Achsen in Charts. |
| chart-line-width | 2px | Linienstärke der Datenlinie im Line Chart. |
| input-label-width | 9rem | Desktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern. |
| input-field-desktop-width | 400px | Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. |
| input-field-max-width | 600px | Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). |
| object-card-height | 600px | Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). |
| object-group-card-min-width | 450px | Mindestbreite der Group Card im Pattern Object Group Card. |
| object-group-card-max-width | 650px | Maximale Breite der Group Card im Pattern Object Group Card. |
| object-group-card-height | 700px | Fixe Desktop-Höhe der Group Card im Pattern Object Group Card. |
| notifications-card-min-width | 445px | Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. |
| search-field-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
| layer-pulldown-panel | 40 | Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. |
| multiselect-pulldown-panel-desktop-width | 500px | Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. |
| multiselect-pulldown-panel-mobile-width | 80vw | Reservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. |
| options-row-mode-toggle-width | 7rem | Breite des Modus-Schiebers in der Options Row. |
| options-row-help-panel-width | 16rem | Breite des Help-Panels in der Options Row. |
| card-list-drawer-width | 40% | Relative Breite des ausziehbaren Card-Listenbereichs. |
| notifications-text-segment-fixed-height | 150px | Desktop-Höhe des ersten Text-Segments im Standard-Pattern Notifications. |
| notifications-text-segment-fixed-height-small | 80px | Desktop-Höhe des ersten Text-Segments in der Variante Pattern Notifications small. |
| Name | Wert | Verwendung |
|---|---|---|
| radius-card | 8px | Cards, Group Cards, Formularflächen, Optionszeilen und geöffnete Overlay-Flächen. |
| radius-interaction | 4px | Buttons, Eingabefelder, Pulldown-Trigger, Checkboxen und Modus-Schieber. |
| radius-graph-bar | 2px | Score-Balken und Graphik-Balken. |
| Name | Wert | Verwendung |
|---|---|---|
| shadow-none | none | Kein Schatten für nicht-overlay Flächen. |
| shadow-overlay | 0 10px 24px rgba(0, 0, 0, 0.22) | Standard-Schatten für aufklappbare Flächen wie Pulldown-, Menü- und Help-Panels. |
| border-none | none | Es werden keine Borders verwendet. |