[community-group] Proposal for a Standardized Color Palette Specification (#186)

caoimghgin has just created a new issue for https://github.com/design-tokens/community-group:

== Proposal for a Standardized Color Palette Specification ==
This proposal is inspired by [colorPalette composite type #178](https://github.com/design-tokens/community-group/issues/178) opened by @drwpow

To allow us to integrate new brands/products into existing Design Systems globally and systemically, design-tokens should be agnostic to any specific color system that an individual organization has defined. The proposed solution should also be compliant to WCAG color contrast standards and easily understood by designers/engineers. We have two levels of definition.

**SEMANTIC NAMING:**
Palette colors (or, global, core, base) should always be named for design intention/use rather than the actual color itself. Not 'cornflower-blue', or 'hunters-green' but 'primary', if design intention is used as the background of the main CTA button in default state. Suggest the following as semantic standards.

- primary
- secondary
- tertiary
- positive
- negative
- highlight
- attention
- info
- system
- neutral

These 10 semantics handles 99% or more of any design need. Duplicate values are OK (primary, secondary, and tertiary can have identical values, if that particular brand does not have such accent colors)

**SEMANTIC+WEIGHT:**
All Semantic colors are divided into 14 weights, each assigned a specific number (always three numbers with leading zeros) which aligns to WCAG color contrast behavior via L* value of CIEL*a*b*. Propose number 400 as 'base' color (L* 45) which passes 4.5:1 on white as well as 015, 025. The number 400 is chosen to map to the concept of a 'normal' font weight. Proposed weights are listed here...

- 015 (lightest color possible before white) **L*97.5**
- 025
- 050
- 075
- 085
- 100  (3.0:1 contrast on white only) **L*60.0**
- 200 (3.0:1 contrast on white, 015, and 025) **L*55.0**
- 300 (4.5:1 contrast on white and black) **L*49.5**
- 400  (4.5:1 contrast on white, 015, and 025)  **L*45.0**
- 500
- 600
- 700
- 800
- 900

Therefore 'primary400' is recommended to be used CONTEXTUALLY as the default background color of the main CTA button in default state in light-mode, though the designer may choose a higher/lower weight in their contextual token such as "color-background-button-primary-default === var(primary100)", fully recognizing this can be problematic for WCAG compliance.

I hesitate to propose a naming convention for **contextual colors** (brand specific, handles dark/light modes) but this proposal could be the foundation for that next step. 

**MAPPING TO EXISTING ORGANIZATIONALLY DEFINED SYSTEMS**
If we consider 'packaged' colors as provided by IBM Carbon and SalesForce Lightning as acceptable standards as both systems align to L* weights, we can map both standards to the above proposal. For instance, IBM Carbon color60 is a match for the proposed universal color system of color400. Likewise SalesForce Lightning color50 is a match for color300.

Rather than go into all details, let's see if this proposal is interesting to the design-token community or appropriate to the scope of this initiative. 

FURTHER READING:
[The Genome Color Tool](https://uxdesign.cc/the-genome-color-tool-28ce73b20768)
[How to name your colors](https://uxdesign.cc/how-should-you-name-your-colors-in-a-design-system-3086513476df
)




Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/186 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 19 November 2022 16:16:56 UTC