Color plays an important role in our design system. Colors transcend language and have inherent meanings associated with them.


You will notice numbers associated with each color value in our palette. These numbers range from 10 - 70 and represent the tone of a color within our scale. Rather than assign our colors semantic names (ie. "background"), which presents issues in terms of localization and reusability, we have opted for a universal naming convention.

Developers are welcome to map these colors to semantic naming conventions within the context of their application. 

Use of Blue 40 (primary40) should be reserved for actions only. (ie. buttons, links, etc.) 

Use of Green 50 (success50) should be reserved for success states only. 

Use of Yellow 40 (warning40) should be reserved for warning states only. 
(ie. a state where a user can continue, but errors may occur as a result)

Use of Red 40 (danger40) should be reserved for error states only.  



The BigDesign color palette is consistent with the WCAG 2.0 (Web Content Accessibility Guidelines), specifically in regards to foreground and background color when it comes to the legibility of text. You can learn more about WCAG standards here. 

In terms of contrast and legibility: WCAG provides an equation that outputs a number between 0 and 21, with 21 being the highest amount of contrast—black text and a white background—and 0 being no contrast—white on white.

AAA means that your text has a contrast ratio of at least 7.0.
ex: This is an example of AAA contrast.

AA means that your text has a contrast ratio of at least 4.5 or higher.
ex: This is an example of AA contrast.

AA+ means that your text has a contrast ratio of at least 3.0.
ex: This is an example of AA+ contrast.

Fail means that your text has a contrast ratio of 2.9 or lower. (This does not apply to logos, text in logos, and other decorative elements.)
ex: This is an example of Fail contrast.


Greyscale Palette


Grey 10 (secondary10): Canvas background, Hover background


Grey 20 (secondary20): Hover background on canvas


Grey 30 (secondary30): Stroke, disabled control


Grey 40 (secondary40): Placeholder text, Inactive text, Disabled badge


Grey 50 (secondary50): No current specified uses. Do not use as a background color.


Grey 60 (secondary60): Secondary text, Icons, Inactive badge text


Grey 70 (secondary70): Primary text, Tooltip, Background

Color Palette


Blue 40 (primary40): Actions, Buttons, Links


Green 50 (success50): Success, Enabled


Yellow 40 (warning40): Warning


Red 40 (danger40): Error, Destructive Action

Notes + Specifications

View Developer Docs

© Copyright 2019 BigCommerce
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us