Page MenuHomePhabricator
Create Task
Maniphest T296995

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

Assigned To
Volker_E
Authored By
Sarai-WMDE
Dec 3 2021, 11:18 AM
Tags
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
Subscribers
Aklapper
AnneT
bmartinezcalvo
• DAbad
• iamjessklein
ldelench_wmf
NBaca-WMF
View All 9 Subscribers

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

Details

SubjectRepoBranchLines +/-
Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10mediawiki/coremaster+261 -112
tokens: Use design-first Background Color decision tokensdesign/codexmain+125 -83
tokens: Use design-first Color decision tokensdesign/codexmain+74 -51
tokens: Follow new color palette naming scheme for design-first tokensdesign/codexmain+258 -155
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 Duplicate• STHT302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
 InvalidNoneT302025 Upgrade Codex to Beta version
 ResolvedVolker_ET293127 [EPIC] Design System Foundation: Design and define design tokens
 ResolvedNoneT314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
 ResolvedbmartinezcalvoT295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
 ResolvedVolker_ET296995 Define the system's color palette
 ResolvedVolker_ET297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
 ResolvedVolker_ET305236 Create visited red link color token
 ResolvedVolker_ET313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
 Resolvedldelench_wmfT322833 Update Yellow 600 for warning color
 ResolvedVolker_ET324449 Add new colors used in Message component and update border colors to the darkest tone
 Resolved• EUdoh-WMFT322960 Define `accent-color` design token
 ResolvedSarai-WMDET296998 [Epic] Define the system's typographic styles and scale
 Resolved• DAbadT305920 Define the system's sans, serif and monospace typefaces
 ResolvedVolker_ET305947 Define the system's typographic scale (font sizes and line-heights)
 ResolvedbmartinezcalvoT321470 Use the system's typographic scale tokens (font size and line-heights)
 Resolved• KieranMcCannT303587 Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages
 OpenNoneT331612 Document internationalization limitations of Figma font selection in Typography guidelines
 DuplicateNoneT309158 Update Wikimedia Design Style Guide with typeface choices
 ResolvedVolker_ET313693 Implement system typeface choices in Codex tokens
 Resolved• DAbadT318023 Define the system's typographic styles on text decoration
 ResolvedVolker_ET322707 Provide `tab-size` option and decision token
 Resolved• DAbadT322811 Provide (legacy) font families as Codex tokens
 ResolvedSarai-WMDET297000 Define the design system's size and spacing scale
 ResolvedCatropeT324367 Enable Codex tokens to work with different font sizes
 OpenNoneT326900 Vertical centering issues of text/multiline text and icons in several components
ResolvedovasilevaT328053 Verify impact of Design Systems Team's Codex Update on Web properties
 ResolvedBUG REPORTVolker_ET329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
 ResolvedVolker_ET297001 Define the system's opacities
 ResolvedVolker_ET305084 Add 0.3 opacity
 ResolvedVolker_ET297003 Define the system's box shadow styles
 ResolvedVolker_ET310409 Button: Simplify focus styles application including `box-shadow`
 ResolvedSarai-WMDET297007 Define the system's iconography
 ResolvedVolker_ET300562 Define Border tokens
 ResolvedbmartinezcalvoT302181 Define the system's cursors
 ResolvedCatropeT304443 Document Motion tokens (animations and transitions)
Resolved• DAbadT303522 Decide on CSS breakpoints for the design system
 ResolvedVolker_ET322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Sarai-WMDE updated the task description. (Show Details)Dec 3 2021, 11:31 AM
Sarai-WMDE mentioned this in T295991: Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma.
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
Volker_E added a project: Design.Dec 8 2021, 6:33 AM
bmartinezcalvo claimed this task.Dec 13 2021, 9:32 AM
bmartinezcalvo updated the task description. (Show Details)Dec 13 2021, 9:59 AM
bmartinezcalvo added a subtask: T297584: [Spike] Design System: Re-evaluate color palette nomenclature and numerals.Dec 13 2021, 10:02 AM
AnneT subscribed.Dec 13 2021, 5:31 PM
bmartinezcalvo changed the task status from Open to In Progress.Dec 22 2021, 5:24 PM
bmartinezcalvo changed the status of subtask T297584: [Spike] Design System: Re-evaluate color palette nomenclature and numerals from Open to In Progress.
bmartinezcalvo moved this task from Incoming/Requests to Doing on the Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board) board.Jan 10 2022, 12:13 PM
bmartinezcalvo closed this task as Resolved.EditedJan 10 2022, 1:29 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.

bmartinezcalvo reopened this task as In Progress.Jan 10 2022, 1:32 PM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo moved this task from Doing to Code Review on the Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board) board.
bmartinezcalvo added subscribers: • iamjessklein, Volker_E.EditedJan 28 2022, 3:43 PM

@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)

bmartinezcalvo moved this task from Code Review to Design Review on the Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board) board.Jan 31 2022, 6:28 PM
egardner moved this task from Inbox to Planned New Components on the Codex board.Feb 15 2022, 11:08 PM
Volker_E mentioned this in T269138: "success" greens in Codex are too blue.Feb 16 2022, 6:50 PM
bmartinezcalvo added a comment.EditedFeb 16 2022, 7:15 PM

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.

bmartinezcalvo reassigned this task from bmartinezcalvo to Volker_E.Feb 16 2022, 7:16 PM
bmartinezcalvo updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Feb 28 2022, 7:19 AM
bmartinezcalvo added a subtask: T305236: Create visited red link color token.Apr 1 2022, 10:45 AM
gerritbot added a comment.Apr 4 2022, 11:16 PM

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

gerritbot added a project: Patch-For-Review.Apr 4 2022, 11:16 PM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Sprint); removed Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board).Apr 18 2022, 4:45 PM
ldelench_wmf moved this task from Committed to In Development on the Design-System-Team (Design-System-Sprint) board.
ldelench_wmf moved this task from Planned New Components to Inbox on the Codex board.Apr 22 2022, 8:51 PM
bmartinezcalvo mentioned this in T305437: [Design Spike] Audit all use cases for "disabled" buttons to identify inconsistencies.Apr 25 2022, 10:36 AM
• STH triaged this task as High priority.May 1 2022, 12:54 PM
bmartinezcalvo mentioned this in T302334: Update active color state for link component.May 23 2022, 11:48 AM
bmartinezcalvo moved this task from In Development to Ready for Development on the Design-System-Team (Design-System-Sprint) board.May 24 2022, 8:22 AM

@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)

gerritbot added a comment.May 24 2022, 7:10 PM

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

Maintenance_bot removed a project: Patch-For-Review.May 24 2022, 7:31 PM
Volker_E updated the task description. (Show Details)May 25 2022, 12:34 AM
ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).Jun 3 2022, 6:44 PM
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.

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Jun 3 2022, 6:44 PM
bmartinezcalvo mentioned this in T313507: [SPIKE] Create scope for Link MVP.Jul 21 2022, 1:27 PM
• DAbad added a parent task: T314086: Design System Foundation: Define & Implement Critical "Global" Visual Styles.Jul 28 2022, 9:12 PM
• DAbad moved this task from Backlog to Up Next on the Design-System-Team board.Jul 28 2022, 9:16 PM
• DAbad subscribed.

Prioritizing for upcoming sprint

gerritbot added a comment.Aug 4 2022, 1:30 PM

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

gerritbot added a project: Patch-For-Review.Aug 4 2022, 1:30 PM
gerritbot added a comment.Aug 5 2022, 2:15 PM

Change 820448 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Aug 5 2022, 2:30 PM
gerritbot added a comment.Aug 10 2022, 2:01 PM

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

gerritbot added a project: Patch-For-Review.Aug 10 2022, 2:02 PM
gerritbot added a comment.Aug 15 2022, 8:00 PM

Change 822087 merged by jenkins-bot:

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

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

gerritbot added a comment.Aug 16 2022, 8:13 PM

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

gerritbot added a comment.Aug 16 2022, 9:29 PM

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

bmartinezcalvo closed subtask T305236: Create visited red link color token as Declined.Aug 25 2022, 11:52 AM
bmartinezcalvo reopened subtask T305236: Create visited red link color token as Open.Aug 26 2022, 1:20 PM
ldelench_wmf closed subtask T313502: Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory' as Resolved.Aug 29 2022, 3:33 PM
Volker_E removed a project: Patch-For-Review.Sep 8 2022, 1:54 AM
Volker_E updated the task description. (Show Details)
ldelench_wmf edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Sep 16 2022, 5:57 PM

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

Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint). · View Herald TranscriptSep 16 2022, 5:57 PM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Sep 16 2022, 7:05 PM
bmartinezcalvo updated the task description. (Show Details)Oct 19 2022, 2:36 PM
bmartinezcalvo mentioned this in T321202: Add missing color decision tokens.Oct 19 2022, 2:54 PM
Volker_E closed subtask T305236: Create visited red link color token as Resolved.Oct 19 2022, 9:22 PM
ldelench_wmf set the point value for this task to 3.Oct 24 2022, 3:37 PM
bmartinezcalvo closed subtask T297584: [Spike] Design System: Re-evaluate color palette nomenclature and numerals as Resolved.Nov 7 2022, 4:14 PM
bmartinezcalvo mentioned this in T297584: [Spike] Design System: Re-evaluate color palette nomenclature and numerals.
Volker_E mentioned this in T309050: Developer experience feedback on Design Tokens.Nov 7 2022, 10:20 PM
Catrope moved this task from Ready for Development to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.Dec 5 2022, 5:36 PM
NBaca-WMF subscribed.Dec 5 2022, 5:40 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

ldelench_wmf closed subtask T322833: Update Yellow 600 for warning color as Resolved.Dec 7 2022, 9:54 PM
Volker_E added a subtask: T322960: Define `accent-color` design token.Dec 19 2022, 6:38 PM
Volker_E closed subtask T322960: Define `accent-color` design token as Resolved.Jan 7 2023, 12:33 AM
AnneT moved this task from Inbox to Infrastructure on the Codex board.Mar 1 2023, 4:36 PM
Volker_E changed the status of subtask T324449: Add new colors used in Message component and update border colors to the darkest tone from Open to In Progress.Apr 13 2023, 12:23 PM
Volker_E closed subtask T324449: Add new colors used in Message component and update border colors to the darkest tone as Resolved.May 18 2023, 8:24 PM
bmartinezcalvo closed this task as Resolved.Jun 5 2023, 5:40 PM
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.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL