Spacing

The NSW Design System email framework uses an 8-point spacing scale based on a 4 px increment. This creates predictable spacing across components, ensuring consistency in emails viewed in Outlook, Gmail and iOS Mail.

Why we use a spacing scale

• Readability: Predictable gaps help users scan long emails more easily on both mobile and desktop.
• Consistency: Shared values reduce “one-off” padding that can erode the NSW visual identity.
• Resilience: Fixed pixel steps perform reliably in email clients that don't support modern CSS.
• Maintainability: A shared scale helps designers and developers communicate using the same spacing values.
• Responsive design: When columns stack on smaller screens, horizontal gutters become clean vertical gaps.

The scale

• Base unit: 4 px
• Common steps: 4, 8, 12, 16, 24, 32, 40, 48 px
• Usage guidance:
  • 4–12 px: For small elements (e.g. labels, headings)
  • 16–24 px: For paragraph spacing
  • 24–48 px: For sections and larger block spacing

Recommended defaults

Responsive behaviour

• Stacked columns: Convert horizontal gutters (16–24 px) into vertical gaps (16–24 px).
• Edge alignment: Maintain consistent outer padding (e.g. 24 px) to avoid layout shifts.

Default spacing scale