Visual Style

Colors

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

color palette

Making the content readable for everyone was our main goal. Accessibility considerations have been our top priority. Each color in the palette indicates its WCAG conformance level (“AA” or “AAA”). It's based on colors' 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 emphasise or de-emphasise different content areas.

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

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 emphasise actions and highlight key information. Blue is a natural choice in our context, where it has been the default color used for links, conveying the idea of action.

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

Accent50 provides a blue which is suitable to be used for text and as background. When used as link text it provides sufficient contrast with black text to notice the difference. When used as background, it provides enough contrast with white text to keep the text readable.

  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

Red, green and yellow are utility colors. They can act as accent colors bringing the additional meaning that is commonly associated with them.

  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. Make sure to aim for level AA contrast (4.5:1) when extending the default palette. Also try to test how they are perceived at different color vision deficiency conditions.