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 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 is a vibrant and energetic color, typically associated with earth and autumn. Orange can represent change and movement as well as creativity.


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 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 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 is the color of luxury, royalty, and wealth.


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


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


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


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