Newskit Logo
About

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

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

Teal

teal010
#DCF2F4
teal020
#A8E0E6
teal030
#81D2DA
teal040
#65BBC4
teal050
#41A0AA
AA(L)
teal060
#06808E
AA
teal070
#0D575E
AAA
teal080
#0C4E55
AAA
teal090
#09414A
AAA
teal100
#083136
AAA

Red

red010
#FFE8E5
red020
#FFCDC7
red030
#FFA99E
red040
#F88B7C
red050
#ED6B5A
AA(L)
red060
#DA5F4E
AA(L)
red070
#D23F2D
AA
red080
#9F3325
AAA
red090
#822D21
AAA
red100
#56211A
AAA

Green

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

Amber

amber010
#FFEECF
amber020
#FFDB9D
amber030
#FFC058
amber040
#FFAD2C
amber050
#FF9900
amber060
#FF8F00
amber070
#FF8200
amber080
#FF7200
amber090
#FF6000
AA(L)
amber100
#FF4B00
AA(L)

Neutral

neutral010
#F4F4F4
neutral020
#EBEBEB
neutral030
#E4E4E4
neutral040
#BBC3C9
neutral050
#96A2AB
neutral060
#808E99
AA(L)
neutral070
#677483
AA
neutral080
#555E74
AA
neutral090
#243853
AAA
neutral100
#162740
AAA

Purple

purple010
#B2C3D5
purple020
#93A1C3
purple030
#757CB1
AA(L)
purple040
#5D589F
AA
purple050
#503B8C
AAA
purple060
#471E79
AAA
purple070
#50196B
AAA
purple080
#54145D
AAA
purple090
#4F1049
AAA
purple100
#400C30
AAA

Black

blackTint10
rgba(10, 10, 10, 0.1)
AAA
blackTint20
rgba(10, 10, 10, 0.2)
AAA
blackTint30
rgba(10, 10, 10, 0.3)
AAA
blackTint40
rgba(10, 10, 10, 0.4)
AAA
blackTint50
rgba(10, 10, 10, 0.5)
AAA
blackTint60
rgba(10, 10, 10, 0.6)
AAA
blackTint70
rgba(10, 10, 10, 0.7)
AAA
blackTint80
rgba(10, 10, 10, 0.8)
AAA
blackTint90
rgba(10, 10, 10, 0.9)
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
#000000
AAA

White

whiteTint10
rgba(255,255,255, 0.1)
AAA
whiteTint20
rgba(255,255,255, 0.2)
AAA
whiteTint30
rgba(255,255,255, 0.3)
AAA
whiteTint40
rgba(255,255,255, 0.4)
AAA
whiteTint50
rgba(255,255,255, 0.5)
AAA
whiteTint60
rgba(255,255,255, 0.6)
AAA
whiteTint70
rgba(255,255,255, 0.7)
AAA
whiteTint80
rgba(255,255,255, 0.8)
AAA
whiteTint90
rgba(255,255,255, 0.9)
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

Social

socialTwitter
#1DA1F2
socialFacebook
#1877F2
AA(L)
socialInstagram
#C32AA3
AA
socialYoutube
#FF0000
AA(L)
socialWhatsapp
#25D366
socialReddit
#FF4500
AA(L)
socialGithub
#000000
AAA

Transparent

transparent
transparent
AAA

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.

AA
inkBase
neutral080
#555E74
AAA
inkContrast
neutral100
#162740
AA
inkSubtle
neutral070
#677483
inkNonEssential
neutral040
#BBC3C9
inkInverse
white
#FFFFFF
AAA
inkHeadingLink
neutral100
#162740
AA
inkHeadingLinkHover
#2F75D7
AA
inkHeadingLinkActive
#2F75D7
AAA
inkHeadingLinkVisited
neutral100
#162740
AA
inkNegative
red070
#D23F2D
AA(L)
inkPositive
green070
#148F39
inkNotice
amber080
#FF7200
AA
inkInformative
teal060
#06808E
AA(L)
inkBrand010
blue040
#577FFB
AAA
inkBrand020
blue080
#213A82
AA(L)
inkBrand030
teal050
#41A0AA
AAA
inkWhiteTint080
whiteTint080
rgba(255,255,255,0.8)
inkWhite
white
#FFFFFF

Interface

Interface background colours applied to fills and borders on background UI elements including screen background and card background.

interfaceBackground
white
#FFFFFF
interface010
white
#FFFFFF
interface020
neutral010
#F4F4F4
interface030
neutral020
#EBEBEB
interface040
neutral030
#E4E4E4
interface050
neutral040
#BBC3C9
AAA
interface060
neutral090
#243853
interfaceBrand010
blue020
#AEBFFF
interfaceBrand020
blue030
#87A4FC
AA(L)
interfaceInformative010
teal050
#41A0AA
interfaceInformative020
teal010
#DCF2F4
interfaceNotice010
amber040
#FFAD2C
interfaceNotice020
amber010
#FFEECF
AA(L)
interfaceNegative010
red050
#ED6B5A
interfaceNegative020
red010
#FFE8E5
interfacePositive010
green040
#67CF86
interfacePositive020
green010
#E6FAEB
interfaceSkeleton010
neutral010
#F4F4F4
interfaceSkeleton020
neutral030
#E4E4E4
interfaceNeutral010
neutral050
#96A2AB
AA(L)
interfaceBrand030
blue040
#577FFB
AA
interfaceBrand040
blue060
#3358CC
AAA
interfaceBrand050
blue080
#213A82
AA(L)
interfaceBrand060
teal050
#41A0AA
interfaceNeutral020
neutral010
#F4F4F4

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.

interactivePrimary010
blue010
#E0E7FF
interactivePrimary020
blue020
#AEBFFF
AA(L)
interactivePrimary030
blue040
#577FFB
AA
interactivePrimary040
blue060
#3358CC
AAA
interactivePrimary050
blue080
#213A82
interactiveSecondary010
neutral020
#EBEBEB
interactiveSecondary020
neutral040
#BBC3C9
AA
interactiveSecondary030
neutral080
#555E74
AAA
interactiveSecondary040
neutral090
#243853
AAA
interactiveSecondary050
neutral100
#162740
interactiveNegative010
red010
#FFE8E5
interactiveNegative020
red020
#FFCDC7
AA(L)
interactiveNegative030
red060
#DA5F4E
AA
interactiveNegative040
red070
#D23F2D
AAA
interactiveNegative050
red080
#9F3325
interactivePositive010
green010
#E6FAEB
interactivePositive020
green020
#B8EFC8
AA(L)
interactivePositive030
green060
#23A248
AA(L)
interactivePositive040
green070
#148F39
AA
interactivePositive050
green080
#0A782A
AAA
interactiveVisited010
purple050
#503B8C
interactiveDisabled010
neutral030
#E4E4E4
AAA
interactiveInverse010
whiteTint010
rgba(255,255,255,0.1)
AAA
interactiveInverse020
whiteTint020
rgba(255,255,255,0.2)
interactiveInverse030
white
#FFFFFF
AAA
interactiveInverse040
whiteTint070
rgba(255,255,255,0.7)
AAA
interactiveInverse050
whiteTint080
rgba(255,255,255,0.8)

Teal

AAA
teal90
#093E43

Reddit

AA(L)
reddit
#FF4500

Whatsapp

whatsapp
#25D366

Youtube

AA(L)
youtube
#FF0000

Instagram

AA
instagram
#C32AA3

Facebook

AA(L)
facebook
#1178F2

Twitter

twitter
#1DA1F2

Illustration

illustrationPalette010
blue010
#E0E7FF
illustrationPalette020
blue020
#AEBFFF
illustrationPalette030
blue030
#87A4FC
AA(L)
illustrationPalette040
blue040
#577FFB
AA
illustrationPalette050
blue050
#446BE4
AA
illustrationPalette060
blue060
#3358CC
AAA
illustrationPalette070
blue070
#2B4AAB
AAA
illustrationPalette080
blue080
#213A82
AAA
illustrationPalette090
blue090
#213A5F
AAA
illustrationPalette100
blue100
#192C48
AA(L)
illustrationHighlight010
blue040
#577FFB
AA(L)
illustrationSubtle010
neutral060
#808E99
illustrationShadow010
neutral040
#BBC3C9
AAA
illustrationGradient010
linear-gradient(0deg, rgba(10,10,10,0.00) 0%, #0A0A0A 100%)
illustrationBackground010
#F0F3FF
illustrationBackground020
neutral010
#F4F4F4
illustrationBorder010
neutral020
#EBEBEB
illustrationBorder020
neutral040
#BBC3C9
illustrationDisabled
neutral020
#EBEBEB
illustrationInterface010
white
#FFFFFF
illustrationInterface020
blue010
#E0E7FF
illustrationInterface030
blue020
#AEBFFF
illustrationInterface040
blue030
#87A4FC
AA(L)
illustrationInterface050
blue040
#577FFB
AA
illustrationInterface060
blue050
#446BE4
AA
illustrationInterface070
blue060
#3358CC
AAA
illustrationInterface080
blue070
#2B4AAB
AAA
illustrationInterface090
blue080
#213A82
AAA
illustrationInterface100
blue090
#213A5F
illustrationAnatomySubtle
blue020
#AEBFFF
illustrationAnatomyBorder010
blue020
#AEBFFF
AAA
illustrationAnatomyBorder020
blue070
#2B4AAB