Excellent work sir every thing about colors is clear now sir it is requested to you please make a video create a website design project from scratch and using 8pts grid system all from start thank u🎉
Thanks for sharing, when using these color styles for an extensive project is there a way to ensure the color usage is uniform or i just have to remember the styles used in previous pages ?
Thank you so much! A noobish question here: What changes between these different systems (Atlassian, Material)? What would I have to do to generate a Fluent-based colour scheme?
Hello, am Design. Thank you for creating the detailed video. I have a question regarding the necessity of incorporating success, danger, and warning colors. Are these colors essential even if they are not used in the app or web interface?
No, but its highly unlikely that they won't be used. Most success/error stuff will be built on top of it, any alters, any error text, any success/danger buttons etc.
Hello, thanks for the information.I also want to use gradient colors in my design. Is there a plugin to add it to the palette in this way or should I add it manually?
This was extremely helpful - and the plugin is such a timesaver. Thanks again! Which primary color would you choose if the corporate design color is similar to the red error color?
Not all colours may be used or needed, but it’s ideal to have a full range of each colour for when a use case might arise. Even for the neutrals having a full range gives you a set of colours to use for common ui elements such as text, borders, inputs, backgrounds to name a few. Further to that, if say you want to create an illustration, you’ll have a range of colours to draw from giving you more consistency in your brand across various user touch points
Hi there! Thanks for the video. What if one of your Brand Colors is Black? I have a site where the Primary is Black + Secondary is Red...very close to warning red (and there are 2 tertiary colors, Aqua and Yellow). Every design system tutorial seems to only allow for 1 primary and 1 secondary with no thought to brand colors that may be considered Neutral, nor close to Warning Red. Can you give your 2c on how to deal with this? Do I leave "Black" out of neutrals? The Warning color we use is Bootstrap so I am set there, I suppose. I really need some insights! :) THANK YOU!
I would definitely create black as primary, because if the client decides to change that in the future, I'd be able to. Red can be used as well, but would prefer to dull down the saturation a bit so its not too shocking. The problem with brand colors being close to error/warning reds is that you can't differentiate errors then, which is why most people would avoid it, and even if they use it, they'll go with something like AirBnB or Invision etc.
@@Bontelucci Yes, the reason for that is clients can ask you to make suggestions etc, and having various different states for the Black baed on the hover states or active states etc would also be easier, rather than just follow the traditional flow for neutrals.
Thanks for the great content! How would one save an opacity image overlay as a style? For example, product images that need an opacity overlay on top… How would we save this as a style for reuse? Thank you!
This is just a basic color creation which is mostly for newbies, there are lot other things you might need to include like combination of foreground and background. I would say to check all those matching scenarios.
Thank you for creating this video! I have some questions I wanted to ask... 1) what if your primary/brand color was green wouldn't the success color clash with the primary color? I was also studying some design system work from another designer for design systems and he recommended to stick with 1 brand color and have 5 different variations. Its easier to do with having a monochromatic scheme but for people that prefer multiple colors its harder to do because you have many colors all happening at once and would that create more cognitive overload ? 2) Is there a reason why you used Atlassian and not other profiles?
It may clash, but usually there are differences. No one (for the most part), would suggest use a substitute color for success or danger. No matter what app you're creating, and what brand colors you have, if you have a call feature lets say, and you want to add two buttons, for picking up a call and rejecting it, the buttons for the most part would be green and red. Whatsapp is an example of their, their primary brand color is green, but they'll still use the green for success. And sticking with 1 brand color is fine too, and if you want to go with something monochromatic, having shades of your primary can work. You don't need a secondary brand color to use all the time.
@@AMDesignAndDev Wow thanks so much Asaad for the quick reply! Do you recommend to stick with one primary color and one neutral color for buttons or is it good design wise to also have a secondary color (less important)? For example green would be the primary CTA but the less important button could be a pale blue (secondary color)? I ended up choosing Material Design palette because it gave me more choices to choose for my color swatches :)
@@fernwehtwl Ideally I'd say, stick with only one color for the buttons. So just use primary. The primary button can be solid. The secondary can be outlined. The tertiary can have a link color that's primary with no background or outline.
@@AMDesignAndDev thank u that’s what I was thinking too ! I saw some designers have more than one color of button choice and I got a bit confused with what the design rule should be
Can I ask a question, Are there any rule or formula for general colors palette? The FE guy in my team ask if there any formula for that. Because Im using tool to general the colors just like this video
I don't understand the reason why there's different profile such as Atlassian, Orbit and Ant Design.... I'm curious why one profile could potentially be better than other, I am only familiar with Material.
Then you can just use the same method to create multiple ones with different names. Though usually you just have one Primary and Secondary color, and then you can add tertiary or others, and accents maybe.
@@stephencarroll312 I think there were 7 shades there, but even if you had 8, you can have two variants: 1. One with a solid danger button. 2. The other with a outlined danger button. Each button would have a different hover and active state, and the background would be different based on that.
biggest question is - why so many colours ? when do we use those different shades you created ? every one is talking about generating various colours , but when to use what is a topic to discuss .. thanks
Im wondering why when I generate the palette the WAG codes are also produced too. How can I get them not to be generated with the color swatches? Im wondering if there is a setting I can disable. Does anyone know?
Please clear my confusion. Is it possible to edit Design System styles (colours or effects ) directly from another file when both files belong to the same team?
Learnt a great lot from this👏🏾 But why do you say “obviously” so much in your presentation though. It kind of isn’t so great trying to learn and you keep making it seem you’re stating an obvious thing to you, when your viewers are here to learn the not so obvious. It would be great if you could try work on that cuz you have helpful content that new learners like me are benefiting from😊
Apologies Mardiya, I'll try to control that. Though I think I've reduced that to quite an extent in my newer videos. I truly appreciate you pointing this out.
Thanks for asking, ideally you probably need only 3-4, I mentioned that in my video that we're going to generate them, as we may need specific shades, and then we can remove them if they are not being used in the project. I can tell you what different shades may be used for. Imagine a warning button. The solid variation of it may use w400, and text white. The hover for the solid may use w500. Now imagine having an outlined variation for the same warning button. The border may be: w400 Background: white text-color: w300/w400 On hover: border: w500 background: w50 text-color: w500 etc So we may need 3-4 shades, but yes, as you pointed out, we may honestly not need all of these shades, and may just be able to work with 3-4.
That would be unlikely, as the color usually cones from the brand guidelines of a client or project. If you want someone to tell you which colors to use and why, a video on color theory or brand guidelines would be better.
Wt are you teaching? There is no sense, you start by trying to just change hue and suddenly start changing every value just because it doesn’t look right. Isnt there any guidelines
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
I start the morning from your videos. Thank you for your endeavor and great work!
your tutorials are to the point, highly actionable and easy to follow along with. I'm a happy viewer, thank you so much!
Really the best video on color design imo, watched tons of videos but found this one really practical and helpful. Thanks!
one of the most usefful videos on design system on FIGMA. Thanks brother,
I love all these plugins for Figma, it really makes life easier. Also, thank u for the great video! Very helpful and beginer friendly. :)
I love this God bless you😳❤
Really love your channel , you are making my life way easier ❤🎉
Excellent work sir every thing about colors is clear now sir it is requested to you please make a video create a website design project from scratch and using 8pts grid system all from start thank u🎉
This is awesome, I am glad I found your yt, absolutely amazing! thank you
Next level tutorials! Love it
Awesome video. Keep them coming!
This video is gold, thanks for share
thank you so muchf for this video, it helped me a lot!
you gained a new subscriber :)
Thanks so much Jab :D
awesome video , thanks for the insights
You are my hero, thank you^^
This is best video for color designing system
Thanks for sharing, when using these color styles for an extensive project is there a way to ensure the color usage is uniform or i just have to remember the styles used in previous pages ?
muchas gracias por el contenido del video, muy bueno!!, saludos desde Perú
Thank you so much :) Glad you liked it.
This is exactly what I was looking for today! Thank you very much. Please share more =)
Thank you so much! A noobish question here: What changes between these different systems (Atlassian, Material)? What would I have to do to generate a Fluent-based colour scheme?
Just having issues on how to remove the plugin name
Do you have a video including the color rules when creating a design system for a project?
Resourceful🥰🥰
Me :thinking I have all the plugins
Le AM Designs : hold my redbull bro🔥
Hahahahahha
Hello, am Design. Thank you for creating the detailed video. I have a question regarding the necessity of incorporating success, danger, and warning colors. Are these colors essential even if they are not used in the app or web interface?
No, but its highly unlikely that they won't be used.
Most success/error stuff will be built on top of it, any alters, any error text, any success/danger buttons etc.
Hello, thanks for the information.I also want to use gradient colors in my design. Is there a plugin to add it to the palette in this way or should I add it manually?
I would say manually.
This was extremely helpful - and the plugin is such a timesaver. Thanks again! Which primary color would you choose if the corporate design color is similar to the red error color?
Make that the primary, but I'd choose a different shade that's not too in the user's face.
Sorry for the late reply.
This is really helpful 💞
clean and clear
For the colour system, can you make something for dark and light mode. Linkage and even accesssiblity. Thanks
what next after you link? how do I build out the css using this tutorial exactly?
Thank you for sharing. Sir
Hi can you explain the usage of primary secondary and accent colors in basic web design ( colors to use in nav bar,tabs,buttons )
Why do we need so many tints? Can you elaborate on how they can be used while designing the UI?
hovering over a button for example needs to be a little darker or lighter, can’t remember.
Not all colours may be used or needed, but it’s ideal to have a full range of each colour for when a use case might arise. Even for the neutrals having a full range gives you a set of colours to use for common ui elements such as text, borders, inputs, backgrounds to name a few.
Further to that, if say you want to create an illustration, you’ll have a range of colours to draw from giving you more consistency in your brand across various user touch points
Thank you so much! 🥰
Hi there! Thanks for the video. What if one of your Brand Colors is Black? I have a site where the Primary is Black + Secondary is Red...very close to warning red (and there are 2 tertiary colors, Aqua and Yellow). Every design system tutorial seems to only allow for 1 primary and 1 secondary with no thought to brand colors that may be considered Neutral, nor close to Warning Red. Can you give your 2c on how to deal with this? Do I leave "Black" out of neutrals? The Warning color we use is Bootstrap so I am set there, I suppose. I really need some insights! :) THANK YOU!
I would definitely create black as primary, because if the client decides to change that in the future, I'd be able to.
Red can be used as well, but would prefer to dull down the saturation a bit so its not too shocking.
The problem with brand colors being close to error/warning reds is that you can't differentiate errors then, which is why most people would avoid it, and even if they use it, they'll go with something like AirBnB or Invision etc.
@@AMDesignAndDev Thank you for the response! And so fast! So, don't include Black as a Neutral, just as a Primary?
@@Bontelucci Yes, the reason for that is clients can ask you to make suggestions etc, and having various different states for the Black baed on the hover states or active states etc would also be easier, rather than just follow the traditional flow for neutrals.
Thanks for the great content! How would one save an opacity image overlay as a style? For example, product images that need an opacity overlay on top… How would we save this as a style for reuse? Thank you!
Probably not, we can save it as a component.
This is just a basic color creation which is mostly for newbies, there are lot other things you might need to include like combination of foreground and background. I would say to check all those matching scenarios.
I'm not sure if I understand what you mean by combination of foreground and background. Can you explain more?
fantastic
Thank you for creating this video! I have some questions I wanted to ask...
1) what if your primary/brand color was green wouldn't the success color clash with the primary color?
I was also studying some design system work from another designer for design systems and he recommended to stick with 1 brand color and have 5 different variations. Its easier to do with having a monochromatic scheme but for people that prefer multiple colors its harder to do because you have many colors all happening at once and would that create more cognitive overload ?
2) Is there a reason why you used Atlassian and not other profiles?
It may clash, but usually there are differences.
No one (for the most part), would suggest use a substitute color for success or danger.
No matter what app you're creating, and what brand colors you have, if you have a call feature lets say, and you want to add two buttons, for picking up a call and rejecting it, the buttons for the most part would be green and red.
Whatsapp is an example of their, their primary brand color is green, but they'll still use the green for success.
And sticking with 1 brand color is fine too, and if you want to go with something monochromatic, having shades of your primary can work.
You don't need a secondary brand color to use all the time.
@@AMDesignAndDev Wow thanks so much Asaad for the quick reply! Do you recommend to stick with one primary color and one neutral color for buttons or is it good design wise to also have a secondary color (less important)? For example green would be the primary CTA but the less important button could be a pale blue (secondary color)?
I ended up choosing Material Design palette because it gave me more choices to choose for my color swatches :)
@@fernwehtwl Ideally I'd say, stick with only one color for the buttons.
So just use primary.
The primary button can be solid.
The secondary can be outlined.
The tertiary can have a link color that's primary with no background or outline.
@@AMDesignAndDev thank u that’s what I was thinking too ! I saw some designers have more than one color of button choice and I got a bit confused with what the design rule should be
Good technique
Many many thanks... Very helpful
@AMDesignAndDev any recomends for darkmode?
Can I ask a question, Are there any rule or formula for general colors palette? The FE guy in my team ask if there any formula for that. Because Im using tool to general the colors just like this video
can I ask why we need to have many shade colors for one color?
Hello, Thank you for videos. I have a question. What if we have a red as a primary color, how do we choose the danger color? Thanks in advance!
Can we use different opacity of a color as pallets?
That was great tips
can you do more video about apply colors for UI design. Thank you!
I don't understand the reason why there's different profile such as Atlassian, Orbit and Ant Design.... I'm curious why one profile could potentially be better than other, I am only familiar with Material.
3:11 how did you change the slider by keyboard?
By scrolling on the mouse wheel
Can i use two primary colors for a single project?
Ideally No.
@@AMDesignAndDev Thank you
What if we have multiple primary or secondary color?
Then you can just use the same method to create multiple ones with different names.
Though usually you just have one Primary and Secondary color, and then you can add tertiary or others, and accents maybe.
thanks, man
Why do I need as a designer all those color shades? Where am I going to use it?
You can use the ones you use, and delete the rest.
where do we use primary and secondary colours, is it for buttons ?
Yes, these can be used for buttons, tabs, checkboxes, links, alerts, and various other things.
@@AMDesignAndDev but when to use those 8 different shades say for example red ? i mea what the purpose of 8 red shades ? thanks
@@stephencarroll312 I think there were 7 shades there, but even if you had 8, you can have two variants:
1. One with a solid danger button.
2. The other with a outlined danger button.
Each button would have a different hover and active state, and the background would be different based on that.
@@AMDesignAndDev thank you mate
biggest question is - why so many colours ? when do we use those different shades you created ? every one is talking about generating various colours , but when to use what is a topic to discuss .. thanks
I think I have already shown that when I'm creating the components for them.
Thanks very much,
Thanks bro
Im wondering why when I generate the palette the WAG codes are also produced too. How can I get them not to be generated with the color swatches? Im wondering if there is a setting I can disable. Does anyone know?
Please clear my confusion.
Is it possible to edit Design System styles (colours or effects ) directly from another file when both files belong to the same team?
Nops, you have to do it in the original file.
@@AMDesignAndDev Thanks a lot brother 😌😌😌
Learnt a great lot from this👏🏾
But why do you say “obviously” so much in your presentation though.
It kind of isn’t so great trying to learn and you keep making it seem you’re stating an obvious thing to you, when your viewers are here to learn the not so obvious. It would be great if you could try work on that cuz you have helpful content that new learners like me are benefiting from😊
Apologies Mardiya, I'll try to control that. Though I think I've reduced that to quite an extent in my newer videos.
I truly appreciate you pointing this out.
Thanks very useful, I need Design system Full class with white board
not sure why you have so many colors in your palette. 7 colors for Warning? I don't get it
Thanks for asking, ideally you probably need only 3-4, I mentioned that in my video that we're going to generate them, as we may need specific shades, and then we can remove them if they are not being used in the project.
I can tell you what different shades may be used for.
Imagine a warning button.
The solid variation of it may use w400, and text white.
The hover for the solid may use w500.
Now imagine having an outlined variation for the same warning button.
The border may be: w400
Background: white
text-color: w300/w400
On hover:
border: w500
background: w50
text-color: w500
etc
So we may need 3-4 shades, but yes, as you pointed out, we may honestly not need all of these shades, and may just be able to work with 3-4.
What is the purpose of the Neutral color, where elements will it be used? Tnx this is really helpful I'm new to UI design.
background color, text color, shadows and so on
has anybody found a tutorial that doesnt contain the advice of chose whatever you want
That would be unlikely, as the color usually cones from the brand guidelines of a client or project.
If you want someone to tell you which colors to use and why, a video on color theory or brand guidelines would be better.
Wt are you teaching? There is no sense, you start by trying to just change hue and suddenly start changing every value just because it doesn’t look right. Isnt there any guidelines
Nops, I am a complete noob, don’t waste your time with me at all.