DESIGN TOKENS

Overview

Design Tokens sind die visuellen Design Bausteine im Design System. Wir nutzen Sie anstelle von hartkodierten Werten wie z.B. Hex Werten für Farben oder Pixel für Größen und Abstände. Design Tokens unterstützen uns dabei Benutzeroberflächen wartbar, konsistent und skalierbar zu halten.

Naming-Convention

Die Core-Level-Tokens Bennenungskonvention beruht auf folgender Systematik:

broken_image

Figma

core-level-naming

Beispiele für Core-Level-Tokens

broken_image

Figma

core-level-examples

Component-Level-Tokens Bennenungskonvention beruht auf folgender Systematik:

broken_image

Figma

component-level-naming

Beispiele für Componenent-Level-Tokens

broken_image

Figma

component-level-examples

INFO

Dev

Die Tokens werden in folgendem Gitlab Projekt gepflegt:

https://git.akdb.de/akdb/ds/design-tokens

Dev

https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/grundlagen-design-tokens--docs