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 and Secondary 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 for calls to action. It should not be used for text.

Gray tints

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

Gray Dark #29292c is used for headlines on a white/light background. It can also be used as a background color for inverse text.

Gray Medium #3d3e44 is used for body text on a white/light background.It can also be used in graphical elements such as icons or horizontal rules. It should not be used as a background color.

Gray Light #67676e is used for labels and hint text on a white/light background. It can also be used in graphical elements such as icons or horizontal rules.

Gray Ultra-Light #f0f0f8 is commonly used as a background for text. It is also used as a text color when set against a Gray Dark background.

Accent Colors

Although our color system is mostly monochromatic, in certain instances, other colors may need to be used. For those circumstances, we have developed this set of accent colors. These colors should be used rarely and sparingly. Under no circumstances should any of them become the predominant color.

Blue: #2e52e4, Purple: #6931e0, & Yellow: #ffc726

Primarily used for graphical elements, specifically icons and hand drawn squiggles. Should not be used as text color or background of a section.

Yellow Light: #ffe7a3

Used as a background color to highlight small pieces of text. On a white background, Yellow Light should not be applied to anything with semantic meaning since the contrast is very low.

Background Color - Default

By default the background color of documents, web pages, and other visual collateral is white (#fff). This background will allow other visual elements such as photos, graphs, logos, and interactive elements (buttons etc.) stand out. When using the default background text should follow the rules stated on the previous pages.

Background Colors - Gray Ultra-Light Alternative

To break up the monotony of white, there are some cases when it may be advantageous to use an alternative background. When using the alternative background ensure that contrast with other elements such as text, icons, graphs, and interactive items (buttons etc.) maintain good contrast.

Background Colors - Dark

These background colors should be used sparingly.