Design-Tokens

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

Fonts

#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

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.

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