Newskit Logo

Foundations

Colours

Colour is key to expressing brand and identity but it also plays an important role in conveying meaning to a user.

Overview

The NewsKit design system enables brands to utilise bespoke colour palettes appropriately and systematically while encouraging accessibility.

Colours are applied to NewsKit components through well-defined rules at both the theme and component level. These rules help to establish a visual tone, indicate interaction and communicate meaning. Importantly, it also allows our brands to maintain their own unique identities.

Principles

Contextual

Colour is applied to a UI element based on it’s context, not just because it’s visually pleasing.

Expressive

Brand colours are added to key moments in the user journey to express brand identity and style.

Inclusive

Important UI elements like text and icons are legible and meet accessibility contrast standards.

Palette colours

Palette colours represent all of a brand’s colours. They are linked to contextual colour tokens where specific meaning (context) is applied. As such, careful consideration should be given if choosing to apply a palette colour directly applied to an interface rather than a contextual colour.

Understanding the swatches

Utilise the swatches below to determine the accessibility of the palette colour in contrast to the background colour of this page

  • Normal sized text on this colour will have Contrast ratio of 4.5:1 or over

  • Normal sized text on this colour will have Contrast ratio of 3:1 or over

  • Normal sized text on this colour will be inaccessible

Normal and large size text is defined by the WCAG AA standards as the the following:

Normal sized text
The font size is at least 16px with a regular font weight or heavier.

Large sized text
The font size is at least 18.66px with a bold font weight or 24px with regular font weight.

blue010
#E0E7FF
blue020
#AEBFFF
blue030
#87A4FC
blue040
#577FFB
AA(L)
blue050
#446BE4
AA
blue060
#3358CC
AA
blue070
#2B4AAB
AAA
blue080
#213A82
AAA
blue090
#213A5F
AAA
blue100
#192C48
AAA
teal010
#EBF8F9
teal020
#A8E0E6
teal030
#81D2DA
teal040
#65BBC4
teal050
#41A0AA
AA(L)
teal060
#06808E
AA
teal070
#05717D
AA
teal080
#0D575E
AAA
teal090
#093E43
AAA
teal100
#083136
AAA
red010
#FFE6E5
red020
#FFB8B8
red030
#FF8A8A
red040
#FF5C5C
AA(L)
red050
#FF362E
AA(L)
red060
#EF1703
AA(L)
red070
#D20600
AA
red080
#A60100
AAA
red090
#790101
AAA
red100
#4D0000
AAA
green010
#E6FAEB
green020
#B8EFC8
green030
#8EE1A6
green040
#67CF86
green050
#42BA67
green060
#23A248
AA(L)
green070
#148F39
AA(L)
green080
#0A782A
AA
green090
#005D1C
AAA
green100
#003E11
AAA
amber010
#FFEECF
amber020
#FFDB9D
amber030
#FFC058
amber040
#FFAD2C
amber050
#FF9900
amber060
#FF8F00
amber070
#FF8200
amber080
#FF7200
amber090
#FF6000
AA(L)
amber100
#FF4B00
AA(L)
neutral010
#FAFAFA
neutral020
#F4F4F4
neutral030
#DEDEDE
neutral040
#CCCCCC
neutral050
#C0C0C0
neutral060
#9C9C9C
neutral070
#777777
AA(L)
neutral080
#535353
AAA
neutral090
#2E2E2E
AAA
neutral100
#0A0A0A
AAA
purple010
#E5E0FF
purple020
#BBAEFF
purple030
#9B87FC
purple040
#7264EF
AA(L)
purple050
#5E44E4
AA
purple060
#4C33CC
AAA
purple070
#442EB5
AAA
purple080
#36248C
AAA
purple090
#332770
AAA
purple100
#2A205C
AAA
blackTint010
rgba(10,10,10,0.1)
AAA
blackTint020
rgba(10,10,10,0.2)
AAA
blackTint030
rgba(10,10,10,0.3)
AAA
blackTint040
rgba(10,10,10,0.4)
AAA
blackTint050
rgba(10,10,10,0.5)
AAA
blackTint060
rgba(10,10,10,0.6)
AAA
blackTint070
rgba(10,10,10,0.7)
AAA
blackTint080
rgba(10,10,10,0.8)
AAA
blackTint090
rgba(10,10,10,0.9)
AAA
black
#0A0A0A
AAA
whiteTint010
rgba(255,255,255,0.1)
AAA
whiteTint020
rgba(255,255,255,0.2)
AAA
whiteTint030
rgba(255,255,255,0.3)
AAA
whiteTint040
rgba(255,255,255,0.4)
AAA
whiteTint050
rgba(255,255,255,0.5)
AAA
whiteTint060
rgba(255,255,255,0.6)
AAA
whiteTint070
rgba(255,255,255,0.7)
AAA
whiteTint080
rgba(255,255,255,0.8)
AAA
whiteTint090
rgba(255,255,255,0.9)
AAA
white
#FFFFFF
socialTwitter
#1DA1F2
socialFacebook
#1877F2
AA(L)
socialInstagram
#C32AA3
AA
socialYoutube
#FF0000
AA(L)
socialWhatsapp
#25D366
socialReddit
#FF4500
AA(L)
socialGithub
#000000
AAA
socialApple
#000000
AAA
socialGoogleBlue
#4285F4
AA(L)
socialGoogleRed
#DB4437
AA(L)
socialGoogleYellow
#F4B400
socialGoogleGreen
#0F9D58
AA(L)
transparent
transparent
AAA

Contextual colours

Contextual colours are selected from the palette colours and have specific functions or purposes applied. There are three categories of contextual colours: Ink, Interface and Interactive colours.

Learn more about the Icon component
Ink

Ink colours are applied to typography and iconography. There are several variations available, each associated with a specific purpose within the design system.

‘Common’ Ink tokens are used to style most generic text and icons within a design such as headlines, subheadlines & body text.

ColourColour tokenToken valueCommon uses
AAA
inkBase
neutral090
Body and paragraph text
AAA
inkContrast
neutral100
Headlines
AAA
inkSubtle
neutral080
Subheadlines, labels, secondary copy
inkNonEssential
neutral050
Text and icons that are in an inactive (disabled) state
inkInverse
white
Text and icons that where the contrast between the background cannot be achieved
Interface

Interface colours are applied to fills and borders on often static background UI elements including page backgrounds and dividers.

‘Common’ interface tokens are used to style most structural, often static, component layers within a design such as card & page backgrounds.

ColourColour tokenToken valueCommon uses
interfaceBackground
white
Page background
interface010
white
Component backgrounds e.g. Card background
interface020
neutral010
Extended scale of component backgrounds
interface030
neutral020
Extended scale of component backgrounds
interface040
neutral030
Extended scale of component backgrounds
interface050
neutral040
Extended scale of component backgrounds
AAA
interface060
neutral100
Component backgrounds of contrasting colours
Interactive

Interactive colours are used to indicate and display interactions of certain components such as buttons, links and switches. Each set of interactive colours covers the various states needed. The base state uses the 030, the hover 040 and the active 050. The 010 and 020 are used for loading/progress states.

‘Primary’ Interactive tokens are usually used to style the most prominent interactive elements. This includes common components such as buttons & inputs.

ColourColour tokenToken valueCommon uses
interactivePrimary010
blue010
Background colour applied to the Hover state of the Outlined & Minimal Button
interactivePrimary020
blue020
Background colour applied to the Loading state of all Buttons, & the Active state of the Outlined & Minimal Button
AA
interactivePrimary030
blue060
Background colour applied to the Base state of the Solid Button, & the border colour of the Outlined Button
AAA
interactivePrimary040
blue070
Background colour applied to the Hover state of the Solid Button, & the border colour of the Outlined Button
AAA
interactivePrimary050
blue080
Background colour applied to the Active state of the Solid Button, & the border colour of the Outlined Button

Colour can be applied to a UI element using the color, iconColor borderColor, placeholderColor and background attribute on a Style Preset.

Example code

1backgroundColor: '{{colors.inkBase}}';
2backgroundColor: '{{colors.inkNegative}}';
3backgroundColor: '{{colors.inkBrand010}}';
4backgroundColor: '{{colors.interfaceBackground}}';
5backgroundColor: '{{colors.interfaceInformative010}}';
6backgroundColor: '{{colors.interactivePrimary010}}';
7backgroundColor: '{{colors.interactivePrimary010}}';
8backgroundColor: '{{colors.interactiveSecondary010}}';
9backgroundColor: '{{colors.interactiveNegative010}}';
10backgroundColor: '{{colors.interactiveInput010}}';
11backgroundColor: '{{colors.interactiveVisited010}}';

Accessibility considerations

Carefully consider what colours to assign to the NewsKit contextual colours to ensure important UI elements like text and icons are legible without compromising the aesthetic. Avoid using yellow or orange colours to convey a notice or warning intent because these colours paired with white text do not allow for sufficient colour contrast. Aim for contrast ratios that adhere to the WCAG AA standards:

Contrast for text and images of text

Standard text and images of text must have a minimum of 4.5:1 contrast between the text colour and the background, except for the following:

Large text

Large-scale text and images of large-scale text must have a minimum of 3:1 contrast between the text colour and the background.

Link text

Underline link text within the body text (inline link). Otherwise, in addition to the above, link text must have at least a 3:1 contrast between the link text colour and the surrounding non-link text colour.

Incidental text

Text or images of text that are part of an inactive component, pure decoration, or part of a picture containing significant other visual content do not have any contrast requirements.

Logotypes

Text that is part of a logo does not have any contrast requirements.

Contrast for non-text elements

User interface components and graphical objects must have at least a 3:1 contrast between against adjacent colours.

Iconography

Icons provide additional context to information.

Icons provide additional context to information.