Color

Blues

Primary blue color
Primary Blue - #06DCF5

Usage: Link colors, focused marker for buttons, and overlayed text.

Secondary blue color
Secondary Blue - #05BCE5

Usage: Emphasized text and icons.

Tertiary blue color
Tertiary Blue - #059FD5

Usage: Dark variation to compliment the primary and secondary blues.

Purples

Primary purple color
Primary Purple - #3F303B

Usage: Alternated for text or background colors. Dependent on the design of the page (dark-mode or light-mode). Used for headers, buttons, cards, and text.

Secondary purple color
Secondary Purple - #2B2126

Usage: Dark accent to compliment Primary Purple and constrast it in dark-mode.

Alternate

Alternate color magenta
Alternate Magenta - #AF0029

Usage: Convey action to the user. Hovering buttons and icons. Used for header links.

Grayscale

These colors are used to contrast the colors throughout the website. Grayscale 100 and Grayscale 900 should be used in place of black and white. #FFF and #000 are permitted when additional contrast is necessary.

Grayscale 0 color
Grayscale 0 - #FFFFFF
Grayscale 100 color
Grayscale 100 - #FDFDFD
Grayscale 300 color
Grayscale 300 - #DBDBDB
Grayscale 500 color
Grayscale 500 - #B2B2B2
Grayscale 700 color
Grayscale 700 - #747474
Grayscale 900 color
Grayscale 900 - #262626
Grayscale 1000 color
Grayscale 1000 - #000000
© Patrick Swanson
Last Updated: Spring 2023
Return to swansonux.com/HCI472