Introduction to Design Systems

Color semantics

The colors we choose for our color palettes can have implications on the semantics of our applications.

Let's take a look at the semantics of colors.

Red

Red is typically associated with fire, violence, war, love, and passion. Red can have a physical effect on users, actually raising their blood pressure and respiration rates as it can instill a sense of anger or danger. Thus, red should be used sparingly throughout your application.

Orange

Orange is a vibrant and energetic color, typically associated with earth and autumn. Orange can represent change and movement as well as creativity.

Yellow

Yellow is associated with happiness and sunshine, yet it can also be associated with deceit and cowardice. Yellow designs typically instill a sense of happiness and cheer.

Green

Green represents new beginnings and growth. It can signify renewal and abundance, or it can represent envy, jealousy or lack of experience. Green has many calming effects, similar to blue, but incorporates some of the energy of yellow.

Blue

Blue can represent sadness or calmness, responsibility, reliability, and peace. You'll typically see social applications like Facebook and Twitter leverage blue as it subconsciously promotes trust within their users.

Purple

Purple is the color of luxury, royalty, and wealth.

Black

Black has long been associated with power, elegance and formality, but can also instill a sense of evil, death and mystery.

White

White is associated with purity, cleanliness, virtue and is typically seen used for healthcare websites. White can also represent goodness and angels.

Gray

Gray typically represents moodiness and depression yet can also be used for more conservative, formal, or modern applications.

Brown

Brown is used to create a sense of dependability, reliability, and earthiness but can also be a bit dull in application design.