From b9ad7fec5233d93ea566f2eaac2d345375aff38b Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Wed, 23 Jul 2025 13:44:12 +0200 Subject: [PATCH 1/3] Add Spacing foundations to the documentation site --- apps/website/pages/foundations/spacing.tsx | 13 + apps/website/screens/common/pagesList.ts | 2 +- .../foundations/spacing/SpacingPage.tsx | 315 ++++++++++++++++++ .../foundations/spacing/images/spacings.png | Bin 0 -> 29761 bytes .../principles/spacing/SpacingPage.tsx | 310 ----------------- .../spacing/images/spacing_overview.png | Bin 16234 -> 0 bytes .../spacing/images/spacing_padding.png | Bin 23923 -> 0 bytes .../spacing/images/spacing_types.png | Bin 15785 -> 0 bytes 8 files changed, 329 insertions(+), 311 deletions(-) create mode 100644 apps/website/pages/foundations/spacing.tsx create mode 100644 apps/website/screens/foundations/spacing/SpacingPage.tsx create mode 100644 apps/website/screens/foundations/spacing/images/spacings.png delete mode 100644 apps/website/screens/principles/spacing/SpacingPage.tsx delete mode 100644 apps/website/screens/principles/spacing/images/spacing_overview.png delete mode 100644 apps/website/screens/principles/spacing/images/spacing_padding.png delete mode 100644 apps/website/screens/principles/spacing/images/spacing_types.png diff --git a/apps/website/pages/foundations/spacing.tsx b/apps/website/pages/foundations/spacing.tsx new file mode 100644 index 0000000000..e64addde7f --- /dev/null +++ b/apps/website/pages/foundations/spacing.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import SpacingPage from "screens/foundations/spacing/SpacingPage"; + +const Spacing = () => ( + <> + + Spacing — Halstack Design System + + + +); + +export default 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..eaf856edf3 --- /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. + + Spacings + + ), + }, + { + 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 0000000000000000000000000000000000000000..7ba41593112f393ce5046ad1b1cad7d82887bec3 GIT binary patch literal 29761 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 X8anVg+U*h-@OSF?xnns;Y;XKOv~GGt literal 0 HcmV?d00001 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. - - Spacing overview - - 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. - - - } - > - Spacing methods -
- - ), - }, - { - 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 top padding properties. - - - } - > - Padding properties -
- - - - Component token - Core token - Value - - - - - - xxsmall - - - spacing-4 - - 4px - - - - xsmall - - - spacing-8 - - 8px - - - - small - - - spacing-12 - - 12px - - - - medium - - - spacing-16 - - 16px - - - - large - - - spacing-24 - - 24px - - - - xlarge - - - spacing-32 - - 32px - - - - xxlarge - - - spacing-48 - - 48px - - - - - ), - }, -]; - -export default function SpacingPage() { - return ( - - - - - - - - - - - - ); -} diff --git a/apps/website/screens/principles/spacing/images/spacing_overview.png b/apps/website/screens/principles/spacing/images/spacing_overview.png deleted file mode 100644 index 5ae594b94b377644bcfa64516ac1b7022cadb430..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16234 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 diff --git a/apps/website/screens/principles/spacing/images/spacing_padding.png b/apps/website/screens/principles/spacing/images/spacing_padding.png deleted file mode 100644 index 8060751e32a5b20e68ee2dd1d8fe2c24fd5bd776..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 23923 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 G`9A Date: Wed, 23 Jul 2025 13:49:00 +0200 Subject: [PATCH 2/3] Remove old spacing screen --- apps/website/pages/principles/spacing.tsx | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 apps/website/pages/principles/spacing.tsx diff --git a/apps/website/pages/principles/spacing.tsx b/apps/website/pages/principles/spacing.tsx deleted file mode 100644 index b541a112ed..0000000000 --- a/apps/website/pages/principles/spacing.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import Head from "next/head"; -import SpacingPage from "screens/principles/spacing/SpacingPage"; - -const Spacing = () => ( - <> - - Spacing — Halstack Design System - - - -); - -export default Spacing; From 558220ef61ffbabf0afef9c66565a72c50bfb934 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 24 Jul 2025 13:38:41 +0200 Subject: [PATCH 3/3] Added missing dot --- apps/website/screens/foundations/spacing/SpacingPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/foundations/spacing/SpacingPage.tsx b/apps/website/screens/foundations/spacing/SpacingPage.tsx index eaf856edf3..4c81e05076 100644 --- a/apps/website/screens/foundations/spacing/SpacingPage.tsx +++ b/apps/website/screens/foundations/spacing/SpacingPage.tsx @@ -206,7 +206,7 @@ const sections = [ 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 + Padding inside input fields and controls. Vertical separation of elements within compact cards. Offset between a trigger element and its overlay.