Colour
We use a simple palette with a Primary Steel and Primary Teal. The Primary Steel is reserved for headings. The Primary Blue is used for colour blocks and, in the case of the user interface of our products, to indicate links and buttons. We use a secondary palette containing a mixture of greys, used for body copy, dividers and other visual elements.
Having a correct palette in a user interface is key to a positive user experience. We closely follow Google’s colour theory from their material guidelines; ‘Colour in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.’
We take the Primary Teal and define this as our ‘500’ colour. This forms the foundations of the rest of our palette, comprised of lighter, less saturated and darker, more saturated shades of the ‘500’ colour to be used as accents colours.
We use a simple combination of white and grey for copy and visual elements like dividers and background colours. The ultimate objective of the palette used is to have an intuitive, clean, strong UI. Overtime, as we get feedback the palette will be updated and refined. We feel the current palette gives us a strong starting point.
Primary Colour
We take our Primary Teal as a base and define this as our ‘500’ colour. We then keep the same hue of 182° and alter the saturation and brightness to create our shades that forms the basis of our primary palette.
Base 500 colour
rgb(0, 187, 194)
#00BBC2
50
rgb(224, 247, 248)
#E0F7F8
100
rgb(179, 235, 237)
#B3EBED
200
rgb(128, 221, 225)
#80DDE1
300
rgb(77, 207, 212)
#4DCFD4
400
rgb(38, 197, 203)
#26C5CB
500
rgb(0, 187, 194)
#00BBC2
600
rgb(0, 181, 188)
#00B5BC
700
rgb(0, 172, 180)
#00ACB4
800
rgb(0, 133, 140)
#00858C
900
rgb(0, 99, 105)
#006369
In addition to the primary teal, we use our Primary Steel as a primary colour when desinging a UI. Where our Primary Teal is typically reserved for links and fill colours for design elements, the Primary teal is used for heading text, and, for the case of the studio, the navigation bar. It should never be used as a button colour nor to indicate a link. Three shades are accepted, where the 500 should be used most often.
Base Alt 500 colour
rgb(22, 34, 42)
#16222A
Alt 300
rgb(92, 100, 106)
#5C646A
Alt 500
rgb(22, 34, 42)
#16222A
Alt 700
rgb(16, 25, 31)
#10191F
Neutral palette
A simple neutral palette is used for copy and graphical elements, such as backgrounds and dividers.
Heading copy will typically be our Primary Alt 500.
A combination of greys are used for body copy, to indicate a disabled state and for backgrounds, dividers, and blocks.
White space is encouraged and white text over light images or darker colour blocks is also accepted.
To indicate success and danger we use green and red respectively.
Never use black.
White
rgb(255, 255, 255)
#FFFFFF
Background
rgb(250, 250, 250)
#FAFAFA
Divider
rgb(239, 239, 239)
#EFEFEF
Body light / disabled
rgb(204, 204, 204)
#CCCCCC
Body
rgb(153, 153, 153)
#999999
Danger
rgb(213, 0, 0)
#D50000
Success
rgb(0, 173, 70)
#00AD46