Change Details

With outreach by Bárbara gathered in question around color labels, another question was raised: == 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 - [[ https://material.io/design/color/the-color-system.html | Material ]] (Android) - [[ https://www.carbondesignsystem.com/guidelines/color/overview | Carbono ]] (IBM) - [[ https://www.figma.com/file/NhLpFPf0DU1RTzjksSybym/%E2%9D%96-Base-Gallery-(Community)?node-id=13603%3A121935 | Base ]] (Uber) === Acceptance criteria (or Done) []

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 - [[ https://material.io/design/color/the-color-system.html | Material ]] (Android) - [[ https://www.carbondesignsystem.com/guidelines/color/overview | Carbono ]] (IBM) - [[ https://www.figma.com/file/NhLpFPf0DU1RTzjksSybym/%E2%9D%96-Base-Gallery-(Community)?node-id=13603%3A121935 | Base ]] (Uber) === Acceptance criteria (or Done) []

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 - [[ https://material.io/design/color/the-color-system.html | Material ]] (Android) - [[ https://www.carbondesignsystem.com/guidelines/color/overview | Carbono ]] (IBM) - [[ https://www.figma.com/file/NhLpFPf0DU1RTzjksSybym/%E2%9D%96-Base-Gallery-(Community)?node-id=13603%3A121935 | Base ]] (Uber) === Acceptance criteria (or Done) []