diff --git a/apps/website/pages/components/application-layout/code.tsx b/apps/website/pages/components/application-layout/code.tsx
new file mode 100644
index 0000000000..71989552bf
--- /dev/null
+++ b/apps/website/pages/components/application-layout/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
+import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";
+
+const Code = () => (
+ <>
+
+ Application layout code — Halstack Design System
+
+
+
+);
+
+Code.getLayout = (page: ReactElement) => {page};
+
+export default Code;
diff --git a/apps/website/pages/components/application-layout/index.tsx b/apps/website/pages/components/application-layout/index.tsx
index d4f76bce5f..5a6f401019 100644
--- a/apps/website/pages/components/application-layout/index.tsx
+++ b/apps/website/pages/components/application-layout/index.tsx
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
-import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";
+import ApplicationLayoutOverviewPage from "screens/components/application-layout/overview/ApplicationLayoutOverviewPage";
-const Index = () => {
- return (
- <>
-
- Application layout — Halstack Design System
-
-
-
- );
-};
+const Index = () => (
+ <>
+
+ Application layout — Halstack Design System
+
+
+
+);
-Index.getLayout = function getLayout(page: ReactElement) {
- return {page};
-};
+Index.getLayout = (page: ReactElement) => {page};
export default Index;
diff --git a/apps/website/pages/components/application-layout/specifications.tsx b/apps/website/pages/components/application-layout/specifications.tsx
deleted file mode 100644
index bda6236411..0000000000
--- a/apps/website/pages/components/application-layout/specifications.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
-import ApplicationLayoutSpecsPage from "screens/components/application-layout/specs/ApplicationLayoutSpecsPage";
-
-const Specifications = () => {
- return (
- <>
-
- Application layout Specs — Halstack Design System
-
-
-
- );
-};
-
-Specifications.getLayout = function getLayout(page: ReactElement) {
- return {page};
-};
-
-export default Specifications;
diff --git a/apps/website/pages/components/application-layout/usage.tsx b/apps/website/pages/components/application-layout/usage.tsx
deleted file mode 100644
index 36fad1f9bb..0000000000
--- a/apps/website/pages/components/application-layout/usage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
-import ApplicationLayoutUsagePage from "screens/components/application-layout/usage/ApplicationLayoutUsagePage";
-
-const Usage = () => {
- return (
- <>
-
- Application layout Usage — Halstack Design System
-
-
-
- );
-};
-
-Usage.getLayout = function getLayout(page: ReactElement) {
- return {page};
-};
-
-export default Usage;
diff --git a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
index c5b9c9c0dc..591cef2d19 100644
--- a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
+++ b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
@@ -6,12 +6,8 @@ import { ReactNode } from "react";
const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/application-layout" },
- { label: "Usage", path: "/components/application-layout/usage" },
- {
- label: "Specifications",
- path: "/components/application-layout/specifications",
- },
+ { label: "Overview", path: "/components/application-layout" },
+ { label: "Code", path: "/components/application-layout/code" },
];
return (
@@ -20,9 +16,10 @@ const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) =>
- The application layout provides a base UI wrapper for any application built with Halstack.
+ The Application Layout is the foundational UI wrapper for any application built with Halstack. It ensures
+ structural consistency and integrates key layout.
-
+
{children}
diff --git a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
index 861b29f77b..f4dba717f7 100644
--- a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
+++ b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -18,22 +18,29 @@ const ApplicationLayoutPropsTable = () => (
-
visibilityToggleLabel
- string
+
+
+ children
+
+
+
+ React.ReactNode
+
+
+ Use the DxcApplicationLayout.Main provided to render main content.
-
Text to be placed next to the hamburger button that toggles the visibility of the sidenav.
-
-
header
+
footer
React.ReactNode
- Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
- the default header will be shown. Please check the Header documentation{" "}
-
+ Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
+ the default header will be shown. Please check the Footer documentation{" "}
+
here
.
@@ -41,14 +48,14 @@ const ApplicationLayoutPropsTable = () => (
-
-
footer
+
header
React.ReactNode
- Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
- the default header will be shown. Please check the Footer documentation{" "}
-
+ Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
+ the default header will be shown. Please check the Header documentation{" "}
+
here
.
@@ -70,18 +77,11 @@ const ApplicationLayoutPropsTable = () => (
-
+
visibilityToggleLabel
-
-
- children
-
-
-
- React.ReactNode
-
-
- Use the DxcApplicationLayout.Main provided to render main content.
+ string
+
Text to be placed next to the hamburger button that toggles the visibility of the sidenav.
-
@@ -172,15 +172,13 @@ const sections = [
},
];
-const ApplicationLayoutCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ApplicationLayoutCodePage = () => (
+
+
+
+
+
+
+);
export default ApplicationLayoutCodePage;
diff --git a/apps/website/screens/components/application-layout/overview/ApplicationLayoutOverviewPage.tsx b/apps/website/screens/components/application-layout/overview/ApplicationLayoutOverviewPage.tsx
new file mode 100644
index 0000000000..e4859338be
--- /dev/null
+++ b/apps/website/screens/components/application-layout/overview/ApplicationLayoutOverviewPage.tsx
@@ -0,0 +1,282 @@
+import { DxcParagraph, DxcFlex, DxcBulletedList, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Code from "@/common/Code";
+import Image from "@/common/Image";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import layoutGrid from "./images/layout_grid.png";
+import layoutBreakpoints from "./images/layout_breakpoints.png";
+import layoutMargins from "./images/layout_margins.png";
+import Link from "next/link";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The Application Layout is the base scaffolding of any application built in Halstack, serving
+ as the structural and organizational framework for all UI components.
+
+
+ The following layout components are designed to work together, enabling flexible and consistent UI structures:
+
+
+
+
+
+ Flex
+
+ :
+ {" "}
+ For fluid, responsive content arrangements.
+
+
+
+
+ Bleed
+
+ :
+ {" "}
+ To extend content beyond container boundaries when needed.{" "}
+
+
+
+
+ Inset
+
+ :
+ {" "}
+ For controlled internal spacing within containers.
+
+
+
+ ),
+ },
+ {
+ title: "Grid system",
+ content: (
+ <>
+
+ The Halstack layout system is built on a rigorous 8px grid, which serves as the foundational framework for all
+ component placement and spacing. This geometric backbone ensures visual harmony by standardizing measurements,
+ alignments, and spatial relationships across every interface.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Breakpoints",
+ content: (
+ <>
+
+ Breakpoints are specific screen widths where a layout adapts to deliver an optimal experience across devices.
+
+
+ The Halstack system uses five carefully calibrated breakpoints based on:
+
+
+ Analysis of current device resolution trends
+ Overview patterns across mobile, tablet, and desktop
+
+
+
+
+
+
+
+
Breakpoint
+
px
+
rem
+
+
+
+
+
+ xsmall
+
+
320
+
20
+
+
+
+ small
+
+
480
+
30
+
+
+
+ medium
+
+
720
+
45
+
+
+
+ large
+
+
1056
+
66
+
+
+
+ xlarge
+
+
1440
+
90
+
+
+
+
+ ),
+ },
+ {
+ title: "Columns, gutters and margins",
+ 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: Content containers (increase with screen size)
+
+
+ Gutters: Spacing between columns (scale responsively)
+
+
+ Margins: Padding between content and viewport edges
+
+
+ All three elements should be recalibrated at each breakpoint to:
+
+ Maximize content legibility
+ Maintain proportional spacing
+ Ensure touch target accessibility
+
+
+ ),
+ subSections: [
+ {
+ title: "Recommended values",
+ content: (
+ <>
+
+
+
+
Breakpoint
+
Columns
+
Gutter (recomended) ¹
+
Margin (min) ²
+
+
+
+
+
+ xsmall
+
+
4
+
16 / small
+
24
+
+
+
+ small
+
+
4
+
16 / small
+
24
+
+
+
+ medium
+
+
4
+
24 / medium
+
48
+
+
+
+ large
+
+
8
+
16 / small
+
56
+
+
+
+ xlarge
+
+
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.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Enforce the 8px baseline grid: Align all measurements (spacing, sizing, positioning) to
+ multiples of 8px for visual harmony.
+
+
+ imit 4px adjustments: Reserve finer increments only for edge cases like icon alignment or
+ typography.
+
+
+ Test across all five breakpoints: Verify layouts adapt seamlessly from mobile (320px) to
+ desktop (1200px+).
+
+
+ Default to recommended values: Use predefined gutter/margin sizes unless justified by
+ specific use cases.
+
+
+ Scale columns proportionally: Increase column count with screen size while preserving
+ gutter/margin ratios.
+
+
+
+ ),
+ },
+];
+
+const ApplicationLayoutOverviewPage = () => (
+
+
+
+
+
+
+);
+
+export default ApplicationLayoutOverviewPage;
diff --git a/apps/website/screens/components/application-layout/overview/images/layout_breakpoints.png b/apps/website/screens/components/application-layout/overview/images/layout_breakpoints.png
new file mode 100644
index 0000000000..193c3a4f85
Binary files /dev/null and b/apps/website/screens/components/application-layout/overview/images/layout_breakpoints.png differ
diff --git a/apps/website/screens/components/application-layout/overview/images/layout_grid.png b/apps/website/screens/components/application-layout/overview/images/layout_grid.png
new file mode 100644
index 0000000000..aaf2142f4d
Binary files /dev/null and b/apps/website/screens/components/application-layout/overview/images/layout_grid.png differ
diff --git a/apps/website/screens/components/application-layout/overview/images/layout_margins.png b/apps/website/screens/components/application-layout/overview/images/layout_margins.png
new file mode 100644
index 0000000000..1d4506b853
Binary files /dev/null and b/apps/website/screens/components/application-layout/overview/images/layout_margins.png differ
diff --git a/apps/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx b/apps/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx
deleted file mode 100644
index 313b3a920c..0000000000
--- a/apps/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { DxcBulletedList, DxcParagraph, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import Image from "@/common/Image";
-import Figure from "@/common/Figure";
-import specsImage from "./images/appLayout_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- 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.
-
-
-
- ),
- },
- {
- 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
-
-
-
- xlarge
-
-
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.
-
-
-
- ),
- },
-];
-
-const ApplicationLayoutSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ApplicationLayoutSpecsPage;
diff --git a/apps/website/screens/components/application-layout/specs/images/appLayout_specs.png b/apps/website/screens/components/application-layout/specs/images/appLayout_specs.png
deleted file mode 100644
index 707f39a70b..0000000000
Binary files a/apps/website/screens/components/application-layout/specs/images/appLayout_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx b/apps/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx
deleted file mode 100644
index 52c1a27baa..0000000000
--- a/apps/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
-import Image from "@/common/Image";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import layoutGrid from "./images/layout_grid.png";
-import layoutBreakpoints from "./images/layout_breakpoints.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- The application layout is the base component that wraps any application built with Halstack. In addition to
- this, all of the components listed below can be used within each other to create a wide variety of standard
- layouts:
-
-
- Flex
- Bleed
- Inset
-
-
- ),
- },
- {
- title: "Grid",
- content: (
- <>
-
- The grid provides the foundation for consistently positioning elements onscreen. The 8px 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.
-
-
-
-
- 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:
-
-
-
-