Spacing & Size

Consistent spacing scale based on 4px grid. Control heights for interactive elements.

Spacing Scale (4px grid)

Space 1

4px

--ds-space-1

Space 2

8px

--ds-space-2

Space 3

12px

--ds-space-3

Space 4

16px

--ds-space-4

Space 5

20px

--ds-space-5

Space 6

24px

--ds-space-6

Space 8

32px

--ds-space-8

Space 10

40px

--ds-space-10

Space 12

48px

--ds-space-12

Space 16

64px

--ds-space-16

Padding Aliases

Padding XXS

4px

--ds-padding-xxs

Padding XS

8px

--ds-padding-xs

Padding SM

12px

--ds-padding-sm

Padding MD

16px

--ds-padding-md

Padding LG

24px

--ds-padding-lg

Padding XL

32px

--ds-padding-xl

Control Heights

Size Unit

4px

Base grid unit

Size Step

4px

Step multiplier (compact = 2)

Control XS

16px

Tiny controls

Control SM

24px

Small buttons, inputs

Control MD

32px

Default buttons, inputs

Control LG

40px

Large buttons, inputs