A sizing system is a great tool to have when building user interfaces because it limits the choices for a padding, a width, a margin, etc. It will help you avoid playing the pixel game. Every size in the scale is clearly differentiated from its closer sizes, and that makes it extremely easy to select the right size.

If you stick to the scaling system, all your UIs will have a good vertical and horizontal spacing rhythm. Every small detail makes a huge difference in the look and feel of your interface.

Sizing and Scaling System

var(--size-00)

0px / 0px

var(--size-01)

0.125rem / 2px

var(--size-02)

0.25rem / 4px

var(--size-03)

0.5rem / 8px

var(--size-04)

0.75rem / 12px

var(--size-05)

1rem / 16px

var(--size-06)

1.5rem / 24px

var(--size-07)

2rem / 32px

var(--size-08)

3rem / 48px

var(--size-09)

4rem / 64px

var(--size-10)

6rem / 96px

var(--size-11)

8rem / 128px

var(--size-12)

12rem / 192px

var(--size-13)

16rem / 256px

var(--size-14)

24rem / 384px

var(--size-15)

32rem / 512px

var(--size-16)

48rem / 768px

var(--size-17)

64rem / 1024px

var(--size-18)

90rem / 1440px

Customizing

Dashvar's sizing and spacing system should have enough choices for most interfaces. However, you can always extend it with your own sizes.

You can add new sizes adding more variables to the :root pseudo-class:

:root {
  --size-xs: 5px; 
  --size-s: 10px; 
  --size-m: 20px; 
  --size-l: 40px; 
  --size-xl: 80px; 
}