Color Palette

The Modus palette is based on the Trimble brand colors.

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