Color System
The color foundation of Bolt, based on Pega’s branding.
Brand Colors
Show shades
Navy, xdark
#091734
var(--bolt-color-navy-xdark)
Text size
Aa
Aa
White (17.74)
pass
pass
Black (1.18)
fail
fail
Navy, dark
#081c45
var(--bolt-color-navy-dark)
Text size
Aa
Aa
White (16.64)
pass
pass
Black (1.26)
fail
fail
Navy
#001f5f
var(--bolt-color-navy)
Text size
Aa
Aa
White (15.43)
pass
pass
Black (1.36)
fail
fail
Navy, light
#3e67bb
var(--bolt-color-navy-light)
Text size
Aa
Aa
White (5.44)
pass
pass
Black (3.86)
pass
fail
Navy, xlight
#abc2f2
var(--bolt-color-navy-xlight)
Text size
Aa
Aa
White (1.79)
fail
fail
Black (11.73)
pass
pass
Teal, xdark
#005154
var(--bolt-color-teal-xdark)
Text size
Aa
Aa
White (9.11)
pass
pass
Black (2.3)
fail
fail
Teal, dark
#0a6266
var(--bolt-color-teal-dark)
Text size
Aa
Aa
White (7.11)
pass
pass
Black (2.95)
fail
fail
Teal
#10a5ac
var(--bolt-color-teal)
Text size
Aa
Aa
White (3)
pass
fail
Black (7)
pass
pass
Teal, light
#86cac6
var(--bolt-color-teal-light)
Text size
Aa
Aa
White (1.86)
fail
fail
Black (11.28)
pass
pass
Teal, xlight
#b7e4e6
var(--bolt-color-teal-xlight)
Text size
Aa
Aa
White (1.38)
fail
fail
Black (15.25)
pass
pass
Orange, dark
#c74200
var(--bolt-color-orange-dark)
Text size
Aa
Aa
White (4.99)
pass
pass
Black (4.21)
pass
fail
Orange
#f76923
var(--bolt-color-orange)
Text size
Aa
Aa
White (3)
pass
fail
Black (7)
pass
pass
Orange, light
#ff9866
var(--bolt-color-orange-light)
Text size
Aa
Aa
White (2.11)
fail
fail
Black (9.94)
pass
pass
Yellow, dark
#e8af17
var(--bolt-color-yellow-dark)
Text size
Aa
Aa
White (1.99)
fail
fail
Black (10.58)
pass
pass
Yellow
#ffc836
var(--bolt-color-yellow)
Text size
Aa
Aa
White (1.55)
fail
fail
Black (13.57)
pass
pass
Yellow, light
#ffe399
var(--bolt-color-yellow-light)
Text size
Aa
Aa
White (1.26)
fail
fail
Black (16.7)
pass
pass
Wine
#661d34
var(--bolt-color-wine)
Text size
Aa
Aa
White (11.73)
pass
pass
Black (1.79)
fail
fail
Pink
#e63690
var(--bolt-color-pink)
Text size
Aa
Aa
White (3.97)
pass
fail
Black (5.29)
pass
pass
Berry
#ac1361
var(--bolt-color-berry)
Text size
Aa
Aa
White (6.95)
pass
pass
Black (3.02)
pass
fail
Violet
#5f67b9
var(--bolt-color-violet)
Text size
Aa
Aa
White (5.09)
pass
pass
Black (4.13)
pass
fail
Gray, xdark
#2e2e33
var(--bolt-color-gray-xdark)
Text size
Aa
Aa
White (13.51)
pass
pass
Black (1.55)
fail
fail
Gray, dark
#5c5d66
var(--bolt-color-gray-dark)
Text size
Aa
Aa
White (6.54)
pass
pass
Black (3.21)
pass
fail
Gray
#8d8e99
var(--bolt-color-gray)
Text size
Aa
Aa
White (3.25)
pass
fail
Black (6.46)
pass
pass
Gray, light
#e0e2eb
var(--bolt-color-gray-light)
Text size
Aa
Aa
White (1.29)
fail
fail
Black (16.25)
pass
pass
Gray, xlight
#f6f6f9
var(--bolt-color-gray-xlight)
Text size
Aa
Aa
White (1.08)
fail
fail
Black (19.47)
pass
pass
Black
#151619
var(--bolt-color-black)
Text size
Aa
Aa
White (18.09)
pass
pass
Black (1.16)
fail
fail
White
#ffffff
var(--bolt-color-white)
Text size
Aa
Aa
White (1)
fail
fail
Black (21)
pass
pass
Status Colors
Show shades
Info, dark
#004880
var(--bolt-color-info-dark)
Text size
Aa
Aa
White (9.38)
pass
pass
Black (2.24)
fail
fail
Info
#0076d1
var(--bolt-color-info)
Text size
Aa
Aa
White (4.65)
pass
pass
Black (4.51)
pass
pass
Info, light
#d6edff
var(--bolt-color-info-light)
Text size
Aa
Aa
White (1.21)
fail
fail
Black (17.42)
pass
pass
Success, dark
#256940
var(--bolt-color-success-dark)
Text size
Aa
Aa
White (6.62)
pass
pass
Black (3.17)
pass
fail
Success
#357e38
var(--bolt-color-success)
Text size
Aa
Aa
White (5.01)
pass
pass
Black (4.19)
pass
fail
Success, light
#dbf0dc
var(--bolt-color-success-light)
Text size
Aa
Aa
White (1.2)
fail
fail
Black (17.51)
pass
pass
Error, dark
#9d2315
var(--bolt-color-error-dark)
Text size
Aa
Aa
White (7.82)
pass
pass
Black (2.68)
fail
fail
Error
#b42818
var(--bolt-color-error)
Text size
Aa
Aa
White (6.45)
pass
pass
Black (3.26)
pass
fail
Error, light
#fad5d1
var(--bolt-color-error-light)
Text size
Aa
Aa
White (1.35)
fail
fail
Black (15.5)
pass
pass
Warning, dark
#cfb317
var(--bolt-color-warning-dark)
Text size
Aa
Aa
White (2.08)
fail
fail
Black (10.11)
pass
pass
Warning
#e8cd30
var(--bolt-color-warning)
Text size
Aa
Aa
White (1.59)
fail
fail
Black (13.21)
pass
pass
Warning, light
#faf4d1
var(--bolt-color-warning-light)
Text size
Aa
Aa
White (1.11)
fail
fail
Black (18.93)
pass
pass