Design Systems with React & Storybook Color Semantics
Transcript from the "Color Semantics" Lesson
>> This is my favorite section. We're gonna talk about the psychology of colors for a second here, so whether we realize this or not, a color of our products actually can elicit emotional responses from our users. So red is typically associated with fire, violence, war, love and passion, and It can actually raise your users blood pressure subconsciously.
[00:00:23] So really try to use this sparingly throughout your application. Orange as vibrant and energetic typically it can be associated with like earth, autumn change and movement, this is a really great color to use throughout your UIs. Yellows associated with happiness and sunshine but can also be associated with cowardice, or deceit.
[00:00:49] So just make sure you're picking a nice shade of yellow if you're gonna use that throughout your UI. Green represents new beginnings and growth, it can signify renewal, abundance, or can even represent like envy or jealousy, and it has many calming effects. It's pretty similar to blue, but it has the vibrancy of a yellow, so green is a great choice.
[00:01:13] You might actually see this with a lot of financial applications. Blue can represent sadness or calmness, but also represents trust and reliability and responsibility. And this is why you'll see a lot of social media applications using blue like Twitter and Facebook because, they're basically asking for all of your personal data and they wanna give you that subconscious sense that it's safe with them.
[00:01:35] So that's why a lot of them choose blue. Purple's fun, I would love to create an application using purple. It typically is associated with luxury and royalty like the royal family for example, but it is a little bit quirkier. Black has long been associated with power and elegance and formality, again, it can signify evil, death, and mystery, so just be aware of that.
[00:02:03] And on the other side, we've got white. So white indicates purity, cleanliness, virtue, and goodness, it's often used for a lot of modern designs. Gray can indicate moodiness or depression but in general I would say gray is now more of a formal and modern design for our UIs.
[00:02:22] And then last we've got brown, brown is a little boring sometimes, it can indicate dependability, reliability. So if you're gonna use brown just make sure it fits with your brand identity, if you're gonna use any color make sure it exhibits your brand identity. So if you're building a financial application like a banking site, maybe don't use red.
[00:02:38] We don't wanna raise our our clients blood pressure while they're trying to transfer money.