Color Palette

The following colors are part of UI components and can be referenced in Less with the variable name on the left.

Core Colors

Core colors are chosen to look good together, comply with WCAG 2.0 standards and provide an accessabile experience for visually impaired and color blind users.

All Core Colors have a reserved for special meaning within Tradeshift’s UI:

• @ts-color-blue
  • Main color of the primary action (CTA)
  • Accent color
  • Link color
  • Active states
• @ts-color-green
  • Positive statuses
  • Accepting agreements
  • Creating new objects on the platform
• @ts-color-orange
  • Warning messages / icons
  • Highlight important information (note)
• @ts-color-red
  • Danger messages (deletion confirmation)
  • Rejecting action / Negative actions
  • Error states and messages
• @ts-color-purple
  • Reserved for Ada (Tradeshift’s machine learning assistant)
• @ts-color-pink
  • Reserved for Tradeshift GO.

Gray Shades

Tradeshift’s color palette has 12 distinct shades of gray. Those are recommanded for backgrounds, negative space, separators, borders and shadows.

Here are some of the uses of greay shades in Tradeshift’s UI:

• @ts-color-gray-lightest
  • Used for footer’s background
• @ts-color-gray-lighter
  • Background of the page. Ensures high contrast with white boards on top of it.
  • Disabled states for form elements.
• @ts-color-gray-light
  • Borders (board, input fields, checkboxes, radios, buttons, etc)
  • Separators (tabbed navigation, table seaparators, etc)
  • Default color of the icons
• @ts-color-slate-lighter
  • Chrome’s hover background
• @ts-color-slate-light
  • Chrome’s background