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
#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
chatbot 100
header 101
menu-overlay 102
sticky-link 103
breadcrumb 104
stage-insert 105
default 106
info-desc 107