Create stories for brand colors

[maany]

Description

Create components for brand colors using the color palette. Name the colors appropriately

• Color Palette 1
• Color Palette 2

Generate shades for the selected colors youtube

Motivation

No response

Change

No response

Additional Information

• [ ] The API needs to be changed.

[maany]

Resources for picking shades ( in case you find it helpful @piszczke

1. https://m2.material.io/inline-tools/color/
2. https://m3.material.io/styles/color/choosing-a-scheme
3. https://zenoo.github.io/mui-theme-creator/#Alert

[maany]

@piszczke Some helpful tips on making the components accessible ( for tasks after the color palette) https://www.youtube.com/watch?v=1A6SrPwmGpg&ab_channel=WebDevSimplified

Also, I have, so far, mostly used React Hooks, but using @preact/signals might save us the painful passing of states from parent components to child components. Worth taking a look as well https://www.youtube.com/watch?v=SO8lBVWF2Y8&ab_channel=WebDevSimplified

[maany]

Some resources on building Design Systems that inspired me a bit: https://www.youtube.com/watch?v=Dtd40cHQQlk&list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A&index=12&ab_channel=Figma

[piszczke]

Color palate for metropolis

Set of colors for UI Palate is based on https://huemint.com/brand-3/#palette=0d286c-ffffff-ef6974-7489d0

:::info If not displayed correctly go to: https://hackmd.io/@piszczke/ryMPuyBVp :::

Brand color - Primary color

RGB:#3354a4 HSV(HSL)(218, 68%, 31%)

Shade	value in RGB	value in HSL	Sample
50	#e7eaf3	(218, 28%, 95%)
100	#c2cae3	(218, 26%, 82%)
200	#9aa8d0	(218, 26%, 66%)
300	#7387bd	(218, 26%, 50%)
400	#546db0	(218, 30%, 41%)
500	#3354a4	(218, 68%, 31%)
600	#2c4c9a	(218, 61%, 30%)
700	#23428e	(218, 57%, 28%)
800	#1b3982	(218, 54%, 25%)
900	#0d286c	(218, 78%, 24%)

Secondary color

Shade	value in RGB	value in HSL	Sample
50	#ffdab5	(30, 100%, 84%)
100	#ffb79b	(20, 100%, 78%)
200	#ed9279	(17, 76%, 65%)
300	#cb6f53	(14, 59%, 49%)
400	#b25338	(15, 59%, 40%)
500	#98371e	(18, 68%, 31%)
600	#8c2d19	(11, 68%, 27%)
700	#7b2011	(9, 75%, 23%)
800	#6c0d0d	(0, 70%, 21%)
900	#5b0001	(359, 100%, 19%)

Supporting colors

Success

Shade	value in RGB	value in HSL	Sample
50	#ecf9e6	(114, 63%, 92%)
100	#d0efc1	(108, 47%, 83%)
200	#b1e598	(101, 62%, 77%)
300	#8fda6c	(92, 60%, 63%)
400	#72d148	(93, 60%, 49%)
500	#53c91b	(96, 79%, 31%)
600	#42b912	(99, 81%, 27%)
700	#24a402	(101, 98%, 14%)
800	#009000	(120, 100%, 18%)
900	#006e00	(117, 100%, 14%)

Critical

Shade	value in RGB	Value in HSL	Sample
50	#f6e6e8	(351, 25%, 92%)
100	#e9c1c4	(358, 38%, 80%)
200	#ca8886	(353, 40%, 65%)
300	#b25c5a	(4, 44%, 52%)
400	#b33c37	(2, 53%, 42%)
500	#af291d	(4, 71%, 36%)
600	#a3211c	(5, 69%, 34%)
700	#931918	(5, 70%, 29%)
800	#861412	(6, 73%, 25%)
900	#760c08	(7, 81%, 20%)

Warning

Shade	value in RGB	Value in HSL	Sample
50	#f9f5e0	(48, 70%, 93%)
100	#f0e6b1	(48, 66%, 80%)
200	#e6d580	(48, 59%, 69%)
300	#dec74f	(48, 65%, 58%)
400	#d9ba2d	(47, 70%, 50%)
500	#d4af18	(46, 78%, 43%)
600	#d4a30f	(45, 81%, 40%)
700	#d49206	(44, 92%, 38%)
800	#d38300	(42, 100%, 35%)
900	#d26700	(33, 100%, 33%)

Info/ neutral

Shade	value in RGB	Value in HSL	Sample
50	#e1f4fa	(195, 80%, 90%)
100	#b2e2f3	(196, 63%, 81%)
200	#82ceeb	(197, 69%, 72%)
300	#56bbe3	(198, 71%, 63%)
400	#39adde	(198, 74%, 57%)
500	#249fd9	(199, 77%, 52%)
600	#1e92cb	(201, 80%, 47%)
700	#1780b8	(205, 82%, 42%)
800	#156fa5	(208, 83%, 40%)
900	#0c5083	(209, 87%, 30%)

White

Shade	value in RGB	Value in HSL	Sample
50	#ffffff	(0, 0%, 100%)
100	#fafafa	(0, 0%, 98%)
200	#f5f5f5	(0, 0%, 96%)
300	#f0f0f0	(0, 0%, 94%)
400	#dedede	(0, 0%, 87%)
500	#c2c2c2	(0, 0%, 76%)
600	#979797	(0, 0%, 59%)
700	#818181	(0, 0%, 51%)
800	#606060	(0, 0%, 38%)
900	#3c3c3c	(0, 0%, 24%)

[piszczke]

I'm not super convinced about it.. especially for Secondary color

[maany]

Noted! Thanks for the research into it Michal :)