Current and new color system

[fcoveram]

Part of #3592

Description

The new color system introduced in #3959 replaces all current colors and introduces new ones in a lightness scale ranging from 1 to 13. In this ticket, you can find the hexcode of all colors and a table showing which color from the new system replace the current ones.

The color semantic documentation will be address in a different ticket.

New colors

In this link you can find the whole set.

:root {
    black: #000;
    white: #fff;
    yellow: #fde034;
    pink: #ad1f85;
    gray: #232323;
    gray-1: #f7f7f7;
    gray-2: #ededed;
    gray-3: #dfdfdf;
    gray-4: #c5c5c5;
    gray-5: #a9a9a9;
    gray-6: #929292;
    gray-7: #7d7d7d;
    gray-8: #676767;
    gray-9: #565656;
    gray-10: #474747;
    gray-11: #363636;
    gray-12: #232323;
    gray-13: #0d0d0d;
    pink-1: #fcf4fa;
    pink-2: #f9e7f3;
    pink-3: #f9d2ec;
    pink-4: #efadd9;
    pink-5: #eb7dc8;
    pink-6: #eb3bbf;
    pink-7: #d028a3;
    pink-8: #ad1f85;
    pink-9: #911a71;
    pink-10: #79165d;
    pink-11: #5e1241;
    pink-12: #3e0c2a;
    pink-13: #1b0410;
    yellow-1: #fff9d4;
    yellow-2: #feefa0;
    yellow-3: #fde034;
    yellow-4: #e5c428;
    yellow-5: #c7a714;
    yellow-6: #ad9011;
    yellow-7: #977a17;
    yellow-8: #81620c;
    yellow-9: #6c5113;
    yellow-10: #5e4012;
    yellow-11: #4a300c;
    yellow-12: #331d05;
    yellow-13: #180801;
    gray-1-10: #f7f7f71a;
    gray-1-20: #f7f7f733;
    gray-1-30: #f7f7f74d;
    gray-1-40: #f7f7f766;
    gray-1-50: #f7f7f780;
    gray-1-60: #f7f7f799;
    gray-1-70: #f7f7f7b2;
    gray-1-80: #f7f7f7cc;
    gray-1-90: #f7f7f7e5;
    gray-12-10: #2323231a;
    gray-12-20: #23232333;
    gray-12-30: #2323234d;
    gray-12-40: #23232366;
    gray-12-50: #23232380;
    gray-12-60: #23232399;
    gray-12-70: #232323b2;
    gray-12-80: #232323cc;
    gray-12-90: #232323e5;
    gray-13-0: #0d0d0d00;
    white-0: #fff0;
    info-1: #f5f7fb;
    info-2: #e6edfc;
    info-3: #d3dffb;
    info-4: #aec5f7;
    info-5: #89a7ef;
    info-6: #678ded;
    info-7: #4571f2;
    info-8: #274fed;
    info-9: #1935dd;
    info-10: #1835ab;
    info-11: #192f73;
    info-12: #122047;
    info-13: #060c1c;
    warning-1: #fcf6f0;
    warning-2: #faead9;
    warning-3: #f9d9b4;
    warning-4: #f1ba77;
    warning-5: #e2972b;
    warning-6: #c7810a;
    warning-7: #ac6e00;
    warning-8: #8d5b0d;
    warning-9: #764c0b;
    warning-10: #643e00;
    warning-11: #4b2f05;
    warning-12: #341e00;
    warning-13: #160a00;
    success-1: #f1fbef;
    success-2: #dff5db;
    success-3: #caeac1;
    success-4: #a1d695;
    success-5: #6cc258;
    success-6: #47ac29;
    success-7: #2f9600;
    success-8: #257c00;
    success-9: #1d6800;
    success-10: #175600;
    success-11: #104200;
    success-12: #072c00;
    success-13: #021200;
    error-1: #fdf5f3;
    error-2: #fee7e4;
    error-3: #f9d6d0;
    error-4: #f5b2a7;
    error-5: #f78273;
    error-6: #f45344;
    error-7: #dd362a;
    error-8: #ba251c;
    error-9: #9b221a;
    error-10: #801e16;
    error-11: #631610;
    error-12: #420e09;
    error-13: #1e0302;
}

Colors replacement

Beyond the implementation process, it might be important to document which color of the current palette has an equivalent version in the new one.

Below you can find the corresponding version all brand and UI colors referred in the tailwind config file and the viewer.

Brand

Current		New
Yellow	#FFE033	Yellow 3	#FDE034
Pink	#C52B9B	Pink 8	#AD1F85
Dark Charcoal	#30272E	Gray 12	#232323

Dark charcoal shades

Current		New
Dark Charcoal 6	#F3F2F2	Gray 1	#F7F7F7
Dark Charcoal 10	#EAE9EA	Gray 2	#EDEDED
Dark Charcoal 20	#D6D4D5	Gray 3	#DFDFDF
Dark Charcoal 30	#C1BEC0	Gray 4	#C5C5C5
Dark Charcoal 40	#ACA9AB	Gray 5	#A9A9A9
Dark Charcoal 50	#989397	Gray 6	#929292
Dark Charcoal 60	#837D82	Gray 7	#7E7E7E
Dark Charcoal 70	#6E686D	Gray 8	#676767
		Gray 9	#565656
Dark Charcoal 80	#595258	Gray 10	#474747
Dark Charcoal 90	#453D43	Gray 11	#363636
Dark Charcoal	#30272E	Gray 12	#232323
		Gray 13	#0D0D0D

Dark charcoal opacities

Current	New
Dark Charcoal 10%	Gray 12 10%
Dark Charcoal 20%	Gray 12 20%
Dark Charcoal 30%	Gray 12 30%
Dark Charcoal 40%	Gray 12 40%
Dark Charcoal 50%	Gray 12 50%
Dark Charcoal 60%	Gray 12 60%
Dark Charcoal 70%	Gray 12 70%
Dark Charcoal 80%	Gray 12 80%
Dark Charcoal 90%	Gray 12 90%

Notifications

Current	New
Info	Info 8
Info soft	Info 2
Warning	Warning 8
Warning soft	Warning 2
Success	Success 8
Success soft	Success 2
Error	Error 8
Error soft	Error 2

[zackkrida]

@fcoveram I was expecting that we were switching to semantic names for all of the colors, so yellow would become complementary and things like that, as you implied in this graphic:

Is that still the plan?

Also, I am not completely sure what the Current and New columns mean in this issue. Are, as part of dark mode, the old light mode colors changing slightly, and this issue is outlining those changes?

Edit: I suppose this issue is just introducing all new colors. The missing piece we need is to add semantic names to show which color becomes which in light mode. For example, I think it might be like this:

Semantic Name	Light Mode color	Dark Mode Color
Complementary	Yellow	Pink 8 (New)
Primary	Pink	Yellow 3 (New)

Could you add that information to this issue, @fcoveram?

[fcoveram]

Is that still the plan? …I am not completely sure what the Current and New columns mean in this issue. Are, as part of dark mode, the old light mode colors changing slightly, and this issue is outlining those changes?

Sorry! The semantic name is still the plan. I revisited the initial comment, and certainly, I did not explain myself correctly. Sorry for the confusion.

---

In the Design Library, there are two variable collections related to this project: Colors and Alias. Here is what it’s visible in the edit mode but not in dev.

Colors	Alias

The tables above show the new hex code of current colors, but not the new ones added for this project. Therefore, it's only about the “Colors” variable collection.

…The missing piece we need is to add semantic names to show which color becomes which in light mode… Could you add that information to this issue, @fcoveram?

I assumed we would address it once starting the implementation as Figma’s dev mode doesn’t have a view for variables. That’s why I shared two links describing (hopefully) how to integrate the variables with code work on the implementation plan PR.

The Alias list is not very long, but I envision there are smarter ways of integrating what’s there with the code work. Nonetheless, I can create another ticket for the Alias and the semantic use of colors.

[fcoveram]

I modified the initial comment by including all colors of the new system @zackkrida. I also linked the tool used for the color set that might be useful for the code work.

Let me know if that works. I will create a new ticket for the color semantics.