Brand - Colors

Consistent use of color is important in establishing usability patterns, setting expectations, creating hierarchy and focus for viewers, and making a design appealing.

Further, accessibility should be taken into account. We strive for AA level Web Content Accessibility Guideline (WCAG) compliance. To ensure compliance with color, all content's foreground color values must meet the minimum contrast ratio for the background color they are placed over.

Primary Colors

thoughtbot Red: #e03131

thoughtbot red should be used sparingly to bring focus to a select few elements. It is primary used for our logo and button backgrounds with white text. It should not be used for text or with dark backgrounds.

Bright Red: #f74239

This is a variation of the thoughtbot red to be used on dark backgrounds to help with accessibility. Other use cases include highlighting elements, and background elements as long as it's not behind small text.

Grayscale

Our grayscale is primary used for secondary text and background colors. We should avoid using any other variations or tints of black outside of the choices below.

White #ffffff is used for high contrast items.

Grayscale 01 #FAF9F9 is used for primary text on dark backgrounds.

Grayscale 02 #EAE6E4

Grayscale 03 #C1BAB7 is used for secondary text.

Grayscale 04 #928A85 is commonly used for input and button borders.

Grayscale 05 #7B6E68

Grayscale 06 #2F1C1C is used as a secondary background color.

Grayscale 07 #201313 is used as our primary background color.