Padding is the internal spacing in components that separates content from external boundaries.
Padding helps content breath, so places with lot of information don’t feel so crowded — making that content easier to consume.
- Use tokens coming from the design system.
- Use semantic tokens instead of token values.
- Don’t use custom or hard-coded values.
Components that are usually part of a set, and that need to contain distinct information in a small area.
Components that have a varying amount of content inside use paddings that give content space to breathe, make it easier to read and digest.
Content that goes inside a card (for example, with a background) may have a small padding area if the amount of information you need to fit inside cannot afford bigger space.