Spacing as Grammar

Learning Goal

To create a spacing scale that provides rhythm and consistency for every component.

Who

Designers and developers interested in visual design principles.

What

Understanding the importance of spacing in design and creating a scale to apply consistently.

Where

In any design project where visual consistency is desired.

When

When you want to create a design system that ensures rhythm and consistency across components.

Why it matters

Spacing creates calm or density, which is essential for a positive user experience. Inconsistency = visual noise, which can confuse users.

How

1. Create a spacing scale with rules (4/8/12/16/24/32) with px values.
2. Map tokens to components (card padding md, section lg).
3. Ban random px values.
4. Document vertical rhythm (heading margins) unified.
5. Apply to a layout and label source tokens.

Guided Exercise (10–15 minutes)

1. Create spacing tokens and usage (section padding xl, card padding md).
2. Set heading margin rules.
3. Apply to a layout and label source tokens.

Independent Exercise (5–10 minutes)

Audit a page and replace random values with tokens.

Self-Check

1. Spacing scale exists.
2. Vertical rhythm documented.
3. Random px removed.

Optional Deepening

1. 8pt Grid: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
2. Atlassian spacing: https://atlassian.design/foundations/spacing

Read more

For more information on design systems and spacing, check out our resources page: https://example.com/resources