General Guidance
Compound uses an 8px soft grid for layouts. To maintain consistency in key areas, follow these spacing guidelines.
React Native Platform
Visual examples of form elements are available in the forms overview guidelines.
Layout
|
|
|
Small Screen |
Medium Screen |
Large Upward |
|---|---|---|---|---|
|
1 |
Viewport → Container |
0px |
40px |
40px |
|
2 |
Container → Bottom |
0px |
40px |
40px |
Container
|
|
|
Small Screen |
Medium Screen |
Large Upward |
|---|---|---|---|---|
|
3 |
Padding Top/Bottom |
16px |
32px |
32px |
|
4 |
Padding Left/Right |
16px |
40px |
40px |
Medium and above spacing annotations
Small screen spacing annotations
Content
|
|
|
Small Screen |
Medium Screen |
Large Upward |
|---|---|---|---|---|
|
1 |
Breadcrumb → h1 |
16px |
16px |
16px |
|
2 |
h1 → First Item |
16px |
16px |
16px |
|
3 |
Subheading → Content |
16px |
16px |
16px |
|
4 |
Section → Section |
40px |
40px |
40px |
|
5 |
Paragraph → Input |
32px |
32px |
32px |
Forms
The FormStack component provides some of this spacing value automatically.
|
|
Stack Variant |
Small Screen |
Medium Screen |
Large Upward |
|---|---|---|---|---|
|
Label as h1 → First Item |
|
16px |
16px |
16px |
|
Legend as h1 → First Item |
|
16px |
16px |
16px |
|
Label →First Item |
|
8px |
8px |
8px |
|
Legend → First Item |
|
8px |
8px |
8px |
|
Form Elements |
Fields |
8px |
8px |
8px |
|
Radio/Checkbox Groups |
Input Group |
16px |
16px |
16px |
|
Fields → Field |
Field Group |
16px |
16px |
16px |
|
Fieldset → Fieldset |
Fieldset |
32px |
32px |
32px |
|
Fieldset → Next Section |
Section |
32px |
32px |
32px |
|
Form → Button Group |
|
32px |
32px |
32px |