NuDS Colors Foundation Review

Reviewing the Colors foundation in NuDS to respond to new product business needs and ensure scalability and accessibility in the Nubank app.

Problem space

The current color system had significant limitations:

• Frequent customizations detached from NuDS due to lack of support for predictable color combinations or new use cases;

• Colors with conflicting meanings;

• Unclear design token names;

• Over-reliance on the Material Design framework.

Opportunity

A review could provide the opportunity to create a more robust, accessible, and scalable color system with well-defined tokens that would connect meaning to the UI and facilitate collaboration between Design, Engineering, and Product.

The intention was to reduce decisions based on subjective perceptions and define technical and replicable standards.

Iterations

A variety of tools were explored to support the creation of updated primitive palettes.

Initially, I tested Figma plugins, but these proved to be limited in terms of customization for Nu’s specific needs. Next, ColorBox (developed by the Lyft design team) was considered, but it presented inconsistent results, especially in contrast ratios.

The final choice fell on Leonardo, an Adobe tool that allows you to generate palettes based on contrast ratios, ideal for accessibility purposes. Leonardo also stood out for adapting to Light and Dark Mode, another project that would come next for our team.

From there, I built a scale of 41 contrast ratios (from 1:1 to 21:1), organized to create palettes of 10 swatches, balancing contrast and visual.

This was the step that probably required the most iterations, because I went deep into real use cases of our app to define what contrast ratios would match them properly, prioritizing accessibility in text contexts and visual interactions.

Final Solution

The final solution was composed of two main layers of tokens:

Primitive Tokens

This layer consists of color palettes with 10 swatches, each with a defined contrast ratio.

To generate each palette, I created a key color system based on the HSB model, resulting in a matrix of brightness and saturation for each hue. This allowed each palette to adjust to different tones, such as yellow, which darkens to orange, and Nubank's famous purple, which becomes more blueish in darker tones. This technical adjustment made decisions less dependent on the subjective perception of each designer.

Leonardo helped us by crossing the contrast ratio scale with these keu colors, generating our Primitive Tokens.

Semantic Tokens

To leverage meaning to our colors, I created a semantic token framework to help guide designers and developers in the consistent use of colors. Each semantic token was labeled to reflect its use and visual concept, considering:

• UI Elements: if colors are applied to a background, surface, content or border.

• Feedback: Neutral, Success, Attention and Critical.

• Accent: Nubank's purple plays the main accent color, reinforcing the brand and being applied to key components, such as buttons and selected states.

• Decorative and Visualization: for elements without direct meaning, such as illustrations, customization use cases and charts. Accessibility for people with visual impairments played a special role in the Visualization ones.

Documentation

I’ve developed a comprehensive and accessible documentation, including practical guides on the application of semantic tokens, as well as detailed instructions on the use of modifiers and color combinations for different UI elements.

Impact

• Reduced customizations: code customizations (counting also hard coded colors) have dropped by 35%, indicating that the new system is better serving use cases.

• A11Y: UI accessibility has improved, with 100% of color combinations with semantic tokens meeting minimum contrast requirements (WCAG AA) and 70% meeting AAA.

• Satisfaction: an internal survey showed that 88% of designers were satisfied with the new color system, compared to the 62% baseline. This indicated that the system is easier to understand and apply, contributing to increased collaboration between the Design and Engineering teams.

Credits

• Year: 2022

• Product & Strategy: Eduardo Roder, Carla Demarchi

• Research: Nathalia Martins, Zé Zorzan

• Design: Zé Zorzan, Carla Demarchi

• Engineering: Samuel Matias, Enzo Zuccolotto