Design-Tokens

Design-Tokens sind benannte visuelle Design-Informationen, wie Farben, Breakpoints und Fonts, die anstelle von hardgecodeten Werten verwendet werden.

Fonts

Variante Demo
Normal (Regular)
FF Zwo Regular
Kursiv (Italic)
FF Zwo Italic
Dünn (Light)
FF Zwo Light
Dünn-Kursiv (Light Italic)
FF Zwo Light Italic
Fett (Bold)
FF Zwo Bold

Farben

#333 $color-anthracite
#ecfbff $color-turquoise-light
#9decff $color-turquoise
#7a8991 $color-steelgrey-xdark
#afbcc5 $color-steelgrey-dark
#ccd4d9 $color-steelgrey
#e3e9ec $color-steelgrey-light
#eef1f3 $color-steelgrey-xlight
#f0ad4e $color-yellow
#0e8221 $color-green-xdark
#288221 $color-green-dark
#5cb85c $color-green
#cecac2 $color-sand-dark
#f5f0e7 $color-sand
#f8f6f3 $color-sand-light
#f7f6f2 $color-sand-xlight
#004070 $color-blue
#236fa8 $color-blue-light
#9decff $color-blue-xlight
#a80818 $color-red-dark
#dc0a1e $color-red

Breakpoints

Name Min. Größe Max. Größe Max. Breite Container Spaltenabstand Randabstand
s 0px 580px 48rem 2rem 1rem
m 581px 885px 75rem 3rem 3rem
l 886px 1190px 119rem 3rem 4rem
xl 1191px 1279px 119rem 3rem 4rem
xxl 1280px

Hinweis: xxl ist ein Sonderbreakpoint. Ab dieser Breite wird die Seite auf einen sandgrauen Hintergrund gesetzt.

Layers

Die Layer-Tokens setzen den z-index-Wert für Elemente. Zugriff verfolgt via z(<key>).

Key Value
tooltip 100
chatbot 101
header 102
menu-overlay 103
sticky-link 104
breadcrumb 105
stage-insert 106
default 107
info-desc 108