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. White

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-white class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Black

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-black class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Gray-xlight

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-gray-xlight class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy-dark

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-dark class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy-light

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-light class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Teal

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-teal class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Yellow

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-yellow class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Orange

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-orange class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Pink

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-pink class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Wine

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-wine class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Berry

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-berry class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Violet

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-violet class.
Scss function
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

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