Overview

Our framework includes 4 sets of colors:

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 Colors

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
Success Color
#006638
.bg-success .text-success .border-success
Warning Color
#e49325
.bg-warning .text-warning .border-warning
Danger Color
#da212c
.bg-danger .text-danger .border-danger

UI Colors

Main Background Color
#ffffff
.bg-main-background
Panel Background Color
#f1f1f6
.bg-panel-background
Active Color
#217cbb
.bg-active
Hover Color
#e0e1e9
.bg-hover
Selected Color
#dcedf9
.bg-selected

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

Gray Colors

Various shades of gray for utility.

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
#e2e2e7
.bg-gray-2 .text-gray-2 .border-gray-2
Gray 1
#cbcdd6
.bg-gray-1 .text-gray-1 .border-gray-1
Gray 0
#EAEAEF
.bg-gray-0 .text-gray-0 .border-gray-0
Gray Light
#F1F1F6
.bg-gray-light .text-gray-light .border-gray-light