Spacing System

The NETWRIX spacing system is built on a base measure unit that ensures consistent spacing throughout the application. This approach promotes visual rhythm and makes the design scalable and predictable.

Location: src/scss/framework/_var/_vars.scss and src/scss/framework/utilities/_spacing.scss

Base Measure Unit

Base Unit:

$measure: 0.5rem; /* 0.5rem = 8px (when root font-size is 16px) */

All spacing values in the system are multiples of this base measure, creating a harmonious spacing scale that maintains consistency across all components and layouts.

Spacing Scale

The spacing system works by multiplying the base measure ($measure) by specific numbers to create consistent spacing values.

How It Works:

$measure * 1  = 0.5rem  = 8px
$measure * 2  = 1rem    = 16px
$measure * 3  = 1.5rem  = 24px
$measure * 4  = 2rem    = 32px
$measure * 5  = 2.5rem  = 40px
$measure * 6  = 3rem    = 48px
$measure * 7  = 3.5rem  = 56px
$measure * 8  = 4rem    = 64px
$measure * 10 = 5rem    = 80px
$measure * 15 = 7.5rem  = 120px

Visual Scale:

1  →  8px   ▌
2  →  16px  ▌▌
3  →  24px  ▌▌▌
4  →  32px  ▌▌▌▌
5  →  40px  ▌▌▌▌▌
7  →  56px  ▌▌▌▌▌▌▌
8  →  64px  ▌▌▌▌▌▌▌▌
10 →  80px  ▌▌▌▌▌▌▌▌▌▌
15 →  120px ▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌

Spacing Utilities

Spacing utilities are automatically generated utility classes that allow you to apply consistent spacing without writing custom CSS. They follow a clear naming convention and support responsive variations.

Available Values: auto, 0, 1, 2, 3, 4, 5, 7, 8, 10, 15

Naming Pattern:

.u--{property}-{value} - For all breakpoints
.u--{property}-{breakpoint}-{value} - For specific breakpoints

Properties:

pt = padding-top
pr = padding-right
pb = padding-bottom
pl = padding-left
mt = margin-top
mr = margin-right
mb = margin-bottom
ml = margin-left

Responsive Breakpoints:

desktop - 1700px
tabletl - 1300px
tabletm - 1024px
tablets - 810px

Padding Utilities

Basic Padding Examples

HTML Examples:

<!-- Padding top 10 units (80px) on all screens -->
<section class="u--pt-10">
  <h2>Section with top padding</h2>
</section>

<!-- Padding bottom 10 units -->
<section class="u--pb-10">
  <p>Section with bottom padding</p>
</section>

<!-- Padding left 4 units (32px) -->
<div class="u--pl-4">
  <p>Content with left padding</p>
</div>

<!-- Padding right 5 units (40px) -->
<div class="u--pr-5">
  <p>Content with right padding</p>
</div>

<!-- Combined paddings on all sides -->
<div class="u--pt-8 u--pb-8 u--pl-4 u--pr-4">
  <p>Box with padding on all sides</p>
</div>

Responsive Padding Examples

HTML Examples:

<!-- Padding reduces on tablets -->
<section class="u--pt-10 u--pt-tablets-7">
  <p>80px padding on desktop, 56px on tablets and below</p>
</section>

<!-- Progressive reduction across breakpoints -->
<div class="u--pt-15 u--pt-tabletm-10 u--pt-tablets-7">
  <p>
    120px on large screens → 80px on tablet medium → 56px on tablets small
  </p>
</div>

<!-- Different responsive values for top and bottom -->
<section class="u--pt-10 u--pt-tablets-7 u--pb-8 u--pb-tablets-5">
  <h2>Asymmetric responsive padding</h2>
</section>

<!-- Mobile-specific padding -->
<div class="u--pl-5 u--pl-tablets-3 u--pr-5 u--pr-tablets-3">
  <p>Reduced horizontal padding on mobile</p>
</div>

Real-World Padding Pattern

This is a very common pattern used throughout NETWRIX:

<!-- Typical section padding with responsive behavior -->
<section class="u--pt-10 u--pt-tablets-7 u--pb-10 u--pb-tablets-7">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-12">
        <h2 class="f--font-b">Section Heading</h2>
        <p class="f--font-f">Section content goes here.</p>
      </div>
    </div>
  </div>
</section>

Breakdown:

Desktop: 80px padding top and bottom
Tablets (810px and below): 56px padding top and bottom
Provides comfortable spacing on large screens while optimizing space on mobile

Margin Utilities

Basic Margin Examples

HTML Examples:

<!-- Margin top 5 units (40px) -->
<div class="u--mt-5">
  <p>Content with top margin</p>
</div>

<!-- Margin bottom 7 units (56px) -->
<div class="u--mb-7">
  <p>Content with bottom margin</p>
</div>

<!-- Auto margin for horizontal centering -->
<div class="u--ml-auto u--mr-auto" style="max-width: 800px;">
  <p>Centered content block</p>
</div>

<!-- No margin (override defaults) -->
<h2 class="u--mt-0 u--mb-0">
  Heading with no vertical margins
</h2>

<!-- Spacing between sibling elements -->
<div class="u--mb-4">
  <p>First paragraph</p>
</div>
<div class="u--mb-4">
  <p>Second paragraph</p>
</div>
<div>
  <p>Last paragraph (no margin)</p>
</div>

Responsive Margin Examples

HTML Examples:

<!-- Responsive top margin -->
<div class="u--mt-10 u--mt-tablets-5">
  <p>Large margin on desktop, smaller on tablets</p>
</div>

<!-- Responsive bottom margin for card spacing -->
<div class="u--mb-8 u--mb-tabletm-5 u--mb-tablets-3">
  <div class="card">Card content</div>
</div>

<!-- Remove margin on mobile -->
<div class="u--mt-5 u--mt-tablets-0">
  <p>Has margin on desktop, none on tablets</p>
</div>

Complete Spacing Examples

Example 1: Full Page Section

<section class="u--pt-10 u--pt-tablets-7 u--pb-10 u--pb-tablets-7">
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-10">
        <h2 class="f--font-b u--mb-4">Our Solutions</h2>
        <p class="f--font-f u--mb-5">
          Comprehensive security solutions for modern enterprises.
        </p>
        <div class="u--pt-5">
          <!-- CTA buttons or additional content -->
        </div>
      </div>
    </div>
  </div>
</section>

Example 2: Card with Internal Spacing

<div class="card u--pt-5 u--pb-5 u--pl-4 u--pr-4 u--pt-tablets-4 u--pb-tablets-4">
  <h3 class="f--font-c u--mb-3">Card Title</h3>
  <p class="f--font-f u--mb-4">
    Card description with bottom margin for separation.
  </p>
  <a href="#" class="u--mt-auto">Read More →</a>
</div>

Example 3: Stacked Content with Responsive Spacing

<div class="content-stack">
  <div class="u--mb-8 u--mb-tablets-5">
    <h2 class="f--font-b">First Section</h2>
    <p class="f--font-f">Content here...</p>
  </div>

  <div class="u--mb-8 u--mb-tablets-5">
    <h2 class="f--font-b">Second Section</h2>
    <p class="f--font-f">Content here...</p>
  </div>

  <div>
    <h2 class="f--font-b">Final Section</h2>
    <p class="f--font-f">Content here...</p>
  </div>
</div>

Spacing in SCSS

You can also use the $measure variable directly in your SCSS files:

@use "@scss/framework/_var/_vars.scss" as *;

.my-component {
  padding: $measure * 5; // 40px
  margin-bottom: $measure * 8; // 64px

  &__header {
    margin-bottom: $measure * 3; // 24px
  }

  &__content {
    padding-top: $measure * 4; // 32px
    padding-bottom: $measure * 4; // 32px
  }

  // Responsive spacing
  @media all and ($viewport-type: $tablets) {
    padding: $measure * 3; // 24px on tablets
  }
}

Spacing Best Practices

Do’s ✅

✅ Always use measure multiples: Use spacing utilities or calc($measure * X) in SCSS
✅ Prefer utility classes: Use .u--pt-10 instead of writing custom CSS when possible
✅ Use responsive spacing: Reduce spacing on smaller screens for better mobile UX
✅ Follow the scale: Stick to available values (0, 1, 2, 3, 4, 5, 7, 8, 10, 15)
✅ Reference Figma: Verify spacing values match design specifications using Developer Mode
✅ Think in multiples of 8: Makes calculations predictable and maintainable

Don’ts ❌

❌ Don’t use arbitrary pixel values like padding: 23px
❌ Don’t create spacing values outside the defined scale
❌ Don’t forget responsive spacing adjustments
❌ Don’t mix spacing systems (always use measure-based values)
❌ Don’t use spacing values that aren’t in the available list (stick to 0, 1, 2, 3, 4, 5, 7, 8, 10, 15)

Common Spacing Patterns

Use Case	Desktop	Tablets	Mobile
Large section spacing	`u--pt-10 u--pb-10`	`u--pt-7 u--pb-7`	`u--pt-7 u--pb-7`
Medium section spacing	`u--pt-7 u--pb-7`	`u--pt-5 u--pb-5`	`u--pt-5 u--pb-5`
Card internal padding	`u--pt-5 u--pb-5 u--pl-4 u--pr-4`	`u--pt-4 u--pb-4 u--pl-3 u--pr-3`	Same
Element separation	`u--mb-4`	`u--mb-3`	`u--mb-3`
Heading margins	`u--mb-3` or `u--mb-4`	Same	Same

Quick Reference: Spacing Values

Multiplier	Class Suffix	Calculated Value	Pixels	Common Use
auto	`auto`	`auto`	-	Centering with margins
0	`0`	`0`	0px	Remove spacing
1	`1`	`$measure * 1`	8px	Micro spacing
2	`2`	`$measure * 2`	16px	Tight spacing
3	`3`	`$measure * 3`	24px	Small spacing
4	`4`	`$measure * 4`	32px	Medium spacing
5	`5`	`$measure * 5`	40px	Comfortable spacing
7	`7`	`$measure * 7`	56px	Section spacing (mobile)
8	`8`	`$measure * 8`	64px	Large spacing
10	`10`	`$measure * 10`	80px	Section spacing (desktop)
15	`15`	`$measure * 15`	120px	Extra large spacing

Next Section

Continue to Grid & Layout to learn about the 12-column grid system and responsive layout patterns.

Chapter 2 Overview - Back to foundations introduction
Typography System - Previous section
Grid & Layout - Next section
Figma: NETWRIX UI Design - Foundations
Code: src/scss/framework/_var/_vars.scss - Base measure variable
Code: src/scss/framework/utilities/_spacing.scss - Spacing utilities

Spacing System

Spacing System

Base Measure Unit

Spacing Scale

Spacing Utilities

Padding Utilities

Basic Padding Examples

Responsive Padding Examples

Real-World Padding Pattern

Margin Utilities

Basic Margin Examples

Responsive Margin Examples

Complete Spacing Examples

Example 1: Full Page Section

Example 2: Card with Internal Spacing

Example 3: Stacked Content with Responsive Spacing

Spacing in SCSS

Spacing Best Practices

Do’s ✅

Don’ts ❌

Common Spacing Patterns

Quick Reference: Spacing Values

Next Section

Related Resources