Page MenuHomePhabricator

Define the system's color palette
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
Sarai-WMDE
Dec 3 2021, 11:18 AM
Referenced Files
F35172279: Captura de pantalla 2022-05-24 a las 10.21.30.png
May 24 2022, 8:22 AM
F34954582: Color.png
Feb 17 2022, 5:18 PM
F34954191: Color.png
Feb 17 2022, 11:44 AM
F34954154: Color.png
Feb 17 2022, 10:52 AM
F34953683: Color.png
Feb 16 2022, 7:15 PM
F34934253: Tokens.png
Jan 28 2022, 3:45 PM
F34934249: Tokens.png
Jan 28 2022, 3:43 PM
F34934251: Color Tokens.png
Jan 28 2022, 3:43 PM

Description

Background/Goal

Colors are an essential component of the foundational styles of our system, as they will impact every aspect of it.
The defined color palette will dictate the name and value of our color design tokens.

User stories

As a designer, I need to have access to the system's color palette, so I'm aware of which colors I can apply, and where, when creating system compliant designs.

Acceptance criteria (or Done)

The various shades for the following color categories need to be defined and named:

  • Grey scale
  • Primary colors
  • Secondary colors (utility, feedback colors)
  • Core colors for content, backgrounds, borders and disabled elements (decision tokens)

Notes

Defining color palettes for customizable themes (dark mode, yellow mode, etc.) is out of scope for now.

To do

Design

  • Define colors primitives (choice)
  • Define colors nomenclature and numerals (T297584)
  • When we have the colors primitive (choice), define the colors decisions (usages)

Codex

  • Add Color option tokens to Codex
  • and add Color decision tokens to Codex

DSG

  • Update the style guide with the new color names and relevant updates - Updated in T333437

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolvedldelench_wmf
ResolvedVolker_E
Resolved EUdoh-WMF
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

There are a very large number of changes, so older changes are hidden. Show Older Changes
Sarai-WMDE renamed this task from Defne the system's Color Palette to Define the system's Color Palette.Dec 3 2021, 11:33 AM
Sarai-WMDE renamed this task from Define the system's Color Palette to Define the system's color palette.Dec 3 2021, 2:11 PM
bmartinezcalvo changed the task status from Open to In Progress.Dec 22 2021, 5:24 PM

Hi all,

We have already defined the colors nomenclature and numerals in this task https://phabricator.wikimedia.org/T297584#7608892

About the colors decision tokens, we have been working in these two proposals and we are waiting feedback from the rest of the design team in this slack channel thread. Designers have to spend some minutes in each of the following files, trying to add the styles to a group of components.

  • Option A: organize them by sections and subsections (static & Interactive) (view here)
  • Option B: organized them by sections (without subsections) (view here)

With this test, we will be able to decide which of these two proposals is easier to use, as we need to have a clean and easy to use decision tokens in our design system.

@Volker_E @Sarai-WMDE

After testing the previous proposals (described above) with some designers and knowing that both were not easy to use for them (they noted their preferences for option B but this option was not clear enough) I decided to iterate the color decisions in a new cleaner and easy to use proposal, trying to avoid color decisions repeated to reduce the number of decision tokens.

You can compare here the previous and the new proposals to view how the number of tokens have been reduce to a large number of smaller tokens.

Tokens.png (3×7 px, 812 KB)

I presented this proposal to @Sarai-WMDE and @Volker_E last Wednesday and we agree that this proposal is enough clear to be publish.

We only need to finish defining the following section names as they seemed a bit confusing to us:

  • Border section. This section will be used to show gray border or outlines of form elements. Possible names for this section: Divider & Border, Border, Outline, Line, Frame
  • Background section. This section will be used to show neutral white or gray backgrounds (not colored). Possible names: Background, Surface, Backdrop, Wall

The rest of sections and tokes would already be well defined.

FYI: content-hover (Gray65 #404244) have been documented as legacy so we shouldn't document it in our system styles and we should try to replace it with content-subtle (Gray60 #54595d) as this token is only used for neutral buttons text in hover state.

@iamjessklein @Volker_E @Sarai-WMDE please, have a look in the final proposal in this Figma and tell me your feedbacks. Here you will find both Global and Decision tokens, so you will also be able to compare and understand how both will be shown in our system spec sheets.

Color Tokens.png (3×5 px, 780 KB)

After reviewing all our decision tokens with @Volker_E ,and @Sarai-WMDE I have created this final proposal for both Global and Decision color tokens.

The following decisions have been made:

  • Global tokens will use numerical nomenclature.
  • Decision tokens will have names related with their use cases.
  • We will use 100, 200, 300 instead of 10, 20, 30 for colors, being numbers less tan 100 for opacities (opacity 100%, 65%, 0%).
  • Decision tokens will be grouped in 3 big sections: Content (for text and icons), Border and Background.

Here you can view the final proposal in Figma.

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

I assign the task to @Volker_E so we can start adding these tokens in Codex.

Change 777027 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Follow new color palette naming scheme

https://gerrit.wikimedia.org/r/777027

STH triaged this task as High priority.May 1 2022, 12:54 PM

@Volker_E updated Content decision tokens nomenclature as we commented yesterday during our meeting. We will have color-base instead content-color-base to facilitate development work, and we will group each section (Content, Border, Background) in the Codex demo as we have in the spec sheet to clarify the user which section each token belongs to.

Here you can view the new version of the Figma spec sheet.

Captura de pantalla 2022-05-24 a las 10.21.30.png (772×2 px, 645 KB)

Change 777027 merged by jenkins-bot:

[design/codex@main] tokens: Follow new color palette naming scheme for design-first tokens

https://gerrit.wikimedia.org/r/777027

ldelench_wmf subscribed.

Moving from sprint board to backlog per our defined goals at sprint planning; please holler if there's a reason to bump up the priority.

DAbad subscribed.

Prioritizing for upcoming sprint

Change 820448 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Use design-first Color decision tokens

https://gerrit.wikimedia.org/r/820448

Change 820448 merged by jenkins-bot:

[design/codex@main] tokens: Use design-first Color decision tokens

https://gerrit.wikimedia.org/r/820448

Change 822087 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Use design-first Background Color decision tokens

https://gerrit.wikimedia.org/r/822087

Change 822087 merged by jenkins-bot:

[design/codex@main] tokens: Use design-first Background Color decision tokens

https://gerrit.wikimedia.org/r/822087

Change 823725 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10

https://gerrit.wikimedia.org/r/823725

Change 823725 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10

https://gerrit.wikimedia.org/r/823725

Moving to Design-System-Team (Design-System-Sprint) sine this task is in progress - do you mind moving to the appropriate column, @Volker_E?

ldelench_wmf set the point value for this task to 3.Oct 24 2022, 3:37 PM

Several subtasks are still in progress here - for next steps, we should look to close out tasks that represent the majority of use cases, then refine remaining token-related tasks together in our Engineer/Design sync on Wednesday

bmartinezcalvo updated the task description. (Show Details)

As decided in our DST planning, I'm resolving this task since it seems we don't need to do anything more here. We will open a new task if something new is needed.