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)   #d7e2f2
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)   #b63800
Orange var(--bolt-color-orange)   #f76923
Orange, light var(--bolt-color-orange-light)   #ff931e
Yellow
CSS custom property Value
Yellow, dark var(--bolt-color-yellow-dark)   #e7a832
Yellow var(--bolt-color-yellow)   #ffc836
Yellow, light var(--bolt-color-yellow-light)   #ffdf8e
Wine
CSS custom property Value
Wine var(--bolt-color-wine)   #661d34
Pink
CSS custom property Value
Pink var(--bolt-color-pink)   #eb3987
Berry
CSS custom property Value
Berry var(--bolt-color-berry)   #ac1361
Violet
CSS custom property Value
Violet var(--bolt-color-violet)   #5f67b9
Sapphire
CSS custom property Value
Sapphire var(--bolt-color-sapphire)   #344a9b
Bright-purple
CSS custom property Value
Bright-purple var(--bolt-color-bright-purple)   #828cff
Genai
CSS custom property Value
Genai var(--bolt-color-GenAI)   #681fc3
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