Consistent use of color is important in establishing usability patterns,
setting expectations, creating hierarchy and focus for viewers, and making a
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 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 is primary used for text and background colors. We should avoid using any
other variations or tints of black outside of the choices below.
#29292c is used for headlines on a white/light background.
It can also be used as a background color for inverse text.
#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.
#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.
#f0f0f8 is commonly used as a background for text. It is also used
as a text color when set against a Gray Dark background.
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.
#6931e0, & Yellow:
Primarily used for graphical elements, specifically icons and hand drawn
squiggles. Should not be used as text color or background of a section.
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
Background Colors - Dark
These background colors should be used sparingly.