Space

A 4 px base with a tight palette of steps. Generous space over cramped — WellSourced should feel like a well-printed book, not a dense dashboard.

Scale#

space-1

4px--space-1

Tight, inside-pill gaps.

space-2

8px--space-2

Icon ↔ label.

space-3

12px--space-3

Between grouped controls.

space-4

16px--space-4

Paragraph gap, small gutter.

space-5

20px--space-5

Card padding, field gap.

space-6

24px--space-6

Card padding, default gutter.

space-8

32px--space-8

Between content blocks.

space-10

40px--space-10

Large card padding.

space-12

48px--space-12

Section spacing on desktop.

space-16

64px--space-16

Page vertical rhythm.

space-20

80px--space-20

Large hero padding.

space-24

96px--space-24

Major section separation.

Steps come from the scale. Don't invent 18px or 22px. If you need a step that isn't there, say so — add it to the scale, or rethink the composition.
Between a label and its field: space-2 (8 px). Between fields in a form: space-5 (20 px). Between sections: space-16 (64 px) or more.
Padding is generous by default. Cards use space-6 (24 px) minimum. Hero surfaces use space-10–space-16.
Vertical rhythm matters more than grid precision. Consistent block spacing reads calmer than pixel-perfect alignment.