Newskit Logo

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
#D0EEF1
teal020
#A8E0E6
teal030
#81D2DA
teal040
#65BBC4
teal050
#41A0AA
AA(L)
teal060
#2C8C96
AA(L)
teal070
#20676F
AA
teal080
#0C4E55
AAA
teal090
#093E43
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
#FAFAFA
neutral020
#F4F4F4
neutral030
#E4E4E4
neutral040
#CCCCCC
neutral050
#C0C0C0
neutral060
#8F8F8F
AA(L)
neutral070
#808080
AA(L)
neutral080
#65665F
AA
neutral090
#2C2E30
AAA
neutral100
#1D1D1B
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

Social

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

White

white
#FFFFFF

Black

black
#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.

AAA
inkBase
neutral090
#2C2E30
AAA
inkContrast
neutral100
#1D1D1B
AA
inkSubtle
neutral080
#65665F
inkNonEssential
neutral050
#C0C0C0
inkInverse
white
#FFFFFF
AAA
inkHeadingLink
neutral100
#1D1D1B
AA
inkHeadingLinkHover
#2F75D7
AA
inkHeadingLinkActive
#2F75D7
AAA
inkHeadingLinkVisited
neutral100
#1D1D1B
AA
inkNegative
red070
#D23F2D
AA
inkPositive
green080
#0A782A
inkNotice
amber080
#FF7200
AA
inkInformative
teal070
#20676F
AA
inkBrand010
blue050
#446BE4
AAA
inkBrand020
blue080
#213A82
AAA
inkLogo
blue100
#192C48

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
#FAFAFA
interface030
neutral020
#F4F4F4
interface040
neutral030
#E4E4E4
interface050
neutral040
#CCCCCC
AAA
interface060
neutral100
#1D1D1B
interfaceBrand010
blue020
#AEBFFF
interfaceBrand020
blue030
#87A4FC
AA
interfaceInformative010
teal070
#20676F
interfaceInformative020
teal010
#D0EEF1
interfaceNotice010
amber080
#FF7200
interfaceNotice020
amber010
#FFEECF
AA
interfaceNegative010
red070
#D23F2D
interfaceNegative020
red010
#FFE8E5
AA
interfacePositive010
green080
#0A782A
interfacePositive020
green010
#E6FAEB
interfaceSkeleton010
neutral020
#F4F4F4
interfaceSkeleton020
neutral030
#E4E4E4
AA
interfaceNeutral010
neutral080
#65665F
AA(L)
interfaceBrand030
blue040
#577FFB
AA
interfaceBrand040
blue050
#446BE4
AAA
interfaceBrand050
blue070
#2B4AAB
AA(L)
interfaceBrand060
teal050
#41A0AA

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
AAA
interactivePrimary040
blue070
#2B4AAB
AAA
interactivePrimary050
blue080
#213A82
interactiveSecondary010
teal010
#D0EEF1
interactiveSecondary020
teal020
#A8E0E6
interactiveSecondary030
teal040
#65BBC4
AA(L)
interactiveSecondary040
teal060
#2C8C96
AA
interactiveSecondary050
teal070
#20676F
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
rgba(255,255,255,0.20)
AAA
interactiveInverse020
rgba(255,255,255,0.40)
AAA
interactiveInverse030
rgba(255,255,255,1)
AAA
interactiveInverse040
rgba(255,255,255,0.80)
AAA
interactiveInverse050
rgba(255,255,255,0.70)

White

AAA
whiteTint010
RGB(255, 255, 255, 0.1)
AAA
whiteTint020
RGB(255, 255, 255, 0.2)
AAA
whiteTint030
RGB(255, 255, 255, 0.3)
AAA
whiteTint040
RGB(255, 255, 255, 0.4)
AAA
whiteTint050
RGB(255, 255, 255, 0.5)
AAA
whiteTint060
RGB(255, 255, 255, 0.6)
AAA
whiteTint070
RGB(255, 255, 255, 0.7)
AAA
whiteTint080
RGB(255, 255, 255, 0.8)
AAA
whiteTint090
RGB(255, 255, 255, 0.9)