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.

currentColor

Current value of an element’s color property. Read more

inherit

Element inherits value from parent element. Read more

transparent

Renders background behind colored item completely visible. Read more

brand

Used by BigCommerce branded assets.

#273A8A

AA

Beta