Layering

Wofür dient das Layering System?

Das Layering-System hilft dabei:

• visuelle Hierarchien klar zu strukturieren
• Kontraste automatisch korrekt zu halten
• Komponenten flexibel in verschiedenen Kontexten wiederzuverwenden
• Designs einfacher zu pflegen
• Light- und Dark-Themes konsistent umzusetzen

Gerade bei komplexen Oberflächen mit vielen Containern oder Panels, z. B. im App-Kontext, verhindert das System visuelle Inkonsistenzen.

Bei KERN gibt es in diesem Kontext zwei Konzepte: Ebenen und Oberflächen.

Die Ebenen (Level)

Die Ebenen (Level) dienen dazu, größere Bereiche einer Seite hierarchisch anzuordnen. Jede Ebene definiert, wie nah oder relevant ein Bereich für die Nutzer:innen ist. Elemente, die näher an den Nutzer:innen sind oder eine höhere Priorität haben, werden auf einer höheren Ebene platziert als weniger relevante Inhalte.

Beispiel: Ein über der Navigation angezeigter Inhalt befindet sich auf einer höheren Ebene als die Navigation selbst.

KERN bietet drei Ebenen fürs Layouting:

Level 0:

Die Basisebene der Seite. Sie bildet den Hintergrund und enthält die grundlegenden Inhalte.

Level 1:

Erhöhte Container oder Bereiche, die sich optisch von der Basisebene abheben und wichtige Inhalte hervorheben.

Level 2:

Elemente innerhalb eines erhöhten Containers, die sich zusätzlich abgrenzen und besonders im Fokus der Nutzer:innen stehen sollen.

Komponenten mit Oberfläche (Surface)

Zusätzlich zu den Ebenen (Levels) können Komponenten oder einzelne Elemente innerhalb von Komponenten eine spezifische Oberfläche (Surface) zugewiesen bekommen. Dies ist beispielsweise bei Komponenten wie Card, Task List oder verschiedenen Input-Elementen der Fall. Surface-Token bestimmen das visuelle Erscheinungsbild einer Komponente, bspw. Hintergrundfarbe. Sie sind kontextabhängig und passen sich visuell an die jeweilige Ebene an, auf der die Komponente platziert ist.

Verhalten von Inhalten im Layering

Bei KERN passen sich Komponenten automatisch an ihre jeweilige Umgebung an. Anstatt feste Farben zu verwenden, greifen die Komponenten auf kontextuelle Variablen (contextual token) zurück, wie zum Beispiel:

• layout-background-contextual
• layout-text-contextual
• decorative-border-contextual
• form-input-border-contextual
• action-default-contextual

Diese Token ändern ihren Wert abhängig davon, auf welcher Ebene (Level) oder Oberfläche (Surface) sich die Komponente befindet.

Vorteil: Dadurch können Komponenten flexibel auf unterschiedlichen Hintergründen eingesetzt werden, ohne dass Farben manuell angepasst werden müssen. Das sorgt für Konsistenz und erleichtert die Pflege des Designs.