dxc-technology · raquelarrojo · Mar 11, 2026 · Mar 5, 2026 · Mar 6, 2026 · Mar 9, 2026
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ const App = () => (
 
 ## Where to start
 
-Learn everything you need to know about Halstack principles and components on the [official documentation site](https://developer.assure.dxc.com/halstack/).
+Learn everything you need to know about Halstack guidelines and components on the [official documentation site](https://developer.assure.dxc.com/halstack/).
 
 ## Contributing
 

diff --git a/...e/pages/principles/data-visualization.tsx → ...e/pages/guidelines/data-visualization.tsx b/...e/pages/principles/data-visualization.tsx → ...e/pages/guidelines/data-visualization.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import DataVisualizationPage from "screens/principles/data-visualization/DataVisualizationPage";
+import DataVisualizationPage from "screens/guidelines/data-visualization/DataVisualizationPage";
 
 const DataVisualization = () => (
   <>

diff --git a/...website/pages/principles/localization.tsx → ...website/pages/guidelines/localization.tsx b/...website/pages/principles/localization.tsx → ...website/pages/guidelines/localization.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import LocalizationPage from "screens/principles/localization/LocalizationPage";
+import LocalizationPage from "screens/guidelines/localization/LocalizationPage";
 
 const Localization = () => (
   <>

diff --git a/apps/website/pages/guidelines/themes.tsx b/apps/website/pages/guidelines/themes.tsx
@@ -0,0 +1,13 @@
+import Head from "next/head";
+import ThemesPage from "screens/guidelines/themes/ThemesPage";
+
+const Themes = () => (
+  <>
+    <Head>
+      <title>Themes — Halstack Design System</title>
+    </Head>
+    <ThemesPage />
+  </>
+);
+
+export default Themes;
diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx
@@ -36,9 +36,10 @@ const utilitiesLinks: LinkDetails[] = [
   },
 ];
 
-const principlesLinks: LinkDetails[] = [
-  { label: "Data visualization", path: "/principles/data-visualization", icon: "insert_chart" },
-  { label: "Localization", path: "/principles/localization", icon: "language" },
+const guidelinesLinks: LinkDetails[] = [
+  { label: "Data visualization", path: "/guidelines/data-visualization", icon: "insert_chart" },
+  { label: "Localization", path: "/guidelines/localization", icon: "language" },
+  { label: "Themes", path: "/guidelines/themes", icon: "colors" },
 ];
 
 const tokensLinks: LinkDetails[] = [
@@ -70,7 +71,7 @@ const componentsLinks = componentsList as (LinkDetails | LinksSectionDetails)[];
 
 export const LinksSections: LinksSectionDetails[] = [
   { label: "Overview", links: overviewLinks },
-  { label: "Principles", links: principlesLinks },
+  { label: "Guidelines", links: guidelinesLinks },
   { label: "Foundations", links: foundationsLinks },
   { label: "Migration", links: migrationLinks },
   { label: "Utilities", links: utilitiesLinks },

diff --git a/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx b/apps/website/screens/components/quick-nav/code/examples/quickNav.tsx
@@ -6,7 +6,7 @@ const code = `() => {
       label: "Overview",
     },
     {
-      label: "Principles",
+      label: "Foundations",
       links: [
         { label: "Color" },
         { label: "Spacing" },

diff --git a/...a-visualization/DataVisualizationPage.tsx → ...a-visualization/DataVisualizationPage.tsx b/...a-visualization/DataVisualizationPage.tsx → ...a-visualization/DataVisualizationPage.tsx
diff --git a/.../data-visualization/examples/barChart.tsx → .../data-visualization/examples/barChart.tsx b/.../data-visualization/examples/barChart.tsx → .../data-visualization/examples/barChart.tsx
diff --git a/...zation/images/bar_chart_color_palette.png → ...zation/images/bar_chart_color_palette.png b/...zation/images/bar_chart_color_palette.png → ...zation/images/bar_chart_color_palette.png
diff --git a/...sualization/images/bar_chart_variants.png → ...sualization/images/bar_chart_variants.png b/...sualization/images/bar_chart_variants.png → ...sualization/images/bar_chart_variants.png
diff --git a/...nciples/localization/LocalizationPage.tsx → ...delines/localization/LocalizationPage.tsx b/...nciples/localization/LocalizationPage.tsx → ...delines/localization/LocalizationPage.tsx
diff --git a/...es/localization/examples/translations.tsx → ...es/localization/examples/translations.tsx b/...es/localization/examples/translations.tsx → ...es/localization/examples/translations.tsx
diff --git a/apps/website/screens/guidelines/themes/ThemesPage.tsx b/apps/website/screens/guidelines/themes/ThemesPage.tsx
@@ -0,0 +1,133 @@
+import DocFooter from "@/common/DocFooter";
+import PageHeading from "@/common/PageHeading";
+import DxcQuickNavContainer from "@/common/QuickNavContainer";
+import { DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import Link from "next/link";
+
+const sections = [
+  {
+    title: "What is a theme in Halstack?",
+    content: (
+      <>
+        <DxcParagraph>
+          In Halstack, a theme is a <strong>structured set of properties</strong> that defines how your brand is
+          expressed across the design system. These properties allow you to adapt core visual decisions such as colors
+          and logos, while preserving the consistency, accessibility, and usability standards defined by Halstack.
+        </DxcParagraph>
+        <DxcParagraph>
+          To understand what a theme is, it is important to recognize that the definition of colors, sizes, shapes, and
+          visual foundations is an intrinsic part of any design system. These elements are carefully designed to ensure
+          accessibility, usability, and a consistent user experience. For this reason, changing them must be done in a
+          controlled and intentional way.
+        </DxcParagraph>
+        <DxcParagraph>
+          Themes provide this controlled flexibility. They allow teams to override specific foundational decisions of
+          the Halstack Design System in order to adapt product to different brand identities, while still benefiting
+          from the structure and scalability of the system.
+        </DxcParagraph>
+      </>
+    ),
+  },
+  {
+    title: "Why themes matter?",
+    content: (
+      <>
+        <DxcParagraph>
+          Color, branding, and visual identity{" "}
+          <strong>play a key role in how users perceive and interact with a product</strong>. A consistent and
+          accessible visual language helps guide user behavior, improves readability, and strengthens trust.
+        </DxcParagraph>
+        <DxcParagraph>
+          However, unmanaged customization can quickly lead to fragmentation, accessibility issues, and higher
+          maintenance costs. Themes help prevent this by offering a structured way to evolve brand identity without
+          breaking the foundations of the design system. They support scalability, maintain accessibility, and enable
+          consistency across products, teams, and client implementations.
+        </DxcParagraph>
+        <DxcParagraph>
+          Typically, teams build their applications using the default Halstack foundations. Themes are applied only when
+          there is a clear need to adapt the experience to a specific brand, such as in white-label or multi-brand
+          environments. In this way, theming remains intentional and aligned with product and business needs.
+        </DxcParagraph>
+      </>
+    ),
+  },
+  {
+    title: "How Halstack manages theming",
+    content: (
+      <>
+        <DxcParagraph>
+          Halstack approaches theming through <strong>design tokens</strong>. Instead of manually adjusting styles in
+          each component, you define a set of core and semantic values that are applied across the system.
+        </DxcParagraph>
+        <DxcParagraph>The main customizable aspects include:</DxcParagraph>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            <strong>Core brand colors</strong> such as primary, secondary, tertiary, and neutral
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Semantic colors</strong> such as info, success, warning, and error
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Brand assets</strong> such as logos and favicons
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+        <DxcParagraph>
+          This approach ensures that customization remains predictable, accessible, and easy to maintain over time.
+        </DxcParagraph>
+      </>
+    ),
+  },
+  {
+    title: "Where to manage your themes",
+    content: (
+      <DxcParagraph>
+        To create and manage themes in Halstack, you can use the Theme Generator tool. You can preview how your theme
+        behaves across real Halstack components, validate contrast and readability, and export a structured file ready
+        to be integrated into your project.
+      </DxcParagraph>
+    ),
+  },
+  {
+    title: "Introducing Theme Generator",
+    content: (
+      <>
+        <DxcParagraph>
+          <Link href="/theme-generator/" passHref legacyBehavior>
+            <DxcLink>Theme Generator</DxcLink>
+          </Link>{" "}
+          helps you create Halstack themes without manual token configuration. Instead of defining dozens of values, you
+          provide your core and semantic colors, and the tool generates a complete, ready-to-use token structure.
+        </DxcParagraph>
+        <DxcParagraph>
+          You can also preview how your theme behaves in real Halstack components and layouts, validate contrast and
+          readability, and export a structured file ready to be integrated into your development workflow.
+        </DxcParagraph>
+        <DxcParagraph>
+          This enables designers and developers to collaborate around a shared and repeatable process, ensuring
+          consistency across products and brands.
+        </DxcParagraph>
+        <DxcParagraph>
+          For more details about how the tool works, visit the{" "}
+          <Link href="/theme-generator/user-guide/" passHref legacyBehavior>
+            <DxcLink>Theme Generator user guide</DxcLink>
+          </Link>
+          .
+        </DxcParagraph>
+      </>
+    ),
+  },
+];
+
+const ThemesPage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <PageHeading>
+      <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
+        <DxcHeading level={1} text="Themes" />
+      </DxcFlex>
+    </PageHeading>
+    <DxcQuickNavContainer sections={sections} startHeadingLevel={2} />
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/guidelines/themes/ThemesPage.tsx" />
+  </DxcFlex>
+);
+
+export default ThemesPage;
diff --git a/apps/website/screens/overview/installation/InstallationPage.tsx b/apps/website/screens/overview/installation/InstallationPage.tsx
@@ -88,7 +88,7 @@ const sections = [
     title: "What's next?",
     content: (
       <DxcParagraph>
-        Before you continue developing your project with Halstack, we encourage you to read our principles. This will
+        Before you continue developing your project with Halstack, we encourage you to read our guidelines. This will
         help you understand the design foundations behind the components and how to use them effectively.
       </DxcParagraph>
     ),

diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
@@ -71,7 +71,7 @@ const sections = [
             text: (
               <>
                 To find out the list of labels that are translatable we should refer to the documentation in the{" "}
-                <Link href="/principles/localization" passHref legacyBehavior>
+                <Link href="/guidelines/localization" passHref legacyBehavior>
                   <DxcLink>Localization</DxcLink>
                 </Link>{" "}
                 section.
@@ -109,6 +109,14 @@ const sections = [
           want and their respective values. Then we pass one of the objects based on the state of the <Code>theme</Code>{" "}
           to the Halstack Provider, which wraps our components, through its <Code>opinionatedTheme</Code> property.
         </DxcParagraph>
+        <DxcParagraph>
+          Themes can be created with the{" "}
+          <Link href="/theme-generator/" passHref legacyBehavior>
+            <DxcLink>Theme Generator</DxcLink>
+          </Link>{" "}
+          tool, which allows you to define your brand colors and export a ready-to-use token structure to pass through
+          the <Code>opinionatedTheme</Code> property.
+        </DxcParagraph>
       </>
     ),
   },