Colors

Convey meaning through color using the color palette below.

When combining different colors, check the contrast between them using the WebAIM contrast checker tool to ensure your products are accessible for all users.

Theme colors

Application of the color palette brings a unified and recognizable consistency to FM:Systems’ digital products and interfaces.

All products' default themes include the core teal family in the primary and secondary action color schemes. Use additional colors sparingly and purposefully.

Main

Primary
#2f787f
#2f787f
Secondary
#d5e4e5
#d5e4e5

Messaging

Info
#5676b6
#5676b6
Success
#10c375
#10c375
Warning
#fbc34b
#fbc34b
Danger
#c92031
#c92031

Monochrome

White
#ffffff
rgb(255,255,255)
Light
#f8f9fa
#f8f9fa
Dark
#212529
#212529
Black
#000000
rgb(0,0,0)

Color Utilities

Using various forms of contrast is the most important consideration when making user-friendly color and interface choices. Awareness of standards and best practices is the key to accessible color selection. Each of the color families in the FM:Systems palette contains 10 values from 50—900, except for gray, white, and black. Gray colors range from 50—900.

Lighter shades are great for table rows to make the line items easier to follow horizontally when used alternating with white. Lighter shades are also great to highlight validation alerts in form inputs while retaining readability of the text entered by the user.

.bg-primary
#2f787f
#2f787f
.bg-primary-50
.bg-primary-100
.bg-primary-200
.bg-primary-300
.bg-primary-400
.bg-primary-500
.bg-primary-600
.bg-primary-700
.bg-primary-800
.bg-primary-900
.bg-gray
#adb5bd
#adb5bd
.bg-gray-50
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-info
#5676b6
#5676b6
.bg-info-50
.bg-info-100
.bg-info-200
.bg-info-300
.bg-info-400
.bg-info-500
.bg-info-600
.bg-info-700
.bg-info-800
.bg-info-900
.bg-success
#10c375
#10c375
.bg-success-50
.bg-success-100
.bg-success-200
.bg-success-300
.bg-success-400
.bg-success-500
.bg-success-600
.bg-success-700
.bg-success-800
.bg-success-900
.bg-warning
#fbc34b
#fbc34b
.bg-warning-50
.bg-warning-100
.bg-warning-200
.bg-warning-300
.bg-warning-400
.bg-warning-500
.bg-warning-600
.bg-warning-700
.bg-warning-800
.bg-warning-900
.bg-danger
#c92031
#c92031
.bg-danger-50
.bg-danger-100
.bg-danger-200
.bg-danger-300
.bg-danger-400
.bg-danger-500
.bg-danger-600
.bg-danger-700
.bg-danger-800
.bg-danger-900