Skip to content

Visual language / Color

Color

In application design, color should be bold and meaningful. Use color to lead the user through an interface and to draw attention to the most important thing on the screen. Color is useful in creating connections between two elements.

Color palette

Blue
#006ee4
Green
#4caf50
Yellow
#fca902
Red
#f44336
Purple
#7d57c1
Teal
#00acc3
Dark gary
#222222
Base gray
#333333
Medium gray
#777777
Light gray
#e6e6e6
Lighter gray
#f2f2f2

Text color

Dark text
#222222
Base text
#444444
Light text
#777777
Muted text
#b0b0b0

Color usage

The primary color in your palette should be the most widely used across all screen and components. Make sure it’s bold, beautiful, and represents your app appropriately.

Some colors have specific meaning, like red representing an error or a dangerous action. Be cognizant of how you’re using color to represent actions in your interface.

© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.