Solaris has a bright colour palette that reflects our principles. We have selected a large series of colours to help support each of the different sections of Codebots. To help us achieve harmony and consistency across our many products we have created a flexible system that ensures users always know where they are.

Palette

Our palette is made up of our Primary, Brand and Support colours. Each of these have been selected for their warm or bright nature and high contrast rating. Since Codebots is a primary digital brand pushing a digital product and agenda, we opted to use colours that may not be CMYK friendly and have provided an alternative print colours that evoke the same feeling.

Primary colours

Our primary colours are our content first colours. These are the two most used colours across our brand. These should only be ever used as either background or text/ icon colours. They should never be used as a supporting colour such as in a header or infographic.

Void
#151517
cmyk: 100, 96, 46, 63
rgb: 21, 21, 23
pantone: 5255 C
Primary colour
Light
#ffffff
cmyk: 0
rgb: 255, 255, 255
pantone: N/A
Secondary colour

For subtle changes in the background and to denote the concept of hierarchy in the design, we have a 7 point grey scale. The grey scale should only be used in digital mediums, never in print.

Grey 1
#f5f5f5
Grey 2
#e8e8e8
Grey 3
#d0d0d1
Grey 4
#a1a1a2
Grey 5
#5b5b5b
Grey 6
#313133
Grey 7
#202022

Brand colours

Solaris’ brand colours are what we promote out to to the world as being the essence of Codebots. They help reflect the bright and energetic nature of our company. Stepping away from the standard darker tones of the market. We believe in a bright future where bots and humans work together in a digital frontier. These colours should be used sparingly in the products as to not dilute them. However, they should feature where the primary focus is our brand, such as the marketing site.

Our brand colours should only ever sit next to each other when directly referencing the brand.

Sol
#ff0f80
cmyk: 0, 86, 0, 0
rgb: 255, 15, 128
pantone: 213 C
Call to actions
Luna
#5b0fd3
cmyk: 78, 84, 0, 0
rgb: 91, 15, 211
pantone: 2098 C
UI options

Support colours

In order to give life and a vibrate brightness to our brand, we have opted to include a series of secondary support colours. These colours are designed to support different content, while not representing the brand by themselves.

Aquila
#4c62f0
cmyk: 89, 42, 0, 0
rgb: 76, 98, 240
pantone: 2727 C
UI options
Lyra
#23d79e
cmyk: 59, 0, 84, 0
rgb: 35, 215, 158
pantone: 3385 C
Success
Pyxis
#f4dc3e
cmyk: 7, 8, 82, 0
rgb: 244, 220, 62
pantone: 7404 C
Alerts
Fornax
#fba441
cmyk: 0, 43, 78, 0
rgb: 251, 164, 65
pantone: 1365 C
UI options
Cygnus
#f6464f
cmyk: 100, 96, 46, 63
rgb: 18, 18, 48
pantone: 5255 C
Warnings/Errors

Solaris also has a number of gradients to help with the visualisation of data. We tend to only use this in progress, data vis and content related designs. They should only be used on digital products.

Flare
#f6464f #fba441
Horizon
#ff0f80 #fba441
Aurora
#4c62f0 #23d79e
Galaxy
#4c62f0 #5b0fd3
Gravity
#5b0fd3 #ff0f80
Nebula
#23d79e #5b0fd3

Themes

Solaris has two themes, a light and dark version. These themes are designed to help creators provide the correct experience for a situation. We preference the light theme for most use cases, however when eye strain needs to be taken into account we recommend the dark theme. Each theme is centred around the primary background colour of either the Primary or Secondary Solaris colours.

Light theme

Our light theme is our default theme and is designed to evoke the sense of brightness and excitement. It uses the Secondary - Light as its background and makes uses of the lower end of the grey scale.

Dark theme

The dark theme is our alternative theme for our diagram editor and when we want to really put emphasis on our colours. It uses more of the higher end of the grey scale than the light theme with some support colours being replaced entirely by the grey scale.

Interactions

Solaris uses four alert and notification colours. These should remain the same colours regardless of the theme and always mean the same thing.

Accessibility

Solaris strives to maintain a high level of accessibility. Our colours have been designed to provide a AA or AAA contrast rating for all content. In order to meet this, we need to alternate the primary and secondary colours when used on the brand and support colours.

Do not use a brand or support colour as content on another brand or support colour, ever.

"Codebots accessibility colour matrix"