<p>DDS v3 foundations use design tokens to provide a unified set of values for key properties. Learn more on the <a href="/getting-started/tokens">tokens page</a>.</p>
<h2>Usage</h2>
<p>Spacing defines the distance and relationships between elements, playing a key role in visual rhythm, hierarchy, and clarity. Consistent spacing improves scannability, reinforces structure, and helps users understand how content is grouped and separated.</p>
<p>Spacing should be applied consistently across:</p>
<ul>
<li>Padding</li>
<li>Margin</li>
<li>Gaps</li>
<li>Layout structure</li>
</ul>
<h2>Spacing scale</h2>
<p>The spacing scale defines the available space values and their corresponding units. Each token represents a semantic step in spacing, not a specific layout decision. Use smaller tokens for dense UI and larger tokens for section and layout spacing.</p>
<p>Spacing is defined using design tokens instead of raw values. This ensures visual consistency, scalability, and predictable behavior across products. Avoid hardcoding spacing values like 14px or 18px. Always use the closest spacing token.</p>
<table>
<thead>
<tr>
<th>Token</th>
<th>rem</th>
<th>px</th>
</tr>
</thead>
<tbody><tr>
<td>--dds-spacing-xs</td>
<td>0.25</td>
<td>4</td>
</tr>
<tr>
<td>--dds-spacing-sm</td>
<td>0.5</td>
<td>8</td>
</tr>
<tr>
<td>--dds-spacing-md</td>
<td>0.75</td>
<td>12</td>
</tr>
<tr>
<td>--dds-spacing-lg</td>
<td>1</td>
<td>16</td>
</tr>
<tr>
<td>--dds-spacing-xl</td>
<td>1.5</td>
<td>24</td>
</tr>
<tr>
<td>--dds-spacing-2xl</td>
<td>2</td>
<td>32</td>
</tr>
<tr>
<td>--dds-spacing-3xl</td>
<td>2.5</td>
<td>40</td>
</tr>
<tr>
<td>--dds-spacing-4xl</td>
<td>3</td>
<td>48</td>
</tr>
<tr>
<td>--dds-spacing-5xl</td>
<td>4</td>
<td>64</td>
</tr>
<tr>
<td>--dds-spacing-6xl</td>
<td>5</td>
<td>80</td>
</tr>
<tr>
<td>--dds-spacing-7xl</td>
<td>6</td>
<td>96</td>
</tr>
</tbody></table>
<details data-name='image-block' data-images='[{"alt":"Illustration of the spacing scales","caption":"","url":"https://dds.dell.com/site/v3/foundations/spacing/spacing-va.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

Spacing defines the space between page elements and is managed through design tokens to ensure consistent layouts.

Spacing

Home

About DDS

Migration guide

AI chat toolkit

A11y annotation kit

Figma

Storybooks

Community library

Tokens

Getting started

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

AI design library

Micro-moments

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Data visualization

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Patterns

Accessibility

Brand

Partners

Case studies

Blog

FAQs

Tools

Videos

Resources

Send Feedback

Check My Tickets

Find us on Teams

Support