Sizing and Spacing
Sizing
Most of the components offered within RingUI are only available in one size. However, there are four exceptions. Buttons, text fields, select fields, and switchers are available in two sizes: small (24 pixels high) and medium (28 pixels high). It is very important that you choose one of these sizes and stick to your decision throughout the whole application. Never mix small and medium-sized components within the same application.
Spacing
In RingUI, your spacing should usually be based on the number 8 (8, 16, 24, 32, 48, 64, ...). If necessary, it is also possible to use in-between values based on the number 4 (4, 12, 20, 28, ...).
General Spacing Rules
Take into account the full height of text for correct spacing. The text line height is usually bigger than the height of the letters themselves.
Give your UI room to breathe. An easy way to clean up a design is to give your UI elements more space. In most cases, it is better to use too much space than too little.
Use spacing to emphasize relationships between components. Elements that are closer together are perceived as stronger related, while elements that are further away from each other are perceived as less related. This principle is one of the seven laws of Gestalt, which are highly relevant for UI Design (UX Collective, Using Gestalt Principles in UX Design) .
A typical mistake is to use the same vertical spacing between multiple elements without paying attention to their relationships.
Avoid this mistake in horizontal alignment as well.
Use spacing to create hierarchy. Elements that have a lot of space around them are perceived as more important. Therefore, if you want an element to stand out, give it more space.
