Unit tokens define consistent usage of spacing and sizes.

UIC unit system is based on one base value defined in the theme, which is 4px in the default theme. We generate multipliers from 1 to 10 to be used in the product directly.

/* Usage */
.element {
margin-top: var(--uic-unit-x4);

Sometimes these multiplier variables are not enough, so you can multiply the value yourself in CSS.

.element {
height: calc(var(--uic-unit-x1) * 40);