Page MenuHomePhabricator

[Spike] Design System: Re-evaluate color palette nomenclature and numerals
Closed, ResolvedPublic3 Estimated Story Points

Description

With outreach by Bárbara gathered in question around color labels, another question was raised: Are our current colors numerals confusing?

Background

In our current numeral system of colors, the lightest color corresponds to the highest number (100) and the darkest color corresponds to the lowest number (0). This is because these numbers correspond with the lightness of the HSL values. But this nomenclature is the opposite that is usually used in other Design Systems, and designers find it confusing (darkest color should corresponds to the highest number).

Goal

Evaluation of the current color numerals and their simplicity and understanding in choosing and applying them for design system users.

We need to choose between these 2 options:

  • Option A: Lightest color corresponds to the highest number
  • Option B: Darkest color corresponds to the highest number

User stories

As a designer, I'd like to quickly understand where in the numeral order colors are to find and can simply identify their meaning.

Considerations

  • Every color space has issues with perception and definition, a hue numeral can only be a proximation in our current color definition scales.
  • Be clear about change cost and possible confusion that change of a commonly used system in place since 2016 brings with it.
Development considerations
  • Ensure that possible change is not disruptive in current applications of DSG colors, like WikimediaUI Base using products

Other design systems in comparison

In the following systems, colors numbers are defined as the highest the darkest (the opposite of our system)

To do

  • Define the numbers nomenclature in our colors palette

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedDAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
ResolvedDAbad
ResolvedVolker_E
ResolvedDAbad
ResolvedSarai-WMDE
ResolvedCatrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
ResolvedDAbad
ResolvedVolker_E

Event Timeline

bmartinezcalvo changed the task status from Open to In Progress.Dec 22 2021, 5:24 PM

Hi all,

After a deep exploration with different possible colors nomenclatures and numerals, I send you the final version where the PatternLab together with the rest of designers decided to move forward with a simple nomenclature (blue, green, red...) and numerals indicating the highest number the darkest color (as we wanted an abstract scale).

Colors palette.png (3×3 px, 622 KB)

Figma file with all versions here.

If you want to read more about the process, you can read here all the explorations and decisions made.

If you all agree with this new nomenclature, I can add these styles in our DS Figma File.

bmartinezcalvo renamed this task from [Spike] Design System: Re-evaluate color palette numerals to [Spike] Design System: Re-evaluate color palette nomenclature and numerals.Jan 10 2022, 2:45 PM

Thanks @bmartinezcalvo, these look really great.

Can you clarify your ask here:

If you all agree with this new nomenclature, I can add these styles in our DS Figma File.

From what I understand, it seems that the designers have approved the approach, is the goal to now gain approval from non-designers (engineers, pm)?

@iamjessklein my question was just to double check that I can move forward with the next step (add the styles with these new nomenclature to our WikimediaUI Figma file).

Can I move forward or do I need more approvals from non-designers?

After reviewing all our tokens nomenclature, I have updated the Global colors nomenclature with the following:

  • We will use numerical nomenclature for all our global tokens.
  • We will use 100, 200, 300 instead of 10, 20, 30 for colors, being numbers less tan 100 for opacities (opacity 100%, 65%, 0%).
  • We will use numbers only when the color scale has more than 1 color, so Black, White and Purple will not have number in their names.
  • We eliminate the jumps between numbers (e.g. between the current Base50 and Base30), leaving a more organized, clearer and more logical scale for the user.
  • All colors are now organized from darkest to lightest, without having a light-darkest-medium jump (that we previously had in the blue, red, green and yellow colors).

With this new nomenclature we have the following advantages:

  • By having simple names (Blue, Red, Green...), the color palette is easy to understand and memorable for any user. We'll use the most simple names in global tokens and more complex use cases names in decision tokens.
  • The proposal is to detach the number in the colors’ name from the colors’ HSL value, and instead present a more abstract scale (all colors are, after all, replaceable) that represents and reinforces the relationship between colors in a more intuitive way: the higher the number, the darker the color.
  • We present the colors in a more intuitively way, removing the HSL value of colors and using instead a more abstract scale that orders colors and numbers being the darkest the highest and the lightest the lowest with, being able the user to relate the number with the degree of darkness of the color.
  • This new proposal represents and reinforces the relationship between colors in a more intuitive way: the higher the number, the darker the color. We remove the HSL value of colors and use instead a more abstract and easy to use scale, being able the user to relate the number with the degree of darkness of the color.

I send you the last Figma proposal where you can find both Global and Decision color tokens and I assign the task to @Volker_E so he can start with the Codex step.

Color.png (3×7 px, 794 KB)

We've been using this new color terminology for a while now. The theme/option design tokens in our library reflect the new numerical scale. Should we mark this task as resolved? We might need to document the need to update the color palette in the design style guide in case such task doesn't exist yet, @Volker_E

ldelench_wmf set the point value for this task to 3.Oct 24 2022, 3:37 PM
bmartinezcalvo closed this task as Resolved.EditedNov 7 2022, 4:14 PM
bmartinezcalvo added a subscriber: ldelench_wmf.

@ldelench_wmf resolving this task since the primitive colors (option tokens) nomenclature were already renamed as part of T296995