Colours
Colors are irreplaceable. They can sway thinking, change actions, and cause reactions. Used in the right way, they can communicate more than anything.
Download colour files
Colour overview
Primary colours
HEX
#161719
RGB
22, 23, 25
HEX
#F8F8FD
RGB
248, 248, 253
Primary accent colours
HEX
#044FBF
RGB
4, 79, 191
HEX
#0689FF
RGB
6, 137, 255
HEX
#07C4FF
RGB
7, 196, 255
Secondary accent colours
HEX
#F49DF1
RGB
244, 157, 241
HEX
#F6E795
RGB
246, 231, 149
HEX
#4BF2AC
RGB
75, 242, 172
HEX
#FFCB8F
RGB
255, 203, 143
HEX
#B08CFD
RGB
176, 140, 253
HEX
#FF8B8B
RGB
255, 139, 139
Primary colours
Primary black
Primary black is Synia's main black colour as the name suggests. It's used for all dark backgrounds, as well as text on light backgrounds.
HEX
#161719
RGB
22, 23, 25
Black #1
Black #1 is a secondary black colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#000000
Black #2
Black #2 is a secondary black colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#232634
Black #3
Black #3 is a secondary black colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#292E40
Black #4
Black #4 is a secondary black colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#313A51
Black #5
Black #5 is a secondary black colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#505D7C
Primary white
Synia's primary white colour. It's used as the main background in light mode, as well as text on dark backgrounds.
HEX
#F8F8FD
White #1
White #1 is a secondary white colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#FFFFFF
White #2
White #2 is a secondary white colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#EFF1F8
White #3
White #3 is a secondary white colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#DEE2EE
White #4
White #4 is a secondary white colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#BCC3D8
White #5
White #4 is a secondary white colour. It is used to create hierarchy in text and solid elements like rectangles and buttons.
HEX
#A5ACC0
Primary accent colours
Primary Blue
Primary blue is the brand's main accent colour. It's mainly used for patterns and illustrations but also highlighted text or bullet points. Primary blue is never used as a background.
HEX
#0689FF
RGB
6, 137, 255
Dark blue
Dark blue is primarily used in patterns to create visual interest. It's never used in text or backgrounds.
HEX
#044FBF
RGB
4, 79, 191
Light blue
Light blue is primarily used in patterns to create visual interest. It's never used in text or backgrounds.
HEX
#07C4FF
RGB
7, 196, 255
Secondary accent colours
Pink
Pink is only used for graphs and other statistical information. It should never be used for patterns, text or backgrounds.
HEX
#F49DF1
RGB
244, 157, 241
Yellow
Yellow is only used for graphs and other statistical information. It should never be used for patterns, text or backgrounds.
HEX
#F6E795
RGB
246, 231, 149
Green
Green is only used for graphs and other statistical information. It should never be used for patterns, text or backgrounds.
HEX
#4BF2AC
RGB
75, 242, 172
Orange
Orange is only used for graphs and other statistical information. It should never be used for patterns, text or backgrounds.
HEX
#FFCB8F
RGB
255, 203, 143
Purple
Purple is only used for graphs and other statistical information. It should never be used for patterns, text or backgrounds.
HEX
#B08CFD
RGB
176, 140, 253
Red
Red is only used for graphs and other statistical information. It should never be used for patterns, text or backgrounds.
HEX
#FF8B8B
RGB
255, 139, 139
Colour rules
Dark mode
Synia's brand is primarily black. Backgrounds are always in Primary black. We can create hierarchy in shapes, texts and buttons by using different black tints.
Black mode examples
Primary black is the main background colour.
Black tints are used as background colour inside rectangles and for icons within rectangles.
White text on dark backgrounds.
Black tints should never be used as a primary background.
Do not mix dark backgrounds with light rectangles.
Do not mix black and white shades in text in a way that negatively affects legibility.
Primary black as a main background colour and black tints used as backgrounds for text boxes.
White text on dark backgrounds.
Do not mix black and white elements together.
Do not use black text on black backgrounds or white text on white backgrounds.
Black tints should not be used as a primary background.
Light mode
White mode shoule only be used needed, when it is not possible to use dark mode, for example in Word documents. The same rules apply to white mode and dark mode. Backgrounds are always in Primary white and we can create hierarchy in shapes, texts and buttons by using different white shades.
Light mode examples
Primary white is the main background colour.
White tints used to create hierarchy in text boxes.
Do not use black tinted shapes on a white background.
Do not use white text on white backgrounds.
White shades should not be used as a main background.
Blue colours
Blue is Synia's primary accent colour. It's used to highlight words or short phrases in titles and quotes as well as patterns and illustrations. We use blue tints and shades to create a visual interest in patterns.
Blue colour examples
Primary blue is the main pattern colour.
Light and dark blue used in some dots to create more depth.
Blue pattern is on a Primary black background.
Patterns should not be monochrome.
Patterns should not be on tinted backgrounds.
Primary blue is used to highlight a phrase within a sentence.
Do not use different shades of blue to highlight words, only Primary blue.
Pastel colours
Paster colours are only used for numeric data on black or white backgrounds.
Paster colour examples
Pastel colours in a donut graph.
Text is white and data information is in a black tinted rectangle on a Primary black background.
Pastel colours should never be used for primary backgrounds, rectangle backgrounds or text.
Pastel colours can be used for small details, like progress bars on web.
Green is used to show a positive change.
Pastel colours should never be used in text.