Responsive Padding
These tokens can be applied to paddings that are allowed to change between our different Size Themes: Small (left) and Large (right). Apply the token once and it automatically adjusts depending on your context.
Fixed Padding
The Fixed Padding tokens remain the same size no matter the Theme (it does not change responsively to different viewports or sizes). This can come in handy for paddings that need to stay the same throughout the change of viewports.
Space vs. Padding
Use Space tokens for margins, gaps and spacing so mostly for space between components and elements. And Padding tokens for (inner) padding within components and elements.
1. Padding token - 2. Space token