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

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

Info

	CSS custom property	Value
Info, dark	var(--bolt-color-info-dark)	#004880
Info	var(--bolt-color-info)	#0076d1
Info, light	var(--bolt-color-info-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

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.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Black

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-black class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Gray-xlight

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-gray-xlight class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Navy-dark

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-dark class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Navy

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Navy-light

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-light class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Teal

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-teal class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Yellow

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-yellow class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Orange

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-orange class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Pink

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-pink class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Wine

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-wine class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Berry

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-berry class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

Violet

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-violet class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
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

Background Gradient

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

Info

Class name	CSS value
.u-bolt-color-info-dark	#004880
.u-bolt-color-info	#0076d1
.u-bolt-color-info-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

Spacing System

The spacing foundation of Bolt.

Horizontal

xxsmall: 0.2015rem

xsmall: 0.3875rem

small: 0.775rem

medium: 1.55rem

large: 3.1rem

xlarge: 6.2rem

xxlarge: 12.4rem

xxxlarge: 24.8rem

Vertical

xxsmall: 0.1755rem

xsmall: 0.3375rem

small: 0.675rem

medium: 1.35rem

large: 2.7rem

xlarge: 5.4rem

xxlarge: 10.8rem

xxxlarge: 21.6rem

Spacing Tokens

Design tokens for Bolt’s spacing system, available as CSS custom properties.

Horizontal

	CSS custom property	Value in rem	Value in px (at 1400px viewport)*
xxsmall	var(--bolt-spacing-x-xxsmall)	0.2015rem	3px scales from 3px to 4px
xsmall	var(--bolt-spacing-x-xsmall)	0.3875rem	6px scales from 6px to 7px
small	var(--bolt-spacing-x-small)	0.775rem	12px scales from 11px to 13px
medium	var(--bolt-spacing-x-medium)	1.55rem	24px scales from 22px to 25px
large	var(--bolt-spacing-x-large)	3.1rem	47px scales from 44px to 50px
xlarge	var(--bolt-spacing-x-xlarge)	6.2rem	93px scales from 87px to 100px
xxlarge	var(--bolt-spacing-x-xxlarge)	12.4rem	186px scales from 174px to 199px
xxxlarge	var(--bolt-spacing-x-xxxlarge)	24.8rem	372px scales from 348px to 397px

Vertical

	CSS custom property	Value in rem	Value in px (at 1400px viewport)*
xxsmall	var(--bolt-spacing-y-xxsmall)	0.1755rem	3px scales from 3px to 3px
xsmall	var(--bolt-spacing-y-xsmall)	0.3375rem	6px scales from 5px to 6px
small	var(--bolt-spacing-y-small)	0.675rem	11px scales from 10px to 11px
medium	var(--bolt-spacing-y-medium)	1.35rem	21px scales from 19px to 22px
large	var(--bolt-spacing-y-large)	2.7rem	41px scales from 38px to 44px
xlarge	var(--bolt-spacing-y-xlarge)	5.4rem	81px scales from 76px to 87px
xxlarge	var(--bolt-spacing-y-xxlarge)	10.8rem	162px scales from 152px to 173px
xxxlarge	var(--bolt-spacing-y-xxxlarge)	21.6rem	324px scales from 303px to 346px

Spacing Utilities

Utility classes based on Bolt’s spacing system.

Margin

All directions

Class name	CSS value
.u-bolt-margin-auto	margin: auto
.u-bolt-margin-none	margin: 0
.u-bolt-margin-xxsmall	margin: 0.2015rem 0.1755rem
.u-bolt-margin-xsmall	margin: 0.3875rem 0.3375rem
.u-bolt-margin-small	margin: 0.775rem 0.675rem
.u-bolt-margin-medium	margin: 1.55rem 1.35rem
.u-bolt-margin-large	margin: 3.1rem 2.7rem
.u-bolt-margin-xlarge	margin: 6.2rem 5.4rem
.u-bolt-margin-xxlarge	margin: 12.4rem 10.8rem
.u-bolt-margin-xxxlarge	margin: 24.8rem 21.6rem

Top

Class name	CSS value
.u-bolt-margin-top-auto	margin-top: auto
.u-bolt-margin-top-none	margin-top: 0
.u-bolt-margin-top-xxsmall	margin-top: 0.1755rem
.u-bolt-margin-top-xsmall	margin-top: 0.3375rem
.u-bolt-margin-top-small	margin-top: 0.675rem
.u-bolt-margin-top-medium	margin-top: 1.35rem
.u-bolt-margin-top-large	margin-top: 2.7rem
.u-bolt-margin-top-xlarge	margin-top: 5.4rem
.u-bolt-margin-top-xxlarge	margin-top: 10.8rem
.u-bolt-margin-top-xxxlarge	margin-top: 21.6rem

Right

Class name	CSS value
.u-bolt-margin-right-auto	margin-right: auto
.u-bolt-margin-right-none	margin-right: 0
.u-bolt-margin-right-xxsmall	margin-right: 0.2015rem
.u-bolt-margin-right-xsmall	margin-right: 0.3875rem
.u-bolt-margin-right-small	margin-right: 0.775rem
.u-bolt-margin-right-medium	margin-right: 1.55rem
.u-bolt-margin-right-large	margin-right: 3.1rem
.u-bolt-margin-right-xlarge	margin-right: 6.2rem
.u-bolt-margin-right-xxlarge	margin-right: 12.4rem
.u-bolt-margin-right-xxxlarge	margin-right: 24.8rem

Bottom

Class name	CSS value
.u-bolt-margin-bottom-auto	margin-bottom: auto
.u-bolt-margin-bottom-none	margin-bottom: 0
.u-bolt-margin-bottom-xxsmall	margin-bottom: 0.1755rem
.u-bolt-margin-bottom-xsmall	margin-bottom: 0.3375rem
.u-bolt-margin-bottom-small	margin-bottom: 0.675rem
.u-bolt-margin-bottom-medium	margin-bottom: 1.35rem
.u-bolt-margin-bottom-large	margin-bottom: 2.7rem
.u-bolt-margin-bottom-xlarge	margin-bottom: 5.4rem
.u-bolt-margin-bottom-xxlarge	margin-bottom: 10.8rem
.u-bolt-margin-bottom-xxxlarge	margin-bottom: 21.6rem

Left

Class name	CSS value
.u-bolt-margin-left-auto	margin-left: auto
.u-bolt-margin-left-none	margin-left: 0
.u-bolt-margin-left-xxsmall	margin-left: 0.2015rem
.u-bolt-margin-left-xsmall	margin-left: 0.3875rem
.u-bolt-margin-left-small	margin-left: 0.775rem
.u-bolt-margin-left-medium	margin-left: 1.55rem
.u-bolt-margin-left-large	margin-left: 3.1rem
.u-bolt-margin-left-xlarge	margin-left: 6.2rem
.u-bolt-margin-left-xxlarge	margin-left: 12.4rem
.u-bolt-margin-left-xxxlarge	margin-left: 24.8rem

Padding

All directions

Class name	CSS value
.u-bolt-padding-none	padding: 0
.u-bolt-padding-xxsmall	padding: 0.2015rem 0.1755rem
.u-bolt-padding-xsmall	padding: 0.3875rem 0.3375rem
.u-bolt-padding-small	padding: 0.775rem 0.675rem
.u-bolt-padding-medium	padding: 1.55rem 1.35rem
.u-bolt-padding-large	padding: 3.1rem 2.7rem
.u-bolt-padding-xlarge	padding: 6.2rem 5.4rem
.u-bolt-padding-xxlarge	padding: 12.4rem 10.8rem
.u-bolt-padding-xxxlarge	padding: 24.8rem 21.6rem

Top

Class name	CSS value
.u-bolt-padding-top-none	padding-top: 0
.u-bolt-padding-top-xxsmall	padding-top: 0.1755rem
.u-bolt-padding-top-xsmall	padding-top: 0.3375rem
.u-bolt-padding-top-small	padding-top: 0.675rem
.u-bolt-padding-top-medium	padding-top: 1.35rem
.u-bolt-padding-top-large	padding-top: 2.7rem
.u-bolt-padding-top-xlarge	padding-top: 5.4rem
.u-bolt-padding-top-xxlarge	padding-top: 10.8rem
.u-bolt-padding-top-xxxlarge	padding-top: 21.6rem

Right

Class name	CSS value
.u-bolt-padding-right-none	padding-right: 0
.u-bolt-padding-right-xxsmall	padding-right: 0.2015rem
.u-bolt-padding-right-xsmall	padding-right: 0.3875rem
.u-bolt-padding-right-small	padding-right: 0.775rem
.u-bolt-padding-right-medium	padding-right: 1.55rem
.u-bolt-padding-right-large	padding-right: 3.1rem
.u-bolt-padding-right-xlarge	padding-right: 6.2rem
.u-bolt-padding-right-xxlarge	padding-right: 12.4rem
.u-bolt-padding-right-xxxlarge	padding-right: 24.8rem

Bottom

Class name	CSS value
.u-bolt-padding-bottom-none	padding-bottom: 0
.u-bolt-padding-bottom-xxsmall	padding-bottom: 0.1755rem
.u-bolt-padding-bottom-xsmall	padding-bottom: 0.3375rem
.u-bolt-padding-bottom-small	padding-bottom: 0.675rem
.u-bolt-padding-bottom-medium	padding-bottom: 1.35rem
.u-bolt-padding-bottom-large	padding-bottom: 2.7rem
.u-bolt-padding-bottom-xlarge	padding-bottom: 5.4rem
.u-bolt-padding-bottom-xxlarge	padding-bottom: 10.8rem
.u-bolt-padding-bottom-xxxlarge	padding-bottom: 21.6rem

Left

Class name	CSS value
.u-bolt-padding-left-none	padding-left: 0
.u-bolt-padding-left-xxsmall	padding-left: 0.2015rem
.u-bolt-padding-left-xsmall	padding-left: 0.3875rem
.u-bolt-padding-left-small	padding-left: 0.775rem
.u-bolt-padding-left-medium	padding-left: 1.55rem
.u-bolt-padding-left-large	padding-left: 3.1rem
.u-bolt-padding-left-xlarge	padding-left: 6.2rem
.u-bolt-padding-left-xxlarge	padding-left: 12.4rem
.u-bolt-padding-left-xxxlarge	padding-left: 24.8rem

Typography System

The typographic foundation of Bolt.

Fonts

Body: Open Sans

Characters

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*

Headline: Open Sans

Characters

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*

Lora: Lora

Characters

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*

Code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace*

Characters

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.*

Styles

Light
Light Italic
Regular
Regular Italic
Semi-Bold
Semi-Bold Italic
Bold
Bold Italic
Extra Bold
Extra Bold Italic

Size Scales

Headline

largedisplay: Every second he kept glancing at the clock.*
display: Every second he kept glancing at the clock.*
xxxlarge: Every second he kept glancing at the clock.*
xxlarge: Every second he kept glancing at the clock.*
xlarge: Every second he kept glancing at the clock.
large: Every second he kept glancing at the clock.
medium: Every second he kept glancing at the clock.
regular: Every second he kept glancing at the clock.
small: Every second he kept glancing at the clock.
xsmall: Every second he kept glancing at the clock.
tiny: Every second he kept glancing at the clock.

*largedisplay, display, xxxlarge, and xxlarge sizes should only be used for display text (hero headline).

Subheadline

xlarge: Every second he kept glancing at the clock.
large: Every second he kept glancing at the clock.
medium: Every second he kept glancing at the clock.

Body

regular: Every second he kept glancing at the clock.
small: Every second he kept glancing at the clock.
xsmall: Every second he kept glancing at the clock.

Eyebrow

xsmall: Every second he kept glancing at the clock.

Pairings

Common Pairings

Article Title

This is a xxxlarge headline

This is a xlarge subheadline

Page Title

This is a small headline

This is a xxxlarge headline

This is a xxlarge subheadline

Teaser

This is an eyebrow

This is a xxxlarge headline

This is a xxlarge subheadline

This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. Etiam at risus et justo dignissim congue. Donec congue lacinia.

Mini Teaser

This is an eyebrow

This is a xlarge headline

Inline Mix

Inline xxlarge subheadline

& xxlarge headline

Typography Tokens

Design tokens for Bolt’s typography system, available as CSS custom properties.

Font-family

	CSS custom property	Value
body	var(--bolt-type-font-family-body)	Open Sans
headline	var(--bolt-type-font-family-headline)	Open Sans
lora	var(--bolt-type-font-family-lora)	Lora
code	var(--bolt-type-font-family-code)	'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
fallback	var(--bolt-type-font-family-fallback)	-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif

Font-size

	CSS custom property	Value in rem	Value in px (at 1400px viewport)*
largedisplay	var(--bolt-type-font-size-largedisplay)	4.5rem	68px scales from 63px to 72px
display	var(--bolt-type-font-size-display)	3.75rem	57px scales from 53px to 60px
xxxlarge	var(--bolt-type-font-size-xxxlarge)	3rem	45px scales from 42px to 48px
xxlarge	var(--bolt-type-font-size-xxlarge)	2.35rem	36px scales from 33px to 38px
xlarge	var(--bolt-type-font-size-xlarge)	1.75rem	27px scales from 25px to 28px
large	var(--bolt-type-font-size-large)	1.4rem	21px scales from 20px to 23px
medium	var(--bolt-type-font-size-medium)	1.15rem	18px scales from 17px to 19px
regular	var(--bolt-type-font-size-regular)	1rem	15px scales from 14px to 16px
small	var(--bolt-type-font-size-small)	0.9rem	14px scales from 13px to 15px
xsmall	var(--bolt-type-font-size-xsmall)	0.8rem	12px scales from 12px to 13px
tiny	var(--bolt-type-font-size-tiny)	0.7rem	11px scales from 10px to 12px

Font-weight

	CSS custom property	Value
light	var(--bolt-type-font-weight-light)	300
regular	var(--bolt-type-font-weight-regular)	400
semibold	var(--bolt-type-font-weight-semibold)	600
bold	var(--bolt-type-font-weight-bold)	700
extrabold	var(--bolt-type-font-weight-extrabold)	800

Line-height

	CSS custom property	Value
largedisplay	var(--bolt-type-line-height-largedisplay)	1.27
display	var(--bolt-type-line-height-display)	1.25
xxxlarge	var(--bolt-type-line-height-xxxlarge)	1.25
xxlarge	var(--bolt-type-line-height-xxlarge)	1.25
xlarge	var(--bolt-type-line-height-xlarge)	1.3
large	var(--bolt-type-line-height-large)	1.4
medium	var(--bolt-type-line-height-medium)	1.5
regular	var(--bolt-type-line-height-regular)	1.55
small	var(--bolt-type-line-height-small)	1.45
xsmall	var(--bolt-type-line-height-xsmall)	1.4
tiny	var(--bolt-type-line-height-tiny)	1.4

Letter-spacing

	CSS custom property	Value in rem	Value in px
narrow	var(--bolt-type-font-weight-narrow)	-0.025rem	-0.375px scales from -0.35px to -0.4px
regular	var(--bolt-type-font-weight-regular)	0	0px scales from 0px to 0px
wide	var(--bolt-type-font-weight-wide)	0.05rem	0.75px scales from 0.7001px to 0.8px

Breakpoint System

The responsive breakpoint foundation of Bolt.

Overview

xxsmall:
320px
xsmall:
400px
small:
600px
medium:
800px
large:
1000px
xlarge:
1200px
xxlarge:
1400px
xxxlarge:
1600px
xxxxlarge:
1920px

iPhone Portrait: 320px
Galaxy Nexus Portrait: 360px
iPhone 6 Portrait: 375px
iPhone 6 Plus Portrait: 414px
Galaxy Note 3 Portrait: 540px
iPhone Landscape: 568px
Google Nexus 7 Portrait: 604px
Galaxy Nexus Landscape: 640px
iPhone 6 Landscape: 667px
iPhone 6 Plus Landscape: 738px
iPad Portrait: 768px
Galaxy Note 3 Landscape: 960px
Google Nexus 7 Landscape: 966px
iPad Landscape: 1024px
11" MacBook Air: 1366px
13" MacBook Air: 1440px
21.5" iMac: 1980px

SCSS mixin

.c-component-name {
  // Setting a min (mobile first)
  @include bolt-mq(xsmall) {
    background-color: red;
  }

  // Setting a max (desktop first)
  @include bolt-mq($until: xsmall) {
    background-color: blue;
  }

  // Setting a range (adaptive)
  @include bolt-mq($from: medium, $until: xlarge) {
    background-color: yellow;
  }

  // Setting orientation or other media queries
  @include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
    background-color: green;
  }
}

Information Density System

Various spacing and typography configurations based on information density.

	Data attribute*	Note	Demo
Comfortable	data-bolt-info-density="comfortable"	The comfortable density increases font-size and spacing.	View
Regular	data-bolt-info-density="regular"	The default density.	View
Compact	data-bolt-info-density="compact"	The compact density decreases font-size and spacing.	View

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "comfortable".

Robotic Automation

Comfortable Information Density

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Whitepaper

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Get the report

Item 1 with a long line of text
Item 2 with a long line of text
Item 3 with a long line of text
Item 4 with a long line of text
Item 5 with a long line of text
Item 6 with a long line of text

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

Call to action

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

Call to action

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Call to action

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "regular". Data attribute is not needed.

Robotic Automation

Regular Information Density

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Whitepaper

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Get the report

Item 1 with a long line of text
Item 2 with a long line of text
Item 3 with a long line of text
Item 4 with a long line of text
Item 5 with a long line of text
Item 6 with a long line of text

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

Call to action

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

Call to action

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Call to action

A page’s information density can be changed by setting the data-bolt-info-density attribute on the <html> element. Information density is controlled by the spacing and typography systems. The following layout is set to "compact".

Robotic Automation

Compact Information Density

Robotic Process Automation (RPA) is not going to transform your business by itself. Up to half of initial RPA projects fail. Combine robotics with powerful end-to-end automation and you can jump on the RPA bandwagon without becoming a statistic.

Engage with empathy & adapt instantly

Triage volume, take out cost

Build apps fast, automate anything

Automation is a Journey

At Pega, we’re obsessed with being unified. Our mobility, real-time AI, robotic automation, BPM, and case management are best in breed – go ask the analysts. But we didn’t cobble this together from pieces of dead companies – we built it from the ground up on a unified, enterprise-ready architecture.

When you don’t have to waste time feeding the Frankenstack, you can focus on stuff that matters: designing awesome customer experiences. Automating your most complicated processes. Innovating in ways that disrupt the market.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur.

Whitepaper

Anthem: Service Desktop

Anthem debuts its next-generation service desktop, driving frictionless customer experiences.

Get the report

Item 1 with a long line of text
Item 2 with a long line of text
Item 3 with a long line of text
Item 4 with a long line of text
Item 5 with a long line of text
Item 6 with a long line of text

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

Call to action

In Pellentesque

Class Aptent Taciti Sociosqu Ad

Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget.

Call to action

Proin Quis Tortor

Sed Auctor Neque Eu Tellus

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.

Call to action

Background Gradient Utility Class

Add a background gradient to any container element (layout, teaser, div, etc.) by adding the u-bolt-bg-gradient utility class to it.

Important Notes:

The color of the gradient applied by .u-bolt-bg-gradient will change depending on the theme.

It is recommended (but not required) to add a theme class (t-bolt-*) to the same element as u-bolt-bg-gradient.

All themes are supported, and an example is shown in the documentation for each theme. A few representative examples are below.

Gradient backgrounds only work on container elements. Do not use this class on an element like a button.

Demo

Navy Theme

This is a container with the .u-bolt-bg-gradient class and .t-bolt-navy theme class.

Teal Theme

This is a container with the .u-bolt-bg-gradient class and .t-bolt-teal theme class.

Yellow Theme

This is a container with the .u-bolt-bg-gradient class and .t-bolt-yellow theme class.

Twig

{% set layout_item %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: '<p>This is a layout item with a gradient background.</p>',
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  attributes: {
    class: [
      'u-bolt-bg-gradient',
      'u-bolt-padding-medium',
      't-bolt-navy',
    ],
  },
  content: layout_item,
} only %}

HTML

<bolt-layout class="u-bolt-bg-gradient u-bolt-padding-medium t-bolt-navy">
  <bolt-layout-item>
    This is a layout item with a gradient background.
  </bolt-layout-item>
</bolt-layout>

Gradient Focal Points

You can optionally add a modifier class in the form u-bolt-bg-gradient--focus-[vertical]-[horizontal] to change the gradient focal point.

Demo