Color
Mapping

1.- The Problem

As the transition separated Kyndryl from IBM, a completely new brand identity emerged. The new brand guidelines relied heavily on nature, sunsets, and warm, blended tones to communicate its message. While beautiful for marketing materials, translating this into a functional product UI presented a massive challenge.

Functional UI requires specific, universally understood, high-contrast colors to indicate states—such as red for errors, green for success, and yellow for warnings. The core problem was maintaining the emotional essence of the new brand while ensuring functional clarity, usability, and strict accessibility compliance within the platform.

The atmospheric, nature-inspired brand imagery that needed to be translated into strict UI components.

2.- Requirements Assessment

The foundation of the platform was built upon the Carbon Design System v10. We specifically needed to adapt and overwrite the native "Gray 10" (Light Mode) and "Gray 100" (Dark Mode) themes.

We began by mapping Kyndryl’s new brand colors—Core, Support, and Accent tones—directly against the functional requirements of the UI components, identifying where brand colors could replace standard Carbon grays and blues without breaking the system's underlying logic.

Aligning the Kyndryl Core/Support brand palette with the structural Gray 10/100 themes from Carbon.

3.- The Solution

To solve the gap between brand and UI, we engineered a semantic token architecture. Instead of hardcoding hex values into components, we created a tiered system:

• Global Tokens: The raw, base color palette defined by the brand team.
• Semantic Tokens: Aliases that describe the intent of the color (e.g., $ui-background, $interactive-primary, $support-error).
• Component Tokens: Specific applications of semantic tokens to individual UI elements.

This approach allowed us to seamlessly flip between Light and Dark modes. A single semantic token, like $text-primary, would automatically pull the correct dark-gray hex in Light Mode, and the correct light-gray hex in Dark Mode, ensuring engineering implementation was foolproof.

Visualizing the flow from Global Brand Colors to Semantic UI Tokens.

The finalized CSS Variable matrix handed off to engineering for implementation.

4.- Testing Environment and User Validation

Accessibility was non-negotiable. Every semantic token mapping was rigorously tested against WCAG 2.1 AA standards to guarantee a minimum contrast ratio of 4.5:1 for standard text and 3:1 for large text and UI components.

We created a testing environment in Figma utilizing various Carbon components (buttons, notifications, data tables) to visualize how the brand colors behaved across both themes, allowing us to tweak the luminance of our support colors (reds, greens, yellows) until they passed contrast checks without losing their brand identity.

Validating button states and notification banners for strict WCAG AA contrast compliance in Light and Dark themes.