[STYLE] Decide color palette for the website about defaang HOT 31 OPEN

@yaa-chi thank you! Looks really cool.

Any chance you could put the dark mode one in the same format as Option 4 from above so we can get a better idea about what it might look like?

Thanksss!! 🤩🏹And yes, I'm currently designing a demo for you guys to check it out as well!

from defaang.

I think 4 is pretty good for light mode 👍🏻.

from defaang.

looks good https://www.figma.com/file/BMHpagkuDfPNskxak5gQqA/Brand-Guide?node-id=0%3A1

from defaang.

@ykdojo Have a look at a little demo I just designed. Had to do it this morning.

And everyone as well, do let me know what you think🙌🏾🎯

https://www.figma.com/file/BMHpagkuDfPNskxak5gQqA/Brand-Guide?node-id=0%3A1

from defaang.

4 looks pretty good for lightmode. I don't want to be the only one making the decision though - maybe we can wait for other people to pitch in their opinions.

For dark mode, I'm not sure yet...

from defaang.

I think we should probably keep looking for something better for dark mode.

from defaang.

@Preet-Sojitra thanks a bunch for the colors! They look amazing. And yes I do love 4 for the light mode. Because it also has elements of dark mode within it. I'll send a link to show you guys what I mean😉

from defaang.

@yaa-chi I like it!

I'm wondering if you could make the contract slightly higher though? Maybe with a slightly brighter color on the text.

I'm thinking of situations like older screens, less bright screens, people looking at it on their phone in a bright room, etc.

Thanksss! 🤩

Sure, absolutely will wok on the contrast asap!

from defaang.

The color palettes could be added to theme.colors in tailwind.config.js since tailwind is being used for the UI

from defaang.

Here's a link to the color palette chosen for light mode and a re-arrangement for dark mode. I'll design a simple here section to show you how it will look in action.

the link: https://www.figma.com/file/BMHpagkuDfPNskxak5gQqA/Brand-Guide?node-id=0%3A1

from defaang.

@yaa-chi I like it!

I'm wondering if you could make the contract slightly higher though? Maybe with a slightly brighter color on the text.

I'm thinking of situations like older screens, less bright screens, people looking at it on their phone in a bright room, etc.

from defaang.

Awesome, I'm gonna implement those color schemes asap!

from defaang.

How will this palette be preserved, after the issue / PR is closed? Should a DESIGN.md or similar be created to house it & related information?

from defaang.

For light mode, I'll recommend 2,4, 5
I think dark mode, is just inverting the light mode. So depending on the choice of light mode, we can decide on the darkmode theme.

from defaang.

@yaa-chi thank you! Looks really cool.

Any chance you could put the dark mode one in the same format as Option 4 from above so we can get a better idea about what it might look like?

from defaang.

It's looking good 😍

from defaang.

Thank youuu @Preet-Sojitra 😍... This particular dark mode color palette was gotten from the one that everyone loved. The light mode that you suggested!

from defaang.

I'm looking at Tailwind's website, for example

from defaang.

we could either extend the default color palette or completely relpace it with the new one. I think extending the default then slowly applying the colors to the UI is better. What are your thoughts on this?

from defaang.

I think it might be helpful if you could suggest a few different options both for light and dark themes?

We have a little bit of that discussion started already here: #14 (comment)

from defaang.

Well these are some of the palettes generated by Huemint.
Light theme color palette:

1. https://huemint.com/website-magazine/#palette=fffdf9-fe845a-091a38-3c4f9a
2. https://huemint.com/website-magazine/#palette=fefefe-f8d799-18160d-d8252c
3. https://huemint.com/website-magazine/#palette=e9e7e0-fcb77c-0c100f-8d4fb3
4. https://huemint.com/website-magazine/#palette=fffffd-77bbdb-081430-44a2d2
5. https://huemint.com/website-magazine/#palette=fffcf7-fec4a1-211824-477df6
6. https://huemint.com/website-magazine/#palette=8fca42-fbfeff-152432-c34caa
7. https://huemint.com/website-magazine/#palette=f8fcfa-ecbb94-0e0629-6f3d48
8. https://huemint.com/website-2/#palette=cec586-1d385a-bd2229-342b11

Dark theme color palette:

1. https://huemint.com/website-2/#palette=2a2c2a-d3cdd1-eb9166-38bbce
2. https://huemint.com/website-2/#palette=090605-dcd4d4-c34a00-2896c6
3. https://huemint.com/website-2/#palette=062a43-edc346-dc6541-52b1c6
4. https://huemint.com/website-2/#palette=16232b-4dd3b2-c1a333-727343
5. https://huemint.com/website-2/#palette=1b1b2d-53f191-de595b-d2a55f

from defaang.

Any 2-3 of them that you'd recommend?

from defaang.

For light mode, I would recommend 4,5 and 6

And for Dark mode I would recommend
1 and 2

from defaang.

I would recommend doing some more searches for dark mode as most of the people might use dark mode only from all of the above I think 1st one for the dark mode is best compared to all of them but we should try to find something better for the dark mode.

from defaang.

I recommend 4 for light mode and 1 for dark mode. Because there is more relativity between those two Modes.

from defaang.

Hi @ykdojo I have updated the color contrast. Do let me know what you think so that we can proceed asap🤩

You can use this link: https://www.figma.com/file/BMHpagkuDfPNskxak5gQqA/Brand-Guide?node-id=0%3A1

from defaang.

Hmm maybe even more contrast... what do you think of using white text?

from defaang.

@ykdojo yeahhh, they used white color for the text and grey for the subtitles and message plus the navigation bar. Do you want that/

from defaang.

Yes! I think something like that would work well for better readability. I'm starting to notice that GitHub has the same type of color scheme too - white for the main text and grey for other things.

from defaang.

Hi @ykdojo can I add the already selected color palettes to the tailwind.config.js

from defaang.

@olamide203 yes that'll be great. Would it correctly change the colors in the Tailwind UI components?

from defaang.