diff --git a/apps/website/pages/principles/layout.tsx b/apps/website/pages/foundations/layout.tsx
similarity index 75%
rename from apps/website/pages/principles/layout.tsx
rename to apps/website/pages/foundations/layout.tsx
index 887be217a9..acc943bd22 100644
--- a/apps/website/pages/principles/layout.tsx
+++ b/apps/website/pages/foundations/layout.tsx
@@ -1,5 +1,5 @@
import Head from "next/head";
-import LayoutPage from "screens/principles/layout/LayoutPage";
+import LayoutPage from "screens/foundations/layout/Layout";
const Layout = () => (
<>
diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts
index c6d771d1b4..78fb36f02e 100644
--- a/apps/website/screens/common/pagesList.ts
+++ b/apps/website/screens/common/pagesList.ts
@@ -34,7 +34,6 @@ const utilitiesLinks: LinkDetails[] = [
const principlesLinks: LinkDetails[] = [
{ label: "Data visualization", path: "/principles/data-visualization" },
- { label: "Layout", path: "/principles/layout" },
{ label: "Localization", path: "/principles/localization" },
];
@@ -43,6 +42,7 @@ const foundationsLinks: LinkDetails[] = [
{ label: "Elevation", path: "/foundations/elevation" },
{ label: "Height", path: "/foundations/height" },
{ label: "Iconography", path: "/foundations/iconography" },
+ { label: "Layout", path: "/foundations/layout" },
{ label: "Spacing", path: "/foundations/spacing" },
{ label: "Typography", path: "/foundations/typography" },
];
diff --git a/apps/website/screens/foundations/layout/Layout.tsx b/apps/website/screens/foundations/layout/Layout.tsx
new file mode 100644
index 0000000000..77b7f3e548
--- /dev/null
+++ b/apps/website/screens/foundations/layout/Layout.tsx
@@ -0,0 +1,423 @@
+import { DxcHeading, DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import Link from "next/link";
+import layoutStructure from "./images/layoutStructure.png";
+import anatomyColumns from "./images/anatomyColumns.jpg";
+import anatomyGutter from "./images/anatomyGutter.jpg";
+import anatomyMargin from "./images/anatomyMargin.jpg";
+import pageStructure from "./images/pageStructure.jpg";
+import Code from "@/common/Code";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Layout designates the position and organization of the elements of an interface. Halstack provides multiple
+ components to achieve layout consistency and an easy way to arrange elements in the UI. An effective layout
+ design is essential for creating seamless, consistent and robust user experiences across products, where
+ information is easy to find and users can carry out the intended actions without getting lost in the process.
+
+
+ The{" "}
+
+ application layout
+ {" "}
+ is the base that wraps any application built with Halstack. In addition, all of the components listed below
+ can be used within each other to create a wide variety of standard layouts:
+
+
+
+
+ Bleed
+
+
+
+
+ Container
+
+
+
+
+ Flex
+
+
+
+
+ Grid
+
+
+
+
+ Inset
+
+
+
+
+ ),
+ },
+ {
+ title: "Grid System",
+ content: (
+
+ Grids provide the foundation for consistently positioning elements onscreen. The 8x Grid is the
+ geometric foundation of all the visual elements of Halstack Design System components and spacing. It provides
+ structure and guidance for all creative decision-making. As mention above, our design system provides its own{" "}
+
+ Grid
+ {" "}
+ component to help users place elements within an interface effectively.
+
+ ),
+ subSections: [
+ {
+ title: "Structure",
+ content: (
+ <>
+
+ It is recommended to design based on a 12-column grid as the base layout structure. This
+ approach allows for a wide range of combinations, from single-column layouts to more complex multi-column
+ arrangements.
+
+
+ Each column is separated by a gutter, and the overall layout is framed by{" "}
+ margins on both sides to ensure content doesn't touch the edges of the viewport.
+
+
+
+ Margin
+ Column
+ Gutter
+
+
+ When working with columns in Halstack, the number in use can change depending on the screen size, but we
+ recommend the grid itself to remain based on 12 columns. For example, a sidebar might take 3 columns on
+ desktop and stack above the content on smaller viewports.
+
+
+ ),
+ },
+ {
+ title: "Grid anatomy",
+ subSections: [
+ {
+ title: "Columns",
+ content: (
+ <>
+
+ When working with columns in Halstack, the number in use can change depending on the screen size, but
+ we recommend the grid itself to remain based on 12 columns. For example, a sidebar might take 3
+ columns on desktop and stack above the content on smaller viewports.
+
+
+
+ ),
+ },
+ {
+ title: "Gutters",
+ content: (
+ <>
+
+ Gutters are the spaces between columns that keep content visually separated and easy to read. In
+ Halstack, their size is defined using our{" "}
+
+ spacing tokens
+
+ , ensuring consistent alignment and rhythm across all layouts. Gutters remain fixed within a given
+ breakpoint but adjust proportionally as the layout changes.
+
+
+
+ ),
+ },
+ {
+ title: "Margin", // or Padding?
+ content: (
+ <>
+
+ Margins are the spaces that separate the grid content from the outer edges of the layout. They help
+ maintain a balanced and readable design, especially on larger screens. Margins remain consistent
+ within a given breakpoint and are typically equal to or wider than the gutters, ensuring visual
+ harmony across the layout.
+
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Breakpoints and responsiveness",
+ content: (
+ <>
+
+ Breakpoints are specific viewport widths at which the layout adapts to provide an optimal experience across
+ devices. They determine how many columns are displayed, how margins and gutters scale, and how content is
+ arranged. Breakpoints are chosen to ensure readability, usability, and consistency, allowing designs to
+ fluidly adjust from small to large screens.
+
+ When defining responsive behavior, consider:
+
+
+ Content-first approach: let the content guide breakpoint definition, rather than relying on
+ arbitrary device sizes.
+
+
+ Column reflow: as the viewport changes, columns may shrink, expand, or stack to preserve
+ usability.
+
+
+ Element scaling: spacing, typography, and component sizes should adjust in harmony with the
+ grid changes.
+
+
+ Consistent rhythm: maintain visual balance by aligning breakpoints with your design
+ system's spacing and typography scales.
+
+
+ Avoid device-specific breakpoints: instead of targeting exact device models, use ranges
+ that work well for multiple screen types.
+
+
+
+ In the following table, we recommend the best combination of columns, gutters and margins for each breakpoint.
+
+
+
+
+
Breakpoint
+
Viewport (px)
+
Columns
+
Gutters (px)
+
Margins (px)
+
+
+
+
+
+ xss
+
+
320-479
+
2
+
12
+
16
+
+
+
+ xs
+
+
480-767
+
6
+
12
+
16
+
+
+
+ s
+
+
768-1023
+
6
+
12
+
16
+
+
+
+ m
+
+
1024-1439
+
12
+
12
+
32
+
+
+
+ l
+
+
1440-1767
+
12
+
12
+
32
+
+
+
+ xl
+
+
1768+
+
12
+
12
+
32
+
+
+
+
+ ),
+ },
+ {
+ title: "Page structure and regions",
+ content: (
+ <>
+
+ A well-structured page helps users navigate content efficiently, understand hierarchy, and focus on their
+ tasks. In Halstack, we encourage a consistent structure across applications so users can quickly orient
+ themselves, regardless of the product they are using.
+
+
+ Every application should include at least a header and a footer. A sidenav{" "}
+ is highly encouraged for complex applications with multiple navigation levels, but it is not mandatory.
+
+
+
+
+
+ ),
+ subSections: [
+ {
+ title: "Header",
+ content: (
+ <>
+
+ The header provides global context and primary navigation. It remains visible across most screens to help
+ users quickly access high-level actions and navigate between key sections.
+
+
+ Expected content:
+
+
+ Product or company logo
+ Primary navigation links or menus
+ Global actions (search, notifications, profile dropdown)
+
+ Contextual tools (switcher for apps, quick actions relevant to the entire product)
+
+
+
+ ),
+ },
+ {
+ title: "Sidenav",
+ content: (
+ <>
+
+ The sidenav offers persistent access to main sections of the application. It supports exploration, quick
+ switching between areas, and clear orientation within complex products.
+
+
+ Expected content:
+
+
+ Main navigation links (usually grouped into categories)
+ Icons alongside labels for faster scanning
+ Optional collapsible groups for secondary navigation
+
+
+ ),
+ },
+ {
+ title: "Body",
+ content: (
+ <>
+
+ The body is where the main content lives. It adapts depending on the specific page and user task, and it
+ is the most flexible region of the layout.
+
+
+ Expected content:
+
+
+ Primary task flows (forms, tables, dashboards, content areas)
+ Inline navigation for subsections
+ Supporting components such as breadcrumbs, tabs, or filters
+
+
+ ),
+ },
+ {
+ title: "Footer",
+ content: (
+ <>
+
+ The footer anchors the page with supporting information and secondary navigation. It remains consistent
+ across pages and serves as the end point of the scroll experience.
+
+
+ Expected content:
+
+
+ Legal links (privacy policy, terms of service)
+ Secondary navigation (help center, contact, feedback)
+ Copyright information
+ Optional language switcher
+
+
+ Our own{" "}
+
+ Application layout
+ {" "}
+ comes with a pre-configured page layout specially tailored to help users place content within their
+ applications.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use the grid consistently: align all major elements (headers, content areas, components)
+ within the defined columns and gutters to ensure visual harmony and layout predictability.
+
+
+ Apply margins over padding for layout spacing: use margins to space components from each
+ other and from page edges. Reserve padding for internal component spacing, ensuring separation and layout
+ clarity.
+
+
+ Maintain layout breathing room: keep a clear buffer between your content and the screen
+ edges. Avoid layout without margins, which can feel cramped and reduce readability.
+
+
+ Adapt to different screen sizes thoughtfully: test layouts across breakpoints to ensure
+ content reflows naturally. Let your design scale fluidly (columns stack, gutters resize, margins adjust) to
+ remain both usable and visually balanced.
+
+
+ Design modular and scalable layouts: structure your layout into reusable sections (e.g.,
+ header, body, sidebar). This enables easy updates, extensions without design breaks, and consistent
+ experiences across products.
+
+
+ Minimize custom overrides: avoid manually overriding grid rules or spacing tokens. Custom
+ fixes can disrupt consistency and fragment the design system. If a special layout is needed, propose it for
+ inclusion in the core standards.
+
+
+ ),
+ },
+];
+
+export default function LayoutPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/website/screens/foundations/layout/images/anatomyColumns.jpg b/apps/website/screens/foundations/layout/images/anatomyColumns.jpg
new file mode 100644
index 0000000000..c9d82590f5
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/anatomyColumns.jpg differ
diff --git a/apps/website/screens/foundations/layout/images/anatomyGutter.jpg b/apps/website/screens/foundations/layout/images/anatomyGutter.jpg
new file mode 100644
index 0000000000..820eb10d42
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/anatomyGutter.jpg differ
diff --git a/apps/website/screens/foundations/layout/images/anatomyMargin.jpg b/apps/website/screens/foundations/layout/images/anatomyMargin.jpg
new file mode 100644
index 0000000000..40e9ad8f5d
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/anatomyMargin.jpg differ
diff --git a/apps/website/screens/foundations/layout/images/layoutStructure.png b/apps/website/screens/foundations/layout/images/layoutStructure.png
new file mode 100644
index 0000000000..b3b333feb7
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/layoutStructure.png differ
diff --git a/apps/website/screens/foundations/layout/images/pageStructure.jpg b/apps/website/screens/foundations/layout/images/pageStructure.jpg
new file mode 100644
index 0000000000..d34dad4a22
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/pageStructure.jpg differ
diff --git a/apps/website/screens/principles/layout/LayoutPage.tsx b/apps/website/screens/principles/layout/LayoutPage.tsx
deleted file mode 100644
index d7aa977dab..0000000000
--- a/apps/website/screens/principles/layout/LayoutPage.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import { DxcHeading, DxcFlex, DxcLink, DxcTable, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import PageHeading from "@/common/PageHeading";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import layoutBreakpoints from "./images/layout_breakpoints.png";
-import layoutColumns from "./images/layout_medium_small.png";
-import layoutGrid from "./images/layout_grid.png";
-import Link from "next/link";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
- Halstack provides multiple components to achieve layout consistency and an easy way to arrange elements in the
- UI. The{" "}
-
- application layout
- {" "}
- is the base that wraps any application built with Halstack. In addition, all of the components listed below
- can be used within each other to create a wide variety of standard layouts:
-
-
- Bleed
- Container
- Flex
- Grid
- Inset
-
-
- ),
- },
- {
- title: "Layout basics",
- subSections: [
- {
- title: "Grid",
- content: (
- <>
-
- The grid provides the foundation for consistently positioning elements onscreen. The 8x Grid is the
- geometric foundation of all the visual elements of Halstack Design System components and spacing. It
- provides structure and guidance for all creative decision-making.
-
-
-
- ),
- subSections: [
- {
- title: "Grid usage",
- content: (
-
-
- Use multiples of 8px when defining measurements, spacing, and positioning elements.
-
- When necessary use 4px to make more fine tuned adjustments.
-
- Whenever possible, make sure that objects line up, both vertically and horizontally.
-
-
- Align your bounding box to the grid, not the baseline of your text.
-
-
- ),
- },
- ],
- },
- {
- title: "Breakpoints",
- content: (
- <>
-
- Breakpoints define resolutions at which screen components adjust to offer an optimal user experience
- across screen sizes and devices. We've defined five different breakpoints to accommodate multiple web,
- tablet, and mobile screen resolutions:
-
-
-
-
-
Breakpoint
-
px
-
rem
-
-
-
-
-
- xsmall
-
-
320
-
20
-
-
-
- small
-
-
480
-
30
-
-
-
- medium
-
-
720
-
45
-
-
-
- large
-
-
1056
-
66
-
-
-
- x-large
-
-
1440
-
90
-
-
-
-
- The image below illustrates how we've used data on the most popular screen resolutions by device over
- the past few years to help define each breakpoint.
-
-
-
- ),
- },
- {
- title: "Columns, margins and gutters",
- content: (
- <>
-
-
- Columns, gutters, and margins make up the responsive layout grid following these breakpoints. Depending on
- resolution and screen size of a device, column numbers and the values of the margins and gutters adjust to
- accommodate all screen elements in the most optimal manner.
-
-
- Columns are the areas of the screen where content is placed.
-
- A gutter is the space between columns used to separate content.{" "}
-
-
- Margins are the space between the edges of the screen and content.
-
-
-
- ),
- subSections: [
- {
- title: "Recommended values",
- content: (
- <>
-
- The following table describes the columns, margins, and gutter at each of the different breakpoints:
-
-
-
-
-
Breakpoint
-
Columns
-
- Gutter (recommended) 1
-
-
- Margin (min)2
-
-
-
-
-
-
- xsmall
-
-
4
-
16 / small
-
24
-
-
-
- small
-
-
4
-
16 / small
-
24
-
-
-
- medium
-
-
4
-
24 / medium
-
48
-
-
-
- large
-
-
8
-
16 / small
-
56
-
-
-
- x-large
-
-
8
-
24 / medium
-
56
-
-
-
-
-
- Any value provided by the gutter prop in the layout components can be used (ideally
- multiples of 8) although we recommend to stick to the values provided.{" "}
-
-
- The margin value provided are the minimun recommended, any value from our{" "}
-
- spacing scale
- {" "}
- can be used or even an auto value.
-
-
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-export default function LayoutPage() {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/website/screens/principles/layout/images/layout_breakpoints.png b/apps/website/screens/principles/layout/images/layout_breakpoints.png
deleted file mode 100644
index 9643a3491c..0000000000
Binary files a/apps/website/screens/principles/layout/images/layout_breakpoints.png and /dev/null differ
diff --git a/apps/website/screens/principles/layout/images/layout_grid.png b/apps/website/screens/principles/layout/images/layout_grid.png
deleted file mode 100644
index 2d2a9b019d..0000000000
Binary files a/apps/website/screens/principles/layout/images/layout_grid.png and /dev/null differ
diff --git a/apps/website/screens/principles/layout/images/layout_medium_small.png b/apps/website/screens/principles/layout/images/layout_medium_small.png
deleted file mode 100644
index 24b082b4cf..0000000000
Binary files a/apps/website/screens/principles/layout/images/layout_medium_small.png and /dev/null differ