Global size tokens
We use a set of primitive size tokens to define minimum or maximum sizes for specific elements. These tokens are based on a 4px baseline grid that scales up to 8px at the end of the range.
Icons
We have a separate scale for icon sizes to give us more control over any differences between vector shapes and their parent components.
Base tokens
Every size token is defined as combination of base and modifier for easier maintenance. This allows us to experiment with different scales and modes by changing couple of tokens instead of every size token in the system.
{
"size": {
"2": {
"$type": "dimension",
"$value": "{size.base} + {size.modifier}",
"$description": "Default switch buttons, small avatars, ..."
}
}
}