Color

Description

I used a palette of teal, burgundy, and gold. They are colors that complement each other well and give off a cozy and friendly vibe. Teal is the primary color used for buttons, active links, buttons, borders, and sub-headings. Burgundy is the secondary color used for the logo text, secondary buttons, borders, and sub-headings. Gold is the tertiary color used for borders and sub-headings. The light versions of each are used for backgrounds, along with gray. Gray is also used for muted borders. Black is used for text, and white is used as the minimalist background color. Care is taken to use the colors in a way that allows for appropriate contrast to optimize accessibility.

Palette

dark blue color chip
  • primary-dark-blue
  • The primary color for primary buttons, sub-headings, borders, and links.

#22798F

accent blue color chip
  • primary-accent-blue
  • The color for the hover background of the primary buttons and the color of links on hover.

#5ABFD8

light blue color chip
  • primary-light-blue
  • The blue color used for some jumbotron background sections and for the hover background color of cards and special buttons (footer and design system).

#E2F5FA

dark red color chip
  • secondary-dark-red
  • The red color used for secondary buttons, sub-headings, borders, and the logo text.

#750C30

accent red color chip
  • secondary-accent-red
  • The color for the hover background of the secondary buttons.

#DE004D

light red color chip
  • secondary-light-red
  • The red color used for some jumbotron background sections and for the hover background color of cards and special buttons (footer).

#FBEAF0

dark yellow color chip
  • tertiary-dark-yellow
  • The yellow color used for sub-headings and borders.

#847D2E

accent yellow color chip
  • tertiary-accent-yellow
  • The yellow color used for extra styling.

#DFDAA3

Light yellow color chip
  • tertiary-light-yellow
  • The yellow color used for some jumbotron background sections and for the hover background color of cards.

#F8F7EC

white color chip
  • white
  • The default color for all page backgrounds. It is also the text color for the primary and secondary buttons.

#FFFFFF

gray color chip
  • gray
  • The default muted text color. It also the color of the footer and muted borders.

#E6E6E6

black color chip
  • black
  • The default text color.

#000000

© Melissa Boyce | Updated November 2020

email me check out my linkedin