color system

Color System The color foundation of Bolt, based on Pegasystem branding. Brand Colors
  • 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
  • Blue, dark
    #004880
  • var(--bolt-color-blue-dark)
  • Text size
    Aa
    Aa
  • White (9.38)
    pass
    pass
  • Black (2.24)
    fail
    fail
  • Blue
    #0076d1
  • var(--bolt-color-blue)
  • Text size
    Aa
    Aa
  • White (4.65)
    pass
    pass
  • Black (4.51)
    pass
    pass
  • Blue, light
    #d6edff
  • var(--bolt-color-blue-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

color tokens

Color Tokens Design tokens for Bolt’s color system, available as CSS custom properties. Brand Colors Navy
CSS custom property Value
Navy, xdark var(--bolt-color-navy-xdark)   #091734
Navy, dark var(--bolt-color-navy-dark)   #081c45
Navy var(--bolt-color-navy)   #001f5f
Navy, light var(--bolt-color-navy-light)   #3e67bb
Navy, xlight var(--bolt-color-navy-xlight)   #abc2f2
Teal
CSS custom property Value
Teal, xdark var(--bolt-color-teal-xdark)   #005154
Teal, dark var(--bolt-color-teal-dark)   #0a6266
Teal var(--bolt-color-teal)   #10a5ac
Teal, light var(--bolt-color-teal-light)   #86cac6
Teal, xlight var(--bolt-color-teal-xlight)   #b7e4e6
Orange
CSS custom property Value
Orange, dark var(--bolt-color-orange-dark)   #c74200
Orange var(--bolt-color-orange)   #f76923
Orange, light var(--bolt-color-orange-light)   #ff9866
Yellow
CSS custom property Value
Yellow, dark var(--bolt-color-yellow-dark)   #e8af17
Yellow var(--bolt-color-yellow)   #ffc836
Yellow, light var(--bolt-color-yellow-light)   #ffe399
Wine
CSS custom property Value
Wine var(--bolt-color-wine)   #661d34
Pink
CSS custom property Value
Pink var(--bolt-color-pink)   #e63690
Berry
CSS custom property Value
Berry var(--bolt-color-berry)   #ac1361
Violet
CSS custom property Value
Violet var(--bolt-color-violet)   #5f67b9
Gray
CSS custom property Value
Gray, xdark var(--bolt-color-gray-xdark)   #2e2e33
Gray, dark var(--bolt-color-gray-dark)   #5c5d66
Gray var(--bolt-color-gray)   #8d8e99
Gray, light var(--bolt-color-gray-light)   #e0e2eb
Gray, xlight var(--bolt-color-gray-xlight)   #f6f6f9
Black
CSS custom property Value
Black var(--bolt-color-black)   #151619
White
CSS custom property Value
White var(--bolt-color-white)   #ffffff
Status Colors Blue
CSS custom property Value
Blue, dark var(--bolt-color-blue-dark)   #004880
Blue var(--bolt-color-blue)   #0076d1
Blue, light var(--bolt-color-blue-light)   #d6edff
Success
CSS custom property Value
Success, dark var(--bolt-color-success-dark)   #256940
Success var(--bolt-color-success)   #357e38
Success, light var(--bolt-color-success-light)   #dbf0dc
Error
CSS custom property Value
Error, dark var(--bolt-color-error-dark)   #9d2315
Error var(--bolt-color-error)   #b42818
Error, light var(--bolt-color-error-light)   #fad5d1
Warning
CSS custom property Value
Warning, dark var(--bolt-color-warning-dark)   #cfb317
Warning var(--bolt-color-warning)   #e8cd30
Warning, light var(--bolt-color-warning-light)   #faf4d1

theming system

Theming System The color theming foundation of Bolt. Xlight

Theme Color Tokens

Scss function Value
Text var(--m-bolt-text)   black
Background var(--m-bolt-bg)   white
Primary var(--m-bolt-primary)   navy, light
Text on Primary var(--m-bolt-text-on-primary)   white
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   gray, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   navy
Link Text var(--m-bolt-link)   navy, light
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   navy
Border var(--m-bolt-border)   gray, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary Tertiary
Light

Theme Color Tokens

Scss function Value
Text var(--m-bolt-text)   black
Background var(--m-bolt-bg)   gray, xlight
Primary var(--m-bolt-primary)   navy, light
Text on Primary var(--m-bolt-text-on-primary)   white
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   gray, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   navy
Link Text var(--m-bolt-link)   navy, light
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   navy
Border var(--m-bolt-border)   gray, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary Tertiary
Dark

Theme Color Tokens

Scss function Value
Text var(--m-bolt-text)   white
Background var(--m-bolt-bg)   navy
Primary var(--m-bolt-primary)   yellow
Text on Primary var(--m-bolt-text-on-primary)   black
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   white, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   white
Link Text var(--m-bolt-link)   white
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   white
Border var(--m-bolt-border)   white, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary Tertiary
Xdark

Theme Color Tokens

Scss function Value
Text var(--m-bolt-text)   white
Background var(--m-bolt-bg)   navy, dark
Primary var(--m-bolt-primary)   yellow
Text on Primary var(--m-bolt-text-on-primary)   black
Secondary var(--m-bolt-secondary)   white
Text on Secondary var(--m-bolt-text-on-secondary)   navy
Tertiary var(--m-bolt-tertiary)   white, 15%
Text on Tertiary var(--m-bolt-text-on-tertiary)   white
Link Text var(--m-bolt-link)   white
Disabled var(--m-bolt-text-on-disabled)   gray
Text on Disabled var(--m-bolt-disabled)   gray, light
Headline Text var(--m-bolt-headline)   white
Border var(--m-bolt-border)   white, 15%
Neutral var(--m-bolt-neutral)   gray

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body text link

Border

Button

Primary Secondary Tertiary

text color utilities

Text Color Utilities Utility classes based on Bolt’s color system. Brand Colors Navy
Class name CSS value
.u-bolt-color-navy-xdark   #091734
.u-bolt-color-navy-dark   #081c45
.u-bolt-color-navy   #001f5f
.u-bolt-color-navy-light   #3e67bb
.u-bolt-color-navy-xlight   #abc2f2
Teal
Class name CSS value
.u-bolt-color-teal-xdark   #005154
.u-bolt-color-teal-dark   #0a6266
.u-bolt-color-teal   #10a5ac
.u-bolt-color-teal-light   #86cac6
.u-bolt-color-teal-xlight   #b7e4e6
Orange
Class name CSS value
.u-bolt-color-orange-dark   #c74200
.u-bolt-color-orange   #f76923
.u-bolt-color-orange-light   #ff9866
Yellow
Class name CSS value
.u-bolt-color-yellow-dark   #e8af17
.u-bolt-color-yellow   #ffc836
.u-bolt-color-yellow-light   #ffe399
Wine
Class name CSS value
.u-bolt-color-wine   #661d34
Pink
Class name CSS value
.u-bolt-color-pink   #e63690
Berry
Class name CSS value
.u-bolt-color-berry   #ac1361
Violet
Class name CSS value
.u-bolt-color-violet   #5f67b9
Gray
Class name CSS value
.u-bolt-color-gray-xdark   #2e2e33
.u-bolt-color-gray-dark   #5c5d66
.u-bolt-color-gray   #8d8e99
.u-bolt-color-gray-light   #e0e2eb
.u-bolt-color-gray-xlight   #f6f6f9
Black
Class name CSS value
.u-bolt-color-black   #151619
White
Class name CSS value
.u-bolt-color-white   #ffffff
Status Colors Blue
Class name CSS value
.u-bolt-color-blue-dark   #004880
.u-bolt-color-blue   #0076d1
.u-bolt-color-blue-light   #d6edff
Success
Class name CSS value
.u-bolt-color-success-dark   #256940
.u-bolt-color-success   #357e38
.u-bolt-color-success-light   #dbf0dc
Error
Class name CSS value
.u-bolt-color-error-dark   #9d2315
.u-bolt-color-error   #b42818
.u-bolt-color-error-light   #fad5d1
Warning
Class name CSS value
.u-bolt-color-warning-dark   #cfb317
.u-bolt-color-warning   #e8cd30
.u-bolt-color-warning-light   #faf4d1