Colours
Overview
Colour is key to expressing brand and identity but it also plays an important role in conveying specific meaning to a user. The NewsKit design system applies a flexible approach to colour that allows brands to utilise bespoke palettes in an appropriate and systematic way while encouraging adherence to accessibility requirements.
Colours are applied to NewsKit components by a set of well-defined rules at both the theme and component level. This helps to establish a visual tone, indicate interaction and communicate meaning. Importantly, it also allows our brands to maintain their identity and distinctive styles.
Palettes
The palette of colours are an extensive selection of all the colours in the brand. They are not linked to a single use but the contextual colour tokens reference/map to these colours. It’s recommended that you critically evaluate their use when applying them to an element over using a contextual colour.
Blue
Teal
Red
Green
Amber
Neutral
Purple
Black
White
Social
Transparent
Contextual colours
Contextual colours utilise colours from the palettes and apply them to specific function(s) or purpose(s) within the NewsKit design system. There are three categories of contextual colours: Ink, Interface and Interactive colours.
Ink
Ink is a colour applied to typography and iconography. As a default within the NewsKit design system, there are several variations of ink that are available, each associated with a specific purpose within the design system.
Interface
Interface background colours applied to fills and borders on background UI elements including screen background and card background.
Interactive
Interactive colours are used to indicate and display interactions of certain components such as buttons, links and switches. Each set of interactive colours are used in combination to apply the differing states needed. The base (resting) state uses the 030, the hover 040 and the active 050. The 010 and 020 are used for loading/progress states.