Colors

Base

Platform UIs base color pallet.

Greyscale

Alpha

Every color in Platform UI has a corresponding alpha value (opacity) ranging from 10% to 90%.

Hover over each color to see it’s exported css custom property.

Custom Properties

We export all of our colors to :root as --{ color name } to be leveraged in any additional style sheets using var(). Alpha colors are --{ color name }-a{ 10-90 }.

// Represented in :root 
:root {
  --navy-a30;  
}
// Represented in your style sheet 
div {
  background-color: var(--navy-a30);  
}