Brand Guidelines

Color

Bold, vibrant and friendly color is one cornerstone of Gatsby’s design. It distinguishes our brand and helps us to create consistent experiences and meaningful expressions across marketing and products.

Work in Progress

Our color palette includes primary and secondary colors that can be used for interfaces as well as illustrations.

Named color
900
800
700
600
500
400
300
200
100
50

Primary

3
3
3
3
2
2+
2
2+

Secondary

3
3
3
3
2
2+
3
2
2+
2+
2+
2
2+
2
2
2
2
2+
2+
2+
3
2
2+
2+

Neutral

3
3
3
2
2+
3
3
3
3
3

Accessibility

We are committed to complying with WCAG 2.0 AA standard contrast ratios. To do this, we choose primary, secondary and neutral colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.

Color Contrast

Score and Ratio

There is an equation provided by the WCAG (Web Content Accessibility Guidelines) that determines these two values.

  1. The Score
  2. The Ratio

The equation outputs a number between 0 and 21, with 21 being the highest amount of contrast—think black text and a white background—and 0 being no contrast—white on white.

The output of contrast between any two colors will fall somewhere on the spectrum between 0 – 21. That's where the scores are derived from.

There are technically 5 scores.

    AAA AAA Large AA AA Large Fail
  • × — Fail – Your text doesn't have enough contrast with the background. You probably want to make it darker. This is a score of less than 3.0.
  • 2+ — AA Large – The smallest acceptable amount of contrast for type sizes of 18pt and larger. This is a score of at least 3.0.
  • 2 — AA – This is the sweet spot for text sizes below ~18pt. This is a score of at least 4.5.
  • 3 — AAA – This is enhanced contrast with a score of at least 7.0. Think longer form articles that will be read for a significant period of time.

Color Blindness

There are different types of color blindness. The most common form is red-green color blindness, followed by blue-yellow color blindness and total color blindness. Red-green color blindness affects up to 8% of males and 0.5% of females. Ensure that adjacent color shades are distinguishable for color blind people. Use a color blindness analyzer to confirm your choices.