Spacing

A utility-first spacing system for controlling rhythm across sections and components. Use spacer blocks for layout gaps, and padding/margin classes for element-level spacing—avoiding conflicting utilities on the same side unless you’re intentionally overriding.
All spacing values are controlled through the Variables (V) panel under Scale and are shared across the related elements throughout the system.

Spacer

Drop-in spacing blocks that create consistent gaps between elements without affecting their internal padding or margins. Use one spacer per gap, pick a single size class, and swap sizes responsively when the layout needs a tighter/looser rhythm.
Component
Use the Spacer component when you want to select spacing through predefined component variants. The Spacer component is built using the same spacer classes available in the Classes section below. Choosing a component variant simply changes which spacer class is used. This is especially useful when the Spacer is placed inside another component and exposed through a component property, allowing the spacer size to be changed directly from the component instance without editing its internal structure.
Use the slot to nest another Spacer component when different spacing values are needed across breakpoints. Each nested Spacer can then be configured for the breakpoint range where it should appear. You can use the spacer that starts on smaller breakpoints as the wrapper, and place the desktop spacer inside it.
Spacer
is-size*
spacer-component
Global Values
Spacing variables used to control the main structure of a page or component. They define larger layout spacing, such as section padding, content padding, and other system-wide spacing values that should stay consistent across the project.
Global
spacer-global
Section Small
spacer-section-small
Section Default
spacer-section
Section Large
spacer-section-large
Individual Sizes
Standalone spacer elements used directly inside a layout to create controlled space between elements. They are useful when spacing needs to be added manually without changing the structure, padding, or gap settings of the parent layout.
Desktop
Tablet
Mobile
Mobile Portrait
Tiny
spacer-tiny
XXS
spacer-xxs
-
tablet-spacer-xxs
-
mobile-spacer-xxs
-
mobile-portrait-spacer-xxs
XS
spacer-xs
-
tablet-spacer-xs
-
mobile-spacer-xs
-
mobile-portrait-spacer-xs
S
spacer-s
-
tablet-spacer-s
-
mobile-spacer-s
-
mobile-portrait-spacer-s
M
spacer-m
-
tablet-spacer-m
-
mobile-spacer-m
-
mobile-portrait-spacer-m
L
spacer-l
-
tablet-spacer-l
-
mobile-spacer-l
-
mobile-portrait-spacer-l
XL
spacer-xl
-
tablet-spacer-xl
-
mobile-spacer-xl
-
mobile-portrait-spacer-xl
XXL
spacer-xxl
-
tablet-spacer-xxl
-
mobile-spacer-xxl
-
mobile-portrait-spacer-xxl
Huge
spacer-huge
X Huge
spacer-xhuge
XX Huge
spacer-xxhuge
Spacer elements use a 1:1 aspect ratio with a defined height, which allows them to maintain consistent spacing across layouts. Because of this setup, there may be situations where the spacer’s width or height exceeds the dimensions of its parent or neighboring elements. In certain layouts—especially when used between inline content such as text—this can slightly disrupt the visual rhythm.

When this happens, the spacer can be placed inside a small wrapper structure to keep the layout perfectly balanced.

Wrap the spacer with a parent element set to inline-block-baseline. Inside that wrapper, place an element with height-0px, and then insert the spacer element inside it. This technique allows the spacer to create the intended vertical spacing while keeping the surrounding text or inline elements flowing naturally without affecting their alignment or line height.

This approach ensures the spacer integrates seamlessly within tighter layouts while preserving the intended spacing of the design system.
Text element above.
Text element before the spacer.
Text element after the spacer.
Text element below.

Padding

Component
Padding component with editable spacing properties for each side, a content slot, and optional breakpoint-specific spacing through nested Spacer components.
Use the Padding component when spacing needs to remain adjustable within a reusable component or layout. Each side can be controlled independently through Spacer properties, while the content slot allows any supported content to be placed inside.

For responsive adjustments, each Spacer includes a slot that can hold another Spacer component. This allows additional spacing values to be introduced for specific breakpoints without changing the main Padding component structure. You can use the spacer that starts on smaller breakpoints as the wrapper, and place the desktop spacer inside it.
Padding
Global Values
Defines breathing room for full sections and the inner content area separately, so you can keep consistent section rhythm while adjusting content density. Combine section padding with a content-width/content-wrapper class, and only add extra internal padding when a specific section needs more focus.
Content (Horizontal Padding)
padding-global
Section (Vertical Padding)
padding-section-global
Small Section (Vertical Padding)
padding-section-small
Large Section (Vertical Padding)
padding-section-large
Individual Sizes
Size utilities control the strength of padding in a predictable scale.
Desktop
None
padding-0
Tiny
padding-tiny
XXS
padding-xxs
XS
padding-xs
S
padding-s
M
padding-m
L
padding-l
XL
padding-xl
XXL
padding-xxl
Huge
padding-huge
X Huge
padding-xhuge
XX Huge
padding-xxhuge
Tablet
Mobile
Mobile Portrait
XXS
tablet-padding-xxs
-
mobile-padding-xxs
-
mobile-portrait-padding-xxs
XS
tablet-padding-xs
-
mobile-padding-xs
-
mobile-portrait-padding-xs
S
tablet-padding-s
-
mobile-padding-s
-
mobile-portrait-padding-s
M
tablet-padding-m
-
mobile-padding-m
-
mobile-portrait-padding-m
L
tablet-padding-l
-
mobile-padding-l
-
mobile-portrait-padding-l
XL
tablet-padding-xl
-
mobile-padding-xl
-
mobile-portrait-padding-xl
XXL
tablet-padding-xxl
-
mobile-padding-xxl
-
mobile-portrait-padding-xxl
Direction
Directional padding utilities let you apply spacing to specific sides (top/right/bottom/left) or axes (x/y) without changing the other sides. Combine a base padding class with directional classes only when you need targeted adjustments—avoid stacking multiple direction classes that compete for the same side.
Desktop
Tablet
Mobile
Mobile Portrait
Bottom
padding-bottom
-
tablet-padding-bottom
-
mobile-padding-bottom
-
mobile-portrait-padding-bottom
Top
padding-top
-
tablet-padding-top
-
mobile-padding-top
-
mobile-portrait-padding-top
Left
padding-left
-
tablet-padding-left
-
mobile-padding-left
-
mobile-portrait-padding-left
Right
padding-right
-
tablet-padding-right
-
mobile-padding-right
-
mobile-portrait-padding-right
Horizontal
padding-horizontal
-
tablet-padding-horizontal
-
mobile-padding-horizontal
-
mobile-portrait-padding-horizontal
Vertical
padding-vertical
-
tablet-padding-vertical
-
mobile-padding-vertical
-
mobile-portrait-padding-vertical

Margin

Sizes
Size utilities define how much space sits outside an element. Use one margin size per direction/axis, and avoid mixing multiple margin classes that target the same side—if you need a different value on one side, use a single directional override instead of stacking.
Desktop
None
margin-0
Tiny
margin-tiny
XXS
margin-xxs
XS
margin-xs
S
margin-s
M
margin-m
L
margin-l
XL
margin-xl
XXL
margin-xxl
Huge
margin-huge
X Huge
margin-xhuge
XX Huge
margin-xxhuge
Tablet
Mobile
Mobile Portrait
XXS
tablet-margin-xxs
-
mobile-margin-xxs
-
mobile-portrait-margin-xxs
XS
tablet-margin-xs
-
mobile-margin-xs
-
mobile-portrait-margin-xs
S
tablet-margin-s
-
mobile-margin-s
-
mobile-portrait-margin-s
M
tablet-margin-m
-
mobile-margin-m
-
mobile-portrait-margin-m
L
tablet-margin-l
-
mobile-margin-l
-
mobile-portrait-margin-l
XL
tablet-margin-xl
-
mobile-margin-xl
-
mobile-portrait-margin-xl
XXL
tablet-margin-xxl
-
mobile-margin-xxl
-
mobile-portrait-margin-xxl
Direction
Directional margin utilities control external spacing around elements and are best for separating components without changing their internal layout.
Desktop
Tablet
Mobile
Mobile Portrait
Bottom
margin-bottom
-
tablet-margin-bottom
-
mobile-margin-bottom
-
mobile-portrait-margin-bottom
Top
margin-top
-
tablet-margin-top
-
mobile-margin-top
-
mobile-portrait-margin-top
Left
margin-left
-
tablet-margin-left
-
mobile-margin-left
-
mobile-portrait-margin-left
Right
margin-right
-
tablet-margin-right
-
mobile-margin-right
-
mobile-portrait-margin-right
Horizontal
margin-horizontal
-
tablet-margin-horizontal
-
mobile-margin-horizontal
-
mobile-portrait-margin-horizontal
Vertical
margin-vertical
-
tablet-margin-vertical
-
mobile-margin-vertical
-
mobile-portrait-margin-vertical

Offset

Offset utilities apply negative margins to adjust element positioning and align content precisely within the layout.
Global Values
Defines shared offset distances for positioning elements consistently from layout edges and other reference points, helping maintain predictable placement across components and breakpoints.
Content (Horizontal Offset)
offset-global
Section (Vertical Offset)
offset-section-global
Small Section (Vertical Offset)
offset-section-small
Large Section (Vertical Offset)
offset-section-large
Individual Sizes
Size utilities control the amount of offset using a predictable scale.
Desktop
Tiny
offset-tiny
XXS
offset-xxs
XS
offset-xs
S
offset-s
M
offset-m
L
offset-l
XL
offset-xl
XXL
offset-xxl
Huge
offset-huge
X Huge
offset-xhuge
XX Huge
offset-xxhuge
Tablet
Mobile
Mobile Portrait
XXS
tablet-offset-xxs
-
mobile-offset-xxs
-
mobile-portrait-offset-xxs
XS
tablet-offset-xs
-
mobile-offset-xs
-
mobile-portrait-offset-xs
S
tablet-offset-s
-
mobile-offset-s
-
mobile-portrait-offset-s
M
tablet-offset-m
-
mobile-offset-m
-
mobile-portrait-offset-m
L
tablet-offset-l
-
mobile-offset-l
-
mobile-portrait-offset-l
XL
tablet-offset-xl
-
mobile-offset-xl
-
mobile-portrait-offset-xl
XXL
tablet-offset-xxl
-
mobile-offset-xxl
-
mobile-portrait-offset-xxl

Reset Padding & Margin

Reset utilities that remove previously applied padding/margin so components can be reused safely in different contexts. Use these when a component inherits spacing from a parent pattern, when switching variants, or when you need a clean baseline before applying a new spacing set.
Desktop
Tablet
Mobile
Mobile Portrait
spacing-none
tablet-spacing-none
mobile-spacing-none
mobile-portrait-spacing-none

Custom Spacer Setup for Direction Changes - User Guide

Basic Margin/Padding Setup
flex-* horizontal or vertical
|
|
spacer-*
|
flex-* vertical or horizontal
|
spacer-*
|
|
spacer-*
|
Content
|
spacer-*
Content
Basic Spacer Setup
flex-horizontal
mobile-flex-vertical
|
|
Content
|
spacer-*
|
Content
Content
Content

Spacing must follow layout direction.

When elements sit next to each other (horizontal layout), spacing controls the horizontal gap between them. When those same elements switch to stacking on top of each other (vertical layout), the spacing must shift to support vertical rhythm instead.

When direction changes across breakpoints (for example, from flex-horizontal to tablet-flex-vertical), a single spacer may not be enough.

In these cases:

This ensures spacing always matches element flow:

‍

See the example below for how spacers can be structured and controlled across breakpoints.

This example demonstrates how spacing adapts when layout direction changes across breakpoints. On larger screens, elements may appear side by side in a horizontal flow. When the layout shifts to a vertical stack on smaller screens, spacing must adjust accordingly. Use separate spacer elements with responsive visibility classes to control which spacing applies at each breakpoint and maintain consistent visual rhythm throughout the layout.