Spatial Design System & Padding System

🟢 When you design the size and spacing of things on your user interface (UI), you have several options: padding, margin, height, and width.

Sometimes, when you add padding to something, it can make it bigger than you want it to be.

For example, if you set the line spacing in a text to be 20 pixels and add 8 pixels of padding at the top and bottom, the overall height becomes 36 pixels.

Source — DesignSystem

So, what should you focus on?

There are two ways to handle this:
🟢 Element first (strict element sizing)
🟢 Content first (strict internal padding).

• Element first means you prioritize the size of solid things like buttons and form inputs. These things usually have predictable content and help create a consistent look for your design.

Source — Design System

• Content first means you care more about how the content inside elements is displayed. In this case, you make sure there’s enough padding inside, and the element’s size adapts to the content.