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