Brand colors

Our primary color palette is used for major UI visuals and controls

  1. @primary
  2. @secondary
  3. @tertiary

Notice colors

These colors are used when displaying various notifications

  1. @info
  2. @success
  3. @warning

Grayscale

This muted palette is used for complementary visual structure

  1. @white
  2. @lightestGray
  3. @lighterGray
  4. @lightGray
  5. @gray
  6. @darkGray
  7. @darkerGray
  8. @darkestGray
  9. @black

Breakpoints

These represent the minimum breakpoint widths

1Mobile Portrait@mobilePortraitWidth
2Mobile Landscape@mobileLandscapeWidth
3Tablet Portrait@tabletPortraitWidth
4Desktop Small@desktopSmallWidth
5Desktop Medium@desktopMediumWidth
6Desktop Large@desktopLargeWidth