Skip to content

Commit 22a40d4

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2256 from dxc-technology/rarrojolopez/color-foundations
Add color foundations to the documentation site
2 parents c22b99b + e5c036c commit 22a40d4

File tree

12 files changed

+284
-830
lines changed

12 files changed

+284
-830
lines changed

apps/website/pages/principles/color.tsx renamed to apps/website/pages/foundations/color.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from "next/head";
2-
import ColorPage from "screens/principles/color/ColorPage";
2+
import ColorPage from "screens/foundations/color/ColorPage";
33

44
const Color = () => (
55
<>

‎apps/website/screens/common/pagesList.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const utilitiesLinks: LinkDetails[] = [
3333
];
3434

3535
const principlesLinks: LinkDetails[] = [
36-
{ label: "Color", path: "/principles/color" },
3736
{ label: "Data visualization", path: "/principles/data-visualization" },
3837
{ label: "Iconography", path: "/principles/iconography" },
3938
{ label: "Layout", path: "/principles/layout" },
@@ -42,11 +41,14 @@ const principlesLinks: LinkDetails[] = [
4241
{ label: "Typography", path: "/principles/typography" },
4342
];
4443

44+
const foundationsLinks: LinkDetails[] = [{ label: "Color", path: "/foundations/color" }];
45+
4546
const componentsLinks = componentsList as LinkDetails[];
4647

4748
export const LinksSections: LinksSectionDetails[] = [
4849
{ label: "Overview", links: overviewLinks },
4950
{ label: "Principles", links: principlesLinks },
51+
{ label: "Foundations", links: foundationsLinks },
5052
{ label: "Utilities", links: utilitiesLinks },
5153
{ label: "Components", links: componentsLinks },
5254
];
@@ -66,8 +68,10 @@ const getCurrentLinkIndex = (links: LinkDetails[], currentPath: string) => {
6668
export const getNavigationLinks = (currentPath: string): NavigationLinks => {
6769
const links = LinksSections.flatMap((section) => section.links);
6870
const currentLinkIndex = getCurrentLinkIndex(links, currentPath);
69-
return currentLinkIndex === -1 ? {} : {
70-
nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
71-
previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
72-
};
71+
return currentLinkIndex === -1
72+
? {}
73+
: {
74+
nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
75+
previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
76+
};
7377
};

‎apps/website/screens/foundations/color/ColorPage.tsx‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
import { DxcFlex, DxcLink, DxcParagraph, DxcHeading, DxcBulletedList } from "@dxc-technology/halstack-react";
2+
import Figure from "@/common/Figure";
3+
import Image from "@/common/Image";
4+
import QuickNavContainer from "@/common/QuickNavContainer";
5+
import DocFooter from "@/common/DocFooter";
6+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
7+
import neutralColors from "./images/neutral_colors.png";
8+
import alphaColors from "./images/alpha_colors.png";
9+
import primaryColor from "./images/primary_color.png";
10+
import secondaryColor from "./images/secondary_color.png";
11+
import tertiaryColor from "./images/tertiary_color.png";
12+
import semanticColors from "./images/semantic_colors.png";
13+
import PageHeading from "@/common/PageHeading";
14+
15+
const sections = [
16+
{
17+
title: "Introduction",
18+
content: (
19+
<>
20+
<DxcParagraph>
21+
Color is a fundamental element of any design system. It{" "}
22+
<strong>communicates brand identity, guides user interaction, and establishes visual hierarchy</strong>. A
23+
well-structured color foundation ensures consistency across interfaces, reinforces accessibility, and enhances
24+
the emotional impact of the product.
25+
</DxcParagraph>
26+
<DxcParagraph>
27+
Halstack defines a <strong>flexible and accessible color foundation</strong> to support brand expression,
28+
usability, and consistency across all digital products. The color palette is built on a system of design
29+
tokens that enable scalability, maintainability, and theming.
30+
</DxcParagraph>
31+
<DxcParagraph>
32+
The color system <strong>ensures optimal contrast ratios for readability and accessibility</strong>, aligning
33+
with{" "}
34+
<DxcLink href="https://www.w3.org/WAI/perspective-videos/contrast/" newWindow>
35+
WCAG 2.1
36+
</DxcLink>
37+
standards. Token naming follows a semantic structure to promote clarity in implementation and usage.
38+
</DxcParagraph>
39+
<DxcParagraph>
40+
Color is foundational to delivering a coherent user experience and is{" "}
41+
<strong>tightly integrated with components, typography, and layout strategies</strong> throughout the Halstack
42+
ecosystem.
43+
</DxcParagraph>
44+
</>
45+
),
46+
},
47+
{
48+
title: "Transition from HSL to LCH",
49+
content: (
50+
<>
51+
<DxcParagraph>
52+
Previously, Halstack used the HSL color space to define and manipulate colors. While HSL offers simplicity, it
53+
falls short in delivering perceptual consistency; equal steps in saturation or lightness do not translate into
54+
equal visual changes, often resulting in tonal ramps that feel uneven or unreadable.
55+
</DxcParagraph>
56+
<DxcParagraph>
57+
We now adopt the <strong>LCH (Lightness, Chroma, Hue)</strong> color space as a foundation for our color
58+
generation and manipulation. LCH is <strong>perceptually uniform</strong>, meaning changes in values
59+
correspond more closely to how humans actually perceive color differences. This results in:
60+
</DxcParagraph>
61+
<DxcBulletedList>
62+
<DxcBulletedList.Item>
63+
More <strong>balanced and predictable</strong> tonal scales
64+
</DxcBulletedList.Item>
65+
<DxcBulletedList.Item>
66+
<strong>Improved accessibility</strong> through consistent contrast across tones
67+
</DxcBulletedList.Item>
68+
<DxcBulletedList.Item>
69+
Better <strong>visual harmony</strong> in both light and dark themes
70+
</DxcBulletedList.Item>
71+
</DxcBulletedList>
72+
<DxcParagraph>
73+
By switching to LCH, Halstack ensures a more robust, inclusive, and visually coherent color system that scales
74+
effectively across all interfaces and user needs.
75+
</DxcParagraph>
76+
</>
77+
),
78+
},
79+
{
80+
title: "Core color tokens",
81+
content: (
82+
<DxcParagraph>
83+
Colors are <strong>categorized by purpose</strong> (primary, secondary, neutral and semantic) and are extended
84+
through tonal ranges to offer clarity, depth, and hierarchy in UI design.
85+
</DxcParagraph>
86+
),
87+
subSections: [
88+
{
89+
title: "Neutral colors",
90+
content: (
91+
<>
92+
<DxcParagraph>
93+
Neutral colors in Halstack{" "}
94+
<strong>provide structure, depth, and hierarchy without drawing attention.</strong> These include a range
95+
of grays <u>used across surfaces, borders, dividers, and text</u>.
96+
</DxcParagraph>
97+
<DxcParagraph>
98+
They help balance the interface by supporting the primary and semantic colors, and are essential for
99+
creating clear layout separation and focus without introducing visual noise.
100+
</DxcParagraph>
101+
<Figure caption="Neutral colors">
102+
<Image src={neutralColors} alt="Neutral colors" />
103+
</Figure>
104+
</>
105+
),
106+
},
107+
{
108+
title: "Alpha colors",
109+
content: (
110+
<>
111+
<DxcParagraph>
112+
Alpha colors are <strong>translucent overlays derived from base colors.</strong> These tokens are
113+
typically applied in <u>background overlays, elevation and shadows</u>.
114+
</DxcParagraph>
115+
<DxcParagraph>
116+
Alpha values enhance depth and interactivity while maintaining accessibility and visual consistency.
117+
</DxcParagraph>
118+
<Figure caption="Alpha colors">
119+
<Image src={alphaColors} alt="Alpha colors" />
120+
</Figure>
121+
</>
122+
),
123+
},
124+
{
125+
title: "Primary color",
126+
content: (
127+
<>
128+
<DxcParagraph>
129+
Represents <strong>the core identity of DXC</strong> and is used to drive the main interactions across the
130+
interface. It appears in key components such as <u>primary buttons, active elements and highlights</u>.
131+
</DxcParagraph>
132+
<DxcParagraph>
133+
It is the most prominent color in the system and should be used intentionally to guide attention and
134+
reinforce brand consistency. Variants in tone are available for hover, active, and disabled states to
135+
ensure clarity and accessibility.
136+
</DxcParagraph>
137+
<Figure caption="Primary color">
138+
<Image src={primaryColor} alt="Primary color" />
139+
</Figure>
140+
</>
141+
),
142+
},
143+
{
144+
title: "Secondary color",
145+
content: (
146+
<>
147+
<DxcParagraph>
148+
<strong>Complements the primary color</strong> and is used to support secondary actions or highlight less
149+
prominent interface elements. It helps introduce visual variety without overwhelming the user or competing
150+
with primary actions. Common use cases include{" "}
151+
<u>secondary buttons, accent elements or supporting visuals</u>.
152+
</DxcParagraph>
153+
<Figure caption="Secondary color">
154+
<Image src={secondaryColor} alt="Secondary color" />
155+
</Figure>
156+
</>
157+
),
158+
},
159+
{
160+
title: "Tertiary color",
161+
content: (
162+
<>
163+
<DxcParagraph>
164+
The tertiary color is an identity-supporting color that{" "}
165+
<strong>complements both the primary and secondary</strong> colors. It reinforces the overall visual
166+
language and helps highlight less prominent elements without drawing attention away from core actions.
167+
</DxcParagraph>
168+
169+
<Figure caption="Tertiary color">
170+
<Image src={tertiaryColor} alt="Tertiary color" />
171+
</Figure>
172+
</>
173+
),
174+
},
175+
{
176+
title: "Semantic colors",
177+
content: (
178+
<>
179+
<DxcParagraph>
180+
Semantic colors are{" "}
181+
<strong>used to communicate system feedback and status clearly and immediately</strong>. These colors are
182+
designed to be universally recognizable and accessible, ensuring that users can quickly interpret the
183+
state of the system.
184+
</DxcParagraph>
185+
<DxcBulletedList>
186+
<DxcBulletedList.Item>
187+
<strong>Green - Success</strong>: Communicates successful operations, confirmations, or valid states. It
188+
reassures users and reinforces positive outcomes.
189+
</DxcBulletedList.Item>
190+
<DxcBulletedList.Item>
191+
<strong>Orange - Warning</strong>: Used for cautionary messages or potential risks that don’t block
192+
progress but may require attention.
193+
</DxcBulletedList.Item>
194+
<DxcBulletedList.Item>
195+
<strong>Red - Error</strong>: Indicates destructive actions, form validation errors, or system failures.
196+
It draws immediate attention and signals that something needs user correction or caution.
197+
</DxcBulletedList.Item>
198+
</DxcBulletedList>
199+
<DxcParagraph>
200+
These colors are <u>used in components such as alerts, form fields and status indicators among others</u>.
201+
</DxcParagraph>
202+
<Figure caption="Semantic colors">
203+
<Image src={semanticColors} alt="Semantic colors" />
204+
</Figure>
205+
</>
206+
),
207+
},
208+
],
209+
},
210+
{
211+
title: "Best practices",
212+
content: (
213+
<>
214+
<DxcParagraph>
215+
To ensure color is used effectively, inclusively, and consistently across all user interfaces, follow these
216+
best practices:
217+
</DxcParagraph>
218+
<DxcBulletedList>
219+
<DxcBulletedList.Item>
220+
<strong>Don't rely solely on color to communicate information</strong>
221+
<DxcParagraph>
222+
Use color in combination with text labels, icons, or patterns. Some users may be color-blind, have limited
223+
color perception, or interpret colors differently based on cultural context. Always pair color with an
224+
additional visual cue to convey meaning.
225+
</DxcParagraph>
226+
</DxcBulletedList.Item>
227+
<DxcBulletedList.Item>
228+
<strong>Ensure sufficient contrast for accessibility</strong>
229+
<DxcParagraph>
230+
Text and interactive elements must meet minimum contrast requirements to remain legible for all users.
231+
Follow these WCAG 2.1 guidelines:
232+
</DxcParagraph>
233+
<DxcBulletedList type="circle">
234+
<DxcBulletedList.Item>
235+
Use a <strong>contrast ratio of at least 4.5:1</strong> for normal body text.
236+
</DxcBulletedList.Item>
237+
<DxcBulletedList.Item>
238+
Use a <strong>contrast ratio of at least 3:1</strong> for large text (18pt or 14pt bold) and essential
239+
graphical objects (such as icons conveying meaning).
240+
</DxcBulletedList.Item>
241+
</DxcBulletedList>
242+
</DxcBulletedList.Item>
243+
<DxcBulletedList.Item>
244+
<strong>Maintain a limited core palette</strong>
245+
<DxcParagraph>
246+
Avoid excessive use of colors. Stick to the defined palette to strengthen visual harmony and brand
247+
recognition. Introduce neutral tones to balance visual weight and focus user attention appropriately.
248+
</DxcParagraph>
249+
</DxcBulletedList.Item>
250+
<DxcBulletedList.Item>
251+
<strong>Use tonal scales for depth and hierarchy</strong>
252+
<DxcParagraph>Leverage color ramps to create spatial relationships and support elevation.</DxcParagraph>
253+
</DxcBulletedList.Item>
254+
</DxcBulletedList>
255+
</>
256+
),
257+
},
258+
];
259+
260+
export default function ColorPage() {
261+
return (
262+
<DxcFlex direction="column" gap="4rem">
263+
<PageHeading>
264+
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
265+
<DxcHeading level={1} text="Color" />
266+
</DxcFlex>
267+
</PageHeading>
268+
<QuickNavContainerLayout>
269+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
270+
</QuickNavContainerLayout>
271+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/foundations/color/ColorPage.tsx" />
272+
</DxcFlex>
273+
);
274+
}

‎apps/website/screens/foundations/color/images/alpha_colors.png‎

137 KB
Loading

‎apps/website/screens/foundations/color/images/neutral_colors.png‎

151 KB
Loading

‎apps/website/screens/foundations/color/images/primary_color.png‎

233 KB
Loading

‎apps/website/screens/foundations/color/images/secondary_color.png‎

219 KB
Loading

‎apps/website/screens/foundations/color/images/semantic_colors.png‎

676 KB
Loading

‎apps/website/screens/foundations/color/images/tertiary_color.png‎

80.5 KB
Loading

0 commit comments

Comments
 (0)