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 bolt-theme(text)   black
Background bolt-theme(background)   white
Primary bolt-theme(primary)   navy, light
Secondary bolt-theme(secondary)   white
Link Text bolt-theme(link)   navy, light
Disabled Text bolt-theme(text-disabled)   gray
Disabled Background bolt-theme(disabled)   gray, light
Headline Text bolt-theme(headline)   navy
Headline Link bolt-theme(headline-link)   navy, light
Border bolt-theme(border, 0.2)   navy, dark, 20%
Neutral bolt-theme(neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Primary Secondary Secondary
Light

Theme Color Tokens


Scss function Value
Text bolt-theme(text)   black
Background bolt-theme(background)   gray, xlight
Primary bolt-theme(primary)   navy, light
Secondary bolt-theme(secondary)   white
Link Text bolt-theme(link)   navy, light
Disabled Text bolt-theme(text-disabled)   gray
Disabled Background bolt-theme(disabled)   gray, light
Headline Text bolt-theme(headline)   navy
Headline Link bolt-theme(headline-link)   navy, light
Border bolt-theme(border, 0.2)   navy, dark, 20%
Neutral bolt-theme(neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Primary Secondary Secondary
Dark

Theme Color Tokens


Scss function Value
Text bolt-theme(text)   white
Background bolt-theme(background)   navy
Primary bolt-theme(primary)   yellow
Secondary bolt-theme(secondary)   white
Link Text bolt-theme(link)   white
Disabled Text bolt-theme(text-disabled)   gray
Disabled Background bolt-theme(disabled)   gray, light
Headline Text bolt-theme(headline)   white
Headline Link bolt-theme(headline-link)   white
Border bolt-theme(border, 0.2)   white, 20%
Neutral bolt-theme(neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Primary Secondary Secondary
Xdark

Theme Color Tokens


Scss function Value
Text bolt-theme(text)   white
Background bolt-theme(background)   navy, dark
Primary bolt-theme(primary)   yellow
Secondary bolt-theme(secondary)   white
Link Text bolt-theme(link)   white
Disabled Text bolt-theme(text-disabled)   gray
Disabled Background bolt-theme(disabled)   gray, light
Headline Text bolt-theme(headline)   white
Headline Link bolt-theme(headline-link)   white
Border bolt-theme(border, 0.2)   white, 20%
Neutral bolt-theme(neutral)   gray

Content Type Overview


Headline

Headline Text

Text

Body text

Border


Button

Primary Secondary Secondary

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

spacing system

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

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 sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System

spacing utilities

Spacing Utilities Utility classes based on Bolt’s spacing system. Margin All directions
Class name CSS value
.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-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-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-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-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-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-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-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-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-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

Typography System The typographic foundation of Bolt. Fonts Body: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Headline: Open Sans Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace* Characters
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&<-+÷×=>®©$€£¥¢:;,.* Styles
Regular Regular Italic *Bolt prefers the system default for code text’s font-family which maximizes the readability across all platforms and browsers.
Size Scales Body Scale Text
medium: 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. Heading Scale Headline
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. small: Every second he kept glancing at the clock. xsmall: Every second he kept glancing at the clock. Subheadline
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. Eyebrow
xsmall (only option): Every second he kept glancing at the clock. *xxxlarge size should only be used for display text (hero headline).
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

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
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)*
xxxlarge var(--bolt-type-font-size-xxxlarge) 2.35rem 36px scales from 33px to 38px
xxlarge var(--bolt-type-font-size-xxlarge) 1.75rem 27px scales from 25px to 28px
xlarge var(--bolt-type-font-size-xlarge) 1.4rem 21px scales from 20px to 23px
large var(--bolt-type-font-size-large) 1.15rem 18px scales from 17px to 19px
medium var(--bolt-type-font-size-medium) 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
xxsmall var(--bolt-type-font-size-xxsmall) 0.7rem 11px scales from 10px to 12px
*Font-sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System
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) 800
Line-height
CSS custom property Value
xxxlarge var(--bolt-type-font-weight-xxxlarge) 1.25
xxlarge var(--bolt-type-font-weight-xxlarge) 1.35
xlarge var(--bolt-type-font-weight-xlarge) 1.4
large var(--bolt-type-font-weight-large) 1.5
medium var(--bolt-type-font-weight-medium) 1.55
small var(--bolt-type-font-weight-small) 1.45
xsmall var(--bolt-type-font-weight-xsmall) 1.4
xxsmall var(--bolt-type-font-weight-xxsmall) 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

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

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
*The data attribute can only be used on the <html> element of a page.

comfortable density

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.

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.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

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

Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

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

Call to action
Image alt. Image alt.

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
Image alt. Image alt.

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

regular density

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.

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.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

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

Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

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

Call to action
Image alt. Image alt.

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
Image alt. Image alt.

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

compact density

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.

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.

Image alt. Image alt.

Whitepaper

Anthem: Service Desktop

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

Get the report
Image alt. Image alt.

Lorem Ipsum

In Pellentesque Faucibus Vestibulum Nulla

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

Call to action
Image alt. Image alt.

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
Image alt.