Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

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

◢

Overview 

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.  

VISUAL ACCESSIBILITY STANDARDS

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
AAA means that your text has a contrast ratio of at least 7.0.
ex: This is an example of AAA contrast.

AA
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+
AA+ means that your text has a contrast ratio of at least 3.0.
ex: This is an example of AA+ contrast.

Fail
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