Spacing

Consistent spacing is essential to creating clear, readable, and accessible layouts across GNWT websites and applications. The GNWT Design System uses a responsive, token-based spacing scale to maintain visual rhythm and alignment throughout components and content.

Notation

This spacing scale is built on a base unit of 1rem (16px) and includes a range of values from very small to large, supporting flexible design needs while preserving consistency.

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The breakpoint-specific spacing utility classes, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
  • e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • See Size column of spacing scale below.
  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • auto - for classes that set the margin to auto

Spacing Scale

The following table describes how each increment in the spacing scale effects the value with a visual example.

Size Class Visual size Rem Pixels
1 {property}{sides}-1
0.125rem 2px
2 {property}{sides}-2
0.25rem 4px
3 {property}{sides}-3
0.5rem 8px
4 {property}{sides}-4
0.75rem 12px
5 {property}{sides}-5
1rem 16px
6 {property}{sides}-6
1.5rem 24px
7 {property}{sides}-7
2rem 32px
8 {property}{sides}-8
3rem 48px
9 {property}{sides}-9
4rem 64px

Spacing in Context

Spacing helps create clear relationships between headings, paragraphs, and components. In most cases, the default spacing defined by the design system should be used to maintain consistency across pages. However, margin utility classes can be applied when adjustments are needed for specific layouts. Open the HTML tab in this example to see how spacing classes are used to refine the space between elements.

Our Climate Commitments

We recognize that climate change poses significant challenges to northern communities, traditional ways of life, and our territory's unique ecosystems. Our approach balances environmental stewardship with the needs of residents and communities.

Key Target

Reduce greenhouse gas emissions by 30% below 2005 levels by 2030, while supporting community resilience and adaptation measures.

Read more

Renewable Energy Initiatives

The NWT is investing in renewable energy projects to reduce our reliance on fossil fuels and lower emissions across communities. These initiatives include solar installations, biomass heating systems, and micro-hydro projects.

  • Solar panel installations in remote communities
  • Biomass heating for government buildings
  • Energy efficiency retrofits for housing
  • Community-scale renewable energy projects

Get Involved

Learn how you can contribute to climate action in your community through energy conservation, sustainable transportation, and local environmental initiatives.

Learn how to get involved
Open example in a new tab

Component Spacing

The design system provides automatic spacing between components using CSS classes that ensure consistent vertical rhythm throughout your pages.

Default Component Spacing

Use the .component class on any component content section to apply consistent spacing:

.component { margin-bottom: map.get($spacers, 9); // Default spacing between components &:first-child .component-heading { margin-top: 0; // Remove top margin from first component heading } &:last-child { margin-bottom: 0; // Remove bottom margin from last component } }

When to Use

  • Apply to major content sections, cards, or standalone components.
  • Use on any element that should have consistent spacing from other page elements.
  • Automatically handles first/last child spacing adjustments.

Large Component Spacing

For landing pages and full-width layouts without sidebars, use .component-spacing-lg to create more generous spacing between sections.

When to Use

  • Landing pages where components need more breathing room.
  • Full-width layouts without sidebar content.
  • Marketing or promotional pages that benefit from increased visual separation.
  • Only applies on large screens (lg breakpoint, 992px and up) to maintain appropriate spacing on mobile.

Refer to the Landing Page pattern demo for a live example of its implementation.

Updated: Dec 02, 2025