Visual Style

Colors

The color palette represents our character and brings a hint of freshness to our products.

color palette

Because content readability for everyone is our main goal, we have made accessibility considerations a top priority. Each color in the palette indicates its WCAG conformance level (“AA” or “AAA”). This level is based on a color's contrast against white or black.

Base colors

Base colors define the content surface and the main color for content. Different shades of paper and ink are useful to emphasize or de-emphasize different content areas.

Base colors range from pure white (Base100) to true black (Base0). Intermediate shades of gray include a tint of blue for greater harmony with our accent colors.

When applying text on a surface, you need to check the color contrast between the text and the background:

  • Base100…50 are safe text colors for a black surface.
  • Base30…0 are safe text colors for a white surface.
  1. Base100 AAA
    #fff RGB 255, 255, 255 HSB 0, 0%, 100%
  2. Base90 AAA
    #f8f9fa RGB 248, 249, 250 HSB 210, 1%, 98%
  3. Base80 AAA
    #eaecf0 RGB 234, 236, 240 HSB 220, 3%, 94%
  4. Base70 AAA
    #c8ccd1 RGB 200, 204, 209 HSB 213, 4%, 82%
  5. Base50 AAA
    #a2a9b1 RGB 162, 169, 177 HSB 212, 8%, 69%
  6. Base30 AA / AA
    #72777d RGB 114, 119, 125 HSB 210, 9%, 49%
  7. Base20 AAA
    #54595d RGB 84, 89, 93 HSB 207, 10%, 36%
  8. Base10 AAA
    #222 RGB 34, 34, 34 HSB 0, 0%, 13%
  9. Base0 AAA
    #000 RGB 0, 0, 0 HSB 0, 0%, 0%

Accent colors

Accent colors are used to emphasize actions and to highlight key information. Blue is a natural choice in our context, where it has been the default color used for links and conveys the idea of action.

There are three shades provided for when you need a lighter (Accent90), regular (Accent50) or a darker (Accent10) version of blue.

Accent50 is suitable to use for text and as background. When used for link text, this color provides sufficient contrast with black text. When used as background, it provides sufficient contrast with white text.

  1. Accent90 AAA
    #eaf3ff RGB 234, 243, 255 HSB 214, 8%, 100%
  2. Accent50 Progressive AA
    #36c RGB 51, 102, 204 HSB 220, 75%, 80%
  3. Accent10 AAA
    #2a4b8d RGB 42, 75, 141 HSB 220, 70%, 55%

Utility colors

Utility colors are another type of accent color. Common meanings are associated with them.

We use shades of red, green, and yellow as utility colors.

  1. Red90 AAA
    #fee7e6 RGB 255, 231, 230 HSB 2, 10%, 100%
  2. Red50 Destructive AA / AA
    #d33 RGB 221, 51, 51 HSB 360, 77%, 87%
  3. Red30 AAA
    #b32424 RGB 135, 54, 54 HSB 360, 60%, 53%
  1. Green90 AAA
    #d5fdf4 RGB 213, 253, 244 HSB 167, 16%, 99%
  2. Green50 AA
    #00af89 RGB 0, 175, 137 HSB 167, 100%, 69%
  3. Green30 AA
    #14866d RGB 20, 134, 109 HSB 167, 85%, 53%
  1. Yellow90 AAA
    #fef6e7 RGB 254, 246, 231 HSB 39, 9%, 100%
  2. Yellow50 AAA
    #fc3 RGB 255, 204, 51 HSB 45, 80%, 100%
  3. Yellow30 AA
    #ac6600 RGB 172, 102, 0 HSB 36, 100%, 67%

Additional colors

Some use cases, such as charts and data visualization, may need a broader color palette. Aim for level AA contrast (4.5:1) when extending the default palette. Make sure to test how these colors are perceived at different color vision deficiency conditions.