Overview

Each set of colors has its own set of utility classes that modify background color, font color, and border color. You can reference the available utility classes below:

Modus Bootstrap Palette

Primary Color
#0063a3
.bg-primary.text-primary.border-primary
Secondary Color
#6a6e79
.bg-secondary.text-secondary.border-secondary
Tertiary Color
#cbcdd6
.bg-tertiary.text-tertiary.border-tertiary
Dark Color
#252a2e
.bg-dark.text-dark.border-dark

Primary Palette

Trimble Blue Dark
#004f83
.bg-trimble-blue-dark.text-trimble-blue-dark.border-trimble-blue-dark
Trimble Blue
#0063a3
.bg-trimble-blue.text-trimble-blue.border-trimble-blue
Trimble Yellow
#fbad26
.bg-trimble-yellow.text-trimble-yellow.border-trimble-yellow
Trimble Gray
#252A2E
.bg-trimble-gray.text-trimble-gray.border-trimble-gray

Blue Progression

Blue Dark
#0e416c
Blue
#0063a3
.bg-primary.text-primary.border-primary
Blue Light
#217cbb
.bg-active
Blue Pale
#dcedf9
.bg-selected

Neutral Progression

Various shades of gray for utility.

Black
#000000
.bg-black.text-black.border-black
Trimble Gray
#252A2E
.bg-trimble-gray.text-trimble-gray.border-trimble-gray
Gray 10
#171C1E
.bg-gray-10.text-gray-10.border-gray-10
Gray 9
#353A40
.bg-gray-9.text-gray-9.border-gray-9
Gray 8
#464B52
.bg-gray-8.text-gray-8.border-gray-8
Gray 7
#585C65
.bg-gray-7.text-gray-7.border-gray-7
Gray 6
#6A6E79
.bg-gray-6.text-gray-6.border-gray-6
Gray 5
#7d808d
.bg-gray-5.text-gray-5.border-gray-5
Gray 4
#90939F
.bg-gray-4.text-gray-4.border-gray-4
Gray 3
#a3a6b1
.bg-gray-3.text-gray-3.border-gray-3
Gray 2
#b7b9c3
.bg-gray-2.text-gray-2.border-gray-2
Gray 1
#cbcdd6
.bg-gray-1.text-gray-1.border-gray-1
Gray 0
#e0e1e9
.bg-gray-0.text-gray-0.border-gray-0
Gray Light
#F1F1F6
.bg-gray-light.text-gray-light.border-gray-light
White
#ffffff
.bg-white.text-white.border-white

Yellow Progression

Warning Color
#e49325
.bg-warning.text-warning.border-warning
Yellow
#fbad26
.bg-trimble-yellow.text-trimble-yellow.border-trimble-yellow
Yellow Light
#fec157
Yellow Pale
#fff5e4

Red Progression

Red Dark
#ab1f26
Danger Color
#da212c
.bg-danger.text-danger.border-danger
Red Light
#e86363
Red Pale
#fbd4d7

Green Progression

Success Color
#006638
.bg-success.text-success.border-success
Green
#1e8a44
Green Light
#4ea646
Green Pale
#e0eccf