diff --git a/apps/website/pages/principles/color.tsx b/apps/website/pages/foundations/color.tsx
similarity index 75%
rename from apps/website/pages/principles/color.tsx
rename to apps/website/pages/foundations/color.tsx
index b228b907ce..8d5435b33b 100644
--- a/apps/website/pages/principles/color.tsx
+++ b/apps/website/pages/foundations/color.tsx
@@ -1,5 +1,5 @@
import Head from "next/head";
-import ColorPage from "screens/principles/color/ColorPage";
+import ColorPage from "screens/foundations/color/ColorPage";
const Color = () => (
<>
diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts
index 5256c6349a..ea34e4313d 100644
--- a/apps/website/screens/common/pagesList.ts
+++ b/apps/website/screens/common/pagesList.ts
@@ -33,7 +33,6 @@ const utilitiesLinks: LinkDetails[] = [
];
const principlesLinks: LinkDetails[] = [
- { label: "Color", path: "/principles/color" },
{ label: "Data visualization", path: "/principles/data-visualization" },
{ label: "Iconography", path: "/principles/iconography" },
{ label: "Layout", path: "/principles/layout" },
@@ -42,11 +41,14 @@ const principlesLinks: LinkDetails[] = [
{ label: "Typography", path: "/principles/typography" },
];
+const foundationsLinks: LinkDetails[] = [{ label: "Color", path: "/foundations/color" }];
+
const componentsLinks = componentsList as LinkDetails[];
export const LinksSections: LinksSectionDetails[] = [
{ label: "Overview", links: overviewLinks },
{ label: "Principles", links: principlesLinks },
+ { label: "Foundations", links: foundationsLinks },
{ label: "Utilities", links: utilitiesLinks },
{ label: "Components", links: componentsLinks },
];
@@ -66,8 +68,10 @@ const getCurrentLinkIndex = (links: LinkDetails[], currentPath: string) => {
export const getNavigationLinks = (currentPath: string): NavigationLinks => {
const links = LinksSections.flatMap((section) => section.links);
const currentLinkIndex = getCurrentLinkIndex(links, currentPath);
- return currentLinkIndex === -1 ? {} : {
- nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
- previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
- };
+ return currentLinkIndex === -1
+ ? {}
+ : {
+ nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
+ previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
+ };
};
diff --git a/apps/website/screens/foundations/color/ColorPage.tsx b/apps/website/screens/foundations/color/ColorPage.tsx
new file mode 100644
index 0000000000..e64b178c9e
--- /dev/null
+++ b/apps/website/screens/foundations/color/ColorPage.tsx
@@ -0,0 +1,274 @@
+import { DxcFlex, DxcLink, DxcParagraph, DxcHeading, DxcBulletedList } from "@dxc-technology/halstack-react";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import neutralColors from "./images/neutral_colors.png";
+import alphaColors from "./images/alpha_colors.png";
+import primaryColor from "./images/primary_color.png";
+import secondaryColor from "./images/secondary_color.png";
+import tertiaryColor from "./images/tertiary_color.png";
+import semanticColors from "./images/semantic_colors.png";
+import PageHeading from "@/common/PageHeading";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Color is a fundamental element of any design system. It{" "}
+ communicates brand identity, guides user interaction, and establishes visual hierarchy. A
+ well-structured color foundation ensures consistency across interfaces, reinforces accessibility, and enhances
+ the emotional impact of the product.
+
+
+ Halstack defines a flexible and accessible color foundation to support brand expression,
+ usability, and consistency across all digital products. The color palette is built on a system of design
+ tokens that enable scalability, maintainability, and theming.
+
+
+ The color system ensures optimal contrast ratios for readability and accessibility, aligning
+ with{" "}
+
+ WCAG 2.1
+
+ standards. Token naming follows a semantic structure to promote clarity in implementation and usage.
+
+
+ Color is foundational to delivering a coherent user experience and is{" "}
+ tightly integrated with components, typography, and layout strategies throughout the Halstack
+ ecosystem.
+
+
+ ),
+ },
+ {
+ title: "Transition from HSL to LCH",
+ content: (
+ <>
+
+ Previously, Halstack used the HSL color space to define and manipulate colors. While HSL offers simplicity, it
+ falls short in delivering perceptual consistency; equal steps in saturation or lightness do not translate into
+ equal visual changes, often resulting in tonal ramps that feel uneven or unreadable.
+
+
+ We now adopt the LCH (Lightness, Chroma, Hue) color space as a foundation for our color
+ generation and manipulation. LCH is perceptually uniform, meaning changes in values
+ correspond more closely to how humans actually perceive color differences. This results in:
+
+
+
+ More balanced and predictable tonal scales
+
+
+ Improved accessibility through consistent contrast across tones
+
+
+ Better visual harmony in both light and dark themes
+
+
+
+ By switching to LCH, Halstack ensures a more robust, inclusive, and visually coherent color system that scales
+ effectively across all interfaces and user needs.
+
+
+ ),
+ },
+ {
+ title: "Core color tokens",
+ content: (
+
+ Colors are categorized by purpose (primary, secondary, neutral and semantic) and are extended
+ through tonal ranges to offer clarity, depth, and hierarchy in UI design.
+
+ ),
+ subSections: [
+ {
+ title: "Neutral colors",
+ content: (
+ <>
+
+ Neutral colors in Halstack{" "}
+ provide structure, depth, and hierarchy without drawing attention. These include a range
+ of grays used across surfaces, borders, dividers, and text.
+
+
+ They help balance the interface by supporting the primary and semantic colors, and are essential for
+ creating clear layout separation and focus without introducing visual noise.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Alpha colors",
+ content: (
+ <>
+
+ Alpha colors are translucent overlays derived from base colors. These tokens are
+ typically applied in background overlays, elevation and shadows.
+
+
+ Alpha values enhance depth and interactivity while maintaining accessibility and visual consistency.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Primary color",
+ content: (
+ <>
+
+ Represents the core identity of DXC and is used to drive the main interactions across the
+ interface. It appears in key components such as primary buttons, active elements and highlights.
+
+
+ It is the most prominent color in the system and should be used intentionally to guide attention and
+ reinforce brand consistency. Variants in tone are available for hover, active, and disabled states to
+ ensure clarity and accessibility.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Secondary color",
+ content: (
+ <>
+
+ Complements the primary color and is used to support secondary actions or highlight less
+ prominent interface elements. It helps introduce visual variety without overwhelming the user or competing
+ with primary actions. Common use cases include{" "}
+ secondary buttons, accent elements or supporting visuals.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Tertiary color",
+ content: (
+ <>
+
+ The tertiary color is an identity-supporting color that{" "}
+ complements both the primary and secondary colors. It reinforces the overall visual
+ language and helps highlight less prominent elements without drawing attention away from core actions.
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Semantic colors",
+ content: (
+ <>
+
+ Semantic colors are{" "}
+ used to communicate system feedback and status clearly and immediately. These colors are
+ designed to be universally recognizable and accessible, ensuring that users can quickly interpret the
+ state of the system.
+
+
+
+ Green - Success: Communicates successful operations, confirmations, or valid states. It
+ reassures users and reinforces positive outcomes.
+
+
+ Orange - Warning: Used for cautionary messages or potential risks that don’t block
+ progress but may require attention.
+
+
+ Red - Error: Indicates destructive actions, form validation errors, or system failures.
+ It draws immediate attention and signals that something needs user correction or caution.
+
+
+
+ These colors are used in components such as alerts, form fields and status indicators among others.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+ To ensure color is used effectively, inclusively, and consistently across all user interfaces, follow these
+ best practices:
+
+
+
+ Don't rely solely on color to communicate information
+
+ Use color in combination with text labels, icons, or patterns. Some users may be color-blind, have limited
+ color perception, or interpret colors differently based on cultural context. Always pair color with an
+ additional visual cue to convey meaning.
+
+
+
+ Ensure sufficient contrast for accessibility
+
+ Text and interactive elements must meet minimum contrast requirements to remain legible for all users.
+ Follow these WCAG 2.1 guidelines:
+
+
+
+ Use a contrast ratio of at least 4.5:1 for normal body text.
+
+
+ Use a contrast ratio of at least 3:1 for large text (18pt or 14pt bold) and essential
+ graphical objects (such as icons conveying meaning).
+
+
+
+
+ Maintain a limited core palette
+
+ Avoid excessive use of colors. Stick to the defined palette to strengthen visual harmony and brand
+ recognition. Introduce neutral tones to balance visual weight and focus user attention appropriately.
+
+
+
+ Use tonal scales for depth and hierarchy
+ Leverage color ramps to create spatial relationships and support elevation.
+
+
+
+ ),
+ },
+];
+
+export default function ColorPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/website/screens/foundations/color/images/alpha_colors.png b/apps/website/screens/foundations/color/images/alpha_colors.png
new file mode 100644
index 0000000000..6f2783002a
Binary files /dev/null and b/apps/website/screens/foundations/color/images/alpha_colors.png differ
diff --git a/apps/website/screens/foundations/color/images/neutral_colors.png b/apps/website/screens/foundations/color/images/neutral_colors.png
new file mode 100644
index 0000000000..e6104a0982
Binary files /dev/null and b/apps/website/screens/foundations/color/images/neutral_colors.png differ
diff --git a/apps/website/screens/foundations/color/images/primary_color.png b/apps/website/screens/foundations/color/images/primary_color.png
new file mode 100644
index 0000000000..898c264d30
Binary files /dev/null and b/apps/website/screens/foundations/color/images/primary_color.png differ
diff --git a/apps/website/screens/foundations/color/images/secondary_color.png b/apps/website/screens/foundations/color/images/secondary_color.png
new file mode 100644
index 0000000000..a1da47363b
Binary files /dev/null and b/apps/website/screens/foundations/color/images/secondary_color.png differ
diff --git a/apps/website/screens/foundations/color/images/semantic_colors.png b/apps/website/screens/foundations/color/images/semantic_colors.png
new file mode 100644
index 0000000000..b56a993552
Binary files /dev/null and b/apps/website/screens/foundations/color/images/semantic_colors.png differ
diff --git a/apps/website/screens/foundations/color/images/tertiary_color.png b/apps/website/screens/foundations/color/images/tertiary_color.png
new file mode 100644
index 0000000000..a704999b75
Binary files /dev/null and b/apps/website/screens/foundations/color/images/tertiary_color.png differ
diff --git a/apps/website/screens/principles/color/ColorPage.tsx b/apps/website/screens/principles/color/ColorPage.tsx
deleted file mode 100644
index 0677565d38..0000000000
--- a/apps/website/screens/principles/color/ColorPage.tsx
+++ /dev/null
@@ -1,824 +0,0 @@
-import { DxcTable, DxcFlex, DxcLink, DxcParagraph, DxcHeading } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import colorOverview from "./images/color_overview.png";
-import colorFamilies from "./images/color_families.png";
-import PageHeading from "@/common/PageHeading";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
-
-
-
- The color palette is an essential asset as a communication resource of our Design System.
-
-
- Halstack color palette brings a unified consistency and helps in guiding the user's perception order. Our
- color palette is based in the{" "}
-
- HSL model
-
- . All our color families are calculated using the lightness value of the standard DXC palette colors.
-
-
- ),
- },
- {
- title: "Color tokens",
- content: (
-
- Halstack uses tokens to manage color. Apart from a multi-purpose greyscale family, purple and blue are the core
- color families used in our set of components. Additional families as red, green and yellow help as feedback
- role-based color palettes and must not be used outside this context.
-
- ),
- subSections: [
- {
- title: "Core color tokens",
- content: (
- <>
-
-
-
-
- ),
- subSections: [
- {
- title: "Absolutes",
- content: (
-
-
-