Codex

Appearance

Colors ​

NOTICE

Colors are currently being updated. This page is not a completely accurate depiction of new colors being added and existing colors being altered.

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

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

Gray scale ​

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 to true black . Intermediate shades of gray include a tint of blue for greater harmony with our accent colors.

When applying text on a surface, check the color contrast between the text and the background. Colors from White to Gray400 are safe text colors for a black surface. Colors from Gray500 to Black are safe colors for a white surface.

  1. White#fffAAAHSB 0, 0%, 100%
  2. Gray100#f8f9faAAAHSB 210, 1%, 98%
  3. Gray200#eaecf0AAAHSB 220, 3%, 94%
  4. Gray300#c8ccd1AAAHSB 213, 4%, 82%
  5. Gray400#a2a9b1AAAHSB 212, 8%, 69%
  6. Gray500#72777dAA / AAHSB 210, 9%, 49%
  7. Gray600#54595dAAAHSB 207, 10%, 36%
  8. Gray650#404244AAAHSB 210, 6%, 27%
  9. Gray750#202122AAAHSB 210, 6%, 13%
  10. Black#000AAAHSB 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 a lighter (Blue100), regular (Blue600) or a darker (Blue700) version of blue is needed.

Blue600 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 a background, it provides sufficient contrast with white text.

  1. Blue100#eaf3ffAAAHSB 214, 8%, 100%
  2. Blue500#447ff5AAHSB 220, 72%, 96%
  3. Blue600#36cAAHSB 220, 75%, 80%
  4. Blue700#2a4b8dAAAHSB 220, 70%, 55%

Utility colors ​

Utility colors are another type of accent color.

Shades of red, green, and yellow are used as utility colors.

  1. Red100#fee7e6AAAHSB 2, 10%, 100%
  2. Red500#ff4242AAHSB 0, 74%, 100%
  3. Red600#d73333AAHSB 360, 76%, 84%
  4. Red700#b32424AAAHSB 360, 60%, 53%
  1. Green100#d5fdf4AAAHSB 167, 16%, 99%
  2. Green500#00af89AAHSB 167, 100%, 69%
  3. Green600#14866dAAHSB 167, 85%, 53%
  4. Green700#096450AAAHSB 167, 85%, 53%
  1. Yellow100#fef6e7AAAHSB 39, 9%, 100%
  2. Yellow500#fc3AAHSB 45, 80%, 100%
  3. Yellow600#edab00AAHSB 43, 100%, 93%
  4. Yellow700#a66200AAAHSB 36, 100%, 67%

Common meanings are associated with them:

  • Variants of red indicate errors in components, such as invalid text in a text field. They also represent destructive actions, such as delete or cancel.
  • Variants of green indicate success in components.
  • Variants of yellow indicate a non-disruptive warning or an alert.

When indicating meaning to visually impaired users, do not only rely on a color, but use additionally clear wording and icons.

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.[1]

Resources ​

Find the color palette in the Design tokens Figma library.

References ​

  1. See also English Wikipedia on accessible color usage as part of its Manual of Style.