Layout

Compound uses an 8px soft grid to space elements consistently across all platforms and viewports.

Spacing

Used for padding, margins and gap values

0rem

0.5rem

8px

1rem

16px

1.5rem

24px

2rem

32px

2.5rem

40px

3rem

48px

3.5rem

56px

4rem

64px

4.5rem

72px

5rem

80px

5.5rem

88px

6rem

96px

6.5rem

104px

7rem

112px

7.5rem

120px

8rem

128px

8.5rem

136px

9rem

144px

9.5rem

152px

10rem

160px

10.5rem

168px

11rem

176px

11.5rem

184px

12rem

192px

12.5rem

200px

0.25rem

0.5

4px

Input

1rem

Horizontal Spacing

0.5rem

Vertical spacing

Card

1rem

Horizontal Padding

1rem

Vertical Padding

Container

2.5rem

2rem

Container Vertical Spacing

Button

1rem

Horizontal Spacing

0.625rem

Vertical Button

Sizes

Use these values for width and height values.

0rem

0px

25%

1-4

25%

50%

1-2

50%

75%

3-4

75%

33.333333%

1-3

A Third

66.666667%

2-3

Two Thirds

100%

Full

100%