Utilise Autocomplete suggestions for Made design tokens.
See the exact value of the Made Design Token’s CSS custom properties on hover.
Switch between Made Tokens versions
Useful when working on multiple projects and wish to quickly switch between different versions of our Made Tokens.
Simply go to "Extensions > Made Design Tokens > Extension Settings" to switch between versions.
Supported Made Design Tokens versions: 2.1.1 and 2.2.0
Start typing the CSS property you want to set. (e.g. color:)
Type the trigger character --.
The autocomplete tokens suggestions associated with the typed CSS property will be shown.
Select the token and it will be inserted along with the var() function.
Design Tokens Integration
Made Design Tokens are the common building blocks of visual design decisions (like color, type scale, and spacing units) that all Mastercard projects share. By using design tokens, designers and developers spend more time-solving problems and less time fussing over pixels, hex codes, and redlining.