Colors
Overview
The BigDesign color system has five palette types named semantically for their use across the application. The color system is derived from the BigCommerce brand and provides a consistent user experience for our merchants and partners.
BigDesign uses color tokens to manage colors within each palette and are named for their role or hierarchy in the palette. Color tokens improve communication between design and development and establish an organized use of color in the BigCommerce application.
Accent
Accent colors are used for interactions or to denote an interaction has taken place. Common accent uses include buttons, icons, navigation, links and selections. Use accent colors sparingly to avoid confusion.
primary40 / primary
#3C64F4
AA
primary10
#F0F3FF
AAA
primary20
#DBE3FE
AAA
primary30
#9EB3FC
AAA
primary50
#2852EB
AA
primary60
#0B38D9
AAA
primary70
#0024A6
AAA
Type
Type colors are used for text, iconography, and foreground elements in BigDesign interfaces.
secondary70
#313440
AAA
secondary60
#5E637A
AA
secondary50
#8C93AD
A
A
white
#FFFFFF
AAA
Fills and strokes
Fills and strokes are used as the building blocks of BigDesign interfaces. They are used in combination to create layering of backgrounds, panels, overlays and hierarchical UI elements.
white
#FFFFFF
AAA
secondary10
#F6F7FC
AAA
secondary20
#ECEEF5
AA
secondary30
#D9DCE9
A
secondary40 / secondary
#B4BAD1
A
Status
Status colors are reserved to indicate a system status such as errors, success or warnings. These colors should be used sparingly and only for imformative purposes.
success40 / success
#2AAB3F
AA
success10
#EEFCF0
AAA
success20
#D3F5D9
AAA
success30
#88D895
AAA
success50
#208831
AA
success60
#146622
AAA
success70
#004D0D
AAA
danger40 / danger
#DB3643
AA
danger10
#FFF0F1
AAA
danger20
#FEDBDE
AAA
danger30
#FC9EA6
AAA
danger50
#CC1F1F
AA
danger60
#AD0000
AAA
danger70
#80000B
AAA
warning40 / warning
#FFBF00
AA
warning10
#FFF9E6
AAA
warning20
#FFF0BF
AAA
warning30
#FFE180
AAA
warning50
#FFAE00
AA
warning60
#E58F17
AAA
warning70
#CC720A
A
A
Additional colors
Additional colors exist in the BigDesign color palette for edge cases and BigCommerce branding.