diff --git a/apps/website/pages/principles/spacing.tsx b/apps/website/pages/foundations/spacing.tsx
similarity index 74%
rename from apps/website/pages/principles/spacing.tsx
rename to apps/website/pages/foundations/spacing.tsx
index b541a112ed..e64addde7f 100644
--- a/apps/website/pages/principles/spacing.tsx
+++ b/apps/website/pages/foundations/spacing.tsx
@@ -1,5 +1,5 @@
import Head from "next/head";
-import SpacingPage from "screens/principles/spacing/SpacingPage";
+import SpacingPage from "screens/foundations/spacing/SpacingPage";
const Spacing = () => (
<>
diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts
index b5b3e1e3c6..8a57371acf 100644
--- a/apps/website/screens/common/pagesList.ts
+++ b/apps/website/screens/common/pagesList.ts
@@ -37,7 +37,6 @@ const principlesLinks: LinkDetails[] = [
{ label: "Iconography", path: "/principles/iconography" },
{ label: "Layout", path: "/principles/layout" },
{ label: "Localization", path: "/principles/localization" },
- { label: "Spacing", path: "/principles/spacing" },
{ label: "Typography", path: "/principles/typography" },
];
@@ -45,6 +44,7 @@ const foundationsLinks: LinkDetails[] = [
{ label: "Color", path: "/foundations/color" },
{ label: "Height", path: "/foundations/height" },
{ label: "Iconography", path: "/foundations/iconography" },
+ { label: "Spacing", path: "/foundations/spacing" },
];
const componentsLinks = componentsList as LinkDetails[];
diff --git a/apps/website/screens/foundations/spacing/SpacingPage.tsx b/apps/website/screens/foundations/spacing/SpacingPage.tsx
new file mode 100644
index 0000000000..4c81e05076
--- /dev/null
+++ b/apps/website/screens/foundations/spacing/SpacingPage.tsx
@@ -0,0 +1,315 @@
+import { DxcHeading, DxcFlex, DxcTable, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import Code from "@/common/Code";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import spacings from "./images/spacings.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Spacing helps establish relationships between elements and gives users visual cues that
+ improve comprehension and interaction. Good spacing reduces cognitive load, improves accessibility, and
+ creates cleaner, more coherent interfaces.
+
+
+ We use a scale-based spacing system derived from a base unit of 4px. All
+ spacing—margins, padding, and element gaps—is applied using these defined increments. This promotes
+ consistency across UI layouts and helps ensure design and code stay aligned.
+
+
+ We recommend using spacing tokens instead of hard-coded pixel values to maintain design consistency and
+ scalability.
+
+
+
+ ),
+ },
+ {
+ title: "Spacing tokens",
+ content: (
+ <>
+
+ Our spacing scale is a set of predefined values based on multiples of 2px. This modular system allows
+ designers and developers to build layouts that are consistent and responsive.
+
+
+
+
+
Core token
+
Value (px)
+
Gap token
+
Padding token
+
+
+
+
+
+ dimensions/0
+
+
0px
+
+ spacing/gap/none
+
+
+ spacing/padding/none
+
+
+
+
+ dimensions/2
+
+
2px
+
+ spacing/gap/xxs
+
+
+ spacing/padding/xxxs
+
+
+
+
+ dimensions/4
+
+
4px
+
+ spacing/gap/xs
+
+
+ spacing/padding/xxs
+
+
+
+
+ dimensions/8
+
+
8px
+
+ spacing/gap/s
+
+
+ spacing/padding/xs
+
+
+
+
+ dimensions/12
+
+
12px
+
+ spacing/gap/m
+
+
+ spacing/padding/s
+
+
+
+
+ dimensions/16
+
+
16px
+
+ spacing/gap/ml
+
+
+ spacing/padding/m
+
+
+
+
+ dimensions/20
+
+
20px
+
-
+
+ spacing/padding/ml
+
+
+
+
+ dimensions/24
+
+
24px
+
+ spacing/gap/l
+
+
+ spacing/padding/l
+
+
+
+
+ dimensions/32
+
+
32px
+
+ spacing/gap/xl
+
+
+ spacing/padding/xl
+
+
+
+
+ dimensions/40
+
+
40px
+
-
+
+ spacing/padding/xxl
+
+
+
+
+ dimensions/48
+
+
48px
+
+ spacing/gap/xxl
+
+
-
+
+
+
+
+ ),
+ },
+ {
+ title: "Spacing guidelines by scale",
+ content: (
+
+ Our spacing system is built around tokens that represent consistent pixel values. We can group these into small,
+ medium, and large ranges to guide their application in different UI contexts—from tight, compact interfaces to
+ broad layout structures.
+
+ ),
+ subSections: [
+ {
+ title: "Small spacing (0px–8px)",
+ content: (
+ <>
+
+ For fine-grained spacing adjustments in compact UI elements where space is tight but
+ still important.
+
+
+ Common uses:
+
+
+ Spacing between small icons and adjacent text.
+
+ Internal padding for tight UI elements like badges, icon buttons, or dense table cells.
+
+ Narrow gaps between repeating elements.
+ Padding inside input fields and controls.
+ Vertical separation of elements within compact cards.
+ Offset between a trigger element and its overlay.
+
+
+ ),
+ },
+ {
+ title: "Medium spacing (12px–24px)",
+ content: (
+ <>
+
+ For more relaxed spacing in moderately sized components or to separate content within
+ larger elements.
+
+
+ Common uses:
+
+
+ Padding inside medium-to-large components.
+ Space between a large icon and its associated content.
+ Vertical rhythm between grouped elements in cards.
+
+ Gaps between elements in components that are not densely packed, offering a bit more breathing room.
+
+
+
+ ),
+ },
+ {
+ title: "Large spacing (32px–48px)",
+ content: (
+ <>
+
+ To manage spacing at a layout or structural level, where content needs to feel clearly
+ separated or grouped.
+
+
+ Common uses:
+
+
+
+ Space between sections or major content areas on a page (e.g. from page top to header).
+
+ Aligning content within wide containers or large components.
+ Creating structure in grid systems or responsive layouts.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+ To build clean, accessible, and maintainable interfaces, apply these spacing principles:
+
+
+
+ Design on a base grid
+
+ All spacing values should align to the 4px grid. This ensures rhythm and consistency across screens.
+
+
+
+ Group related content with consistent spacing
+
+ Use consistent vertical and horizontal spacing between related items like form fields, titles and
+ descriptions.
+
+
+
+ Avoid excessive whitespace
+
+ Too much spacing can break content relationships and force users to scan longer distances.
+
+
+
+ Test across viewports
+
+ Ensure spacing remains functional and clear on mobile, tablet, and desktop. Avoid overly tight or loose
+ layouts.
+
+
+
+
+ ),
+ },
+];
+
+export default function SpacingPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/website/screens/foundations/spacing/images/spacings.png b/apps/website/screens/foundations/spacing/images/spacings.png
new file mode 100644
index 0000000000..7ba4159311
Binary files /dev/null and b/apps/website/screens/foundations/spacing/images/spacings.png differ
diff --git a/apps/website/screens/principles/spacing/SpacingPage.tsx b/apps/website/screens/principles/spacing/SpacingPage.tsx
deleted file mode 100644
index 9e30415efc..0000000000
--- a/apps/website/screens/principles/spacing/SpacingPage.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-import { DxcHeading, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import PageHeading from "@/common/PageHeading";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import spacingOverview from "./images/spacing_overview.png";
-import spacingTypes from "./images/spacing_types.png";
-import spacingPadding from "./images/spacing_padding.png";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
- In the search of consistent alignment between the elements we provide a spacing scale based on a root values
- of 8px and 4px. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct
- enough, steps between them.
-
-
-
- The spacing scale can be applied to margin or padding properties, as well as to both
- vertical and horizontal edges. The token takes the place of the values normally assigned to this properties.
-
-
- ),
- },
- {
- title: "Spacing methods",
- subSections: [
- {
- title: "Fixed spacing",
- content: (
- <>
-
- Althouhg the fixed spacing scale is most commonly used for vertical spacing, it can also be applied for
- horizontal spacing, especially in the case of spacing inside components.
-
-
-
- Left: Horizontal: Used for smaller, more refined spacing needs, inside components.
-
-
- Right: Vertical: Used for positioning components on a page.
-
-
- }
- >
-
-
-
- ),
- },
- {
- title: "Fluid spacing",
- content: (
-
- The use of percentages (e.g. 50% or 33%) is a recommended way to divide a page or to control a component{" "}
- max-width and min-width. Using percentages for top and bottom values of{" "}
- padding or margin inside of a component or element should be avoided.
-
- ),
- },
- ],
- },
- {
- title: "Core spacing tokens",
- content: (
- <>
-
- The core spacing scale is used to create space relationships for detail-level designs.
-
-
-
-
-
Token
-
rem
-
px
-
-
-
-
-
- spacing-0
-
-
0
-
0
-
-
-
- spacing-2
-
-
0.125
-
2
-
-
-
- spacing-4
-
-
0.25
-
4
-
-
-
- spacing-8
-
-
0.5
-
8
-
-
-
- spacing-12
-
-
0.75
-
12
-
-
-
- spacing-16
-
-
1
-
16
-
-
-
- spacing-24
-
-
1.5
-
24
-
-
-
- spacing-32
-
-
2
-
32
-
-
-
- spacing-40
-
-
2.5
-
40
-
-
-
- spacing-48
-
-
3
-
48
-
-
-
- spacing-56
-
-
3.5
-
56
-
-
-
- spacing-64
-
-
4
-
64
-
-
-
- spacing-80
-
-
5
-
80
-
-
-
- spacing-96
-
-
6
-
96
-
-
-
- spacing-112
-
-
7
-
112
-
-
-
-
- ),
- },
- {
- title: "Component spacing tokens",
- content: (
- <>
-
- Most components across Halstack can adopt our component spacing tokens as margin or{" "}
- padding in every direction in order to create white space between components.
-
-
-
- Usage of the medium token for left, right, bottom{" "}
- and toppadding properties.
-
-
- }
- >
-
-
-
-
-