New color families: Magenta and Teal

[aweell]

New color families: Magenta and Teal

📈 Data visualization

Effectively using color means your graphs communicate your data. With the addition of the new color families, we want to provide a broader range to create semantic color associations and avoid the ones that are meant to represent danger and success scenarios (red and green families) when not needed.

📌 Labeling data

When working with complex data labeling is not an easy task. A color addition in the neutral space can help to keep the semantic design system color families usage to certain scenarios.

Magenta

Name	Value (hex)	Value (hsl)
color-magenta-50	#fff5fc	(315, 96%, 98%)
color-magenta-100	#ffe5f9	(315, 96%, 95%)
color-magenta-200	#fdb4eb	(315, 96%, 85%)
color-magenta-300	#fc82de	(315, 96%, 75%)
color-magenta-400	#fb50d1	(315, 96%, 65%)
color-magenta-500	#e105aa	(315, 96%, 45%)
color-magenta-600	#c80497	(315, 96%, 40%)
color-magenta-700	#960371	(315, 96%, 30%)
color-magenta-800	#64024c	(315, 96%, 20%)
color-magenta-900	#320126	(315, 96%, 10%)

Teal

Name	Value (hex)	Value (hsl)
color-teal-50	#f6fefe	(180, 74%, 98%)
color-teal-100	#d3f8f8	(180, 74%, 90%)
color-teal-200	#bcf5f5	(180, 74%, 85%)
color-teal-300	#7aebeb	(180, 74%, 70%)
color-teal-400	#4ee4e4	(180, 74%, 60%)
color-teal-500	#1ec8c8	(180, 74%, 45%)
color-teal-600	#1bb1b1	(180, 74%, 40%)
color-teal-700	#179898	(180, 74%, 34%)
color-teal-800	#116f6f	(180, 74%, 25%)
color-teal-900	#0a4343	(180, 74%, 15%)

Feedback

• Do you think the addition of these two color families will be useful for the products you're building?
• Are other color families you think are interesting to add to Halstack design system?

Please share any thoughts about our color system and help us improve it!! 😀

[joaorbp]

Shouldn't the colors be related to the DXC branding color palette?

For example the official teal color of DXC are:

Bright Teal = #00968F
Dark Teal = #006975

None of these colors seems to be reference on your teal palette.

For reference, the official DXC branding colors: