Logo

Photography

Colors

Symbols & Pictograms

Infographics

Building further on our reveal design concept, our color palette is inspired by infrared camera technology, designed to distinguish humans from inanimate objects. Our primary color is a vibrant purple with supporting colors from the infrared range, in combination with white and a soft, warm color that provides a gentle base for all our communication.  

Our primary palette are what creates distinction in our color palette. Violet is to be considered our main color, with the remaining colors intended to enrich our visual expression, and thus be used more sparingly. 

By default we set the background of any surface to be Warm. This allows us to visually bring content forward by placing it on in a frame which has a white background. Things that are brighter are generally perceived as closer to us, and this helps us create a clear visual hierarchy. 

Typically elements such as navigation, logo and metadata can be placed directly on the background, whereas the primary content should be wrapped in white. 

For theming, all colors in our palette have values ranging from 

 is considered the base of each color range. When theming (next section) make sure to use a satisfactory contrast in lightness and saturation. 

Tokens are available in Figma and Github.

, but in order to highlight content we use color theming, where we work with different values within the same color. The main thing to remember is to ensure sufficient contrast between background, buttons and text. See examples below. 

