Design-Tokens sind benannte visuelle Design-Informationen, wie Farben, Breakpoints und Fonts, die anstelle von hardgecodeten Werten verwendet werden.
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 |
$color-anthracite
$color-turquoise-light
$color-turquoise
$color-steelgrey-xdark
$color-steelgrey-dark
$color-steelgrey
$color-steelgrey-light
$color-steelgrey-xlight
$color-yellow
$color-green-xdark
$color-green-dark
$color-green
$color-sand-dark
$color-sand
$color-sand-light
$color-sand-xlight
$color-blue
$color-blue-light
$color-blue-xlight
$color-red-dark
$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>)
.
Key | Value |
---|---|
chatbot |
100 |
header |
101 |
menu-overlay |
102 |
sticky-link |
103 |
breadcrumb |
104 |
stage-insert |
105 |
default |
106 |
info-desc |
107 |