NewsKit Mobile 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
#E6F4FF
blue020
#D5EBFF
blue030
#ABD5FC
blue040
#6EB2F2
blue050
#358CDE
AA(L)
blue060
#0A68C1
AA
blue070
#02509B
AAA
blue080
#01396E
AAA
blue090
#002141
AAA
blue100
#000A14
AAA

Teal

teal010
#E8F6F8
teal020
#D1ECF1
teal030
#A2DAE3
teal040
#74C7D4
teal050
#45B5C6
teal060
#17A2B8
AA(L)
teal070
#128293
AA
teal080
#0E616E
AAA
teal090
#09414A
AAA
teal100
#073137
AAA

Red

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

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
#FFDB89
amber030
#FFC058
amber040
#FFAD2C
amber050
#FF9900
amber060
#FF8F00
amber070
#FF8200
amber080
#FF7200
amber090
#FF6000
AA(L)
amber100
#FF4B00
AA(L)

Neutral

neutral010
#FAFAFA
neutral020
#F0F0F0
neutral030
#E4E4E4
neutral040
#CCCCCC
neutral050
#C0C0C0
neutral060
#9C9C9C
neutral070
#777777
AA(L)
neutral080
#535353
AAA
neutral090
#2E2E2E
AAA
neutral100
#0A0A0A
AAA

Purple

purple010
#D1C2E0
purple020
#B399CC
purple030
#9470B8
AA(L)
purple040
#855CAD
AA
purple050
#7547A3
AA
purple060
#663399
AAA
purple070
#52297A
AAA
purple080
#47246B
AAA
purple090
#3D1F5C
AAA
purple100
#29143D
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
#2E2E2E
AAA
inkContrast
neutral100
#0A0A0A
AAA
inkSubtle
neutral080
#535353
inkNonEssential
neutral050
#C0C0C0
inkInverse
white
#FFFFFF
AAA
inkHeadingLink
neutral100
#0A0A0A
AA
inkHeadingLinkHover
#2F75D7
AA
inkHeadingLinkActive
#2F75D7
AAA
inkHeadingLinkVisited
neutral100
#0A0A0A
AA
inkNegative
red070
#D20600
AA
inkPositive
green080
#0A782A
inkNotice
amber080
#FF7200
AA
inkInformative
teal070
#128293
AA
inkBrand010
blue060
#0A68C1
inkBrand020
blue020
#D5EBFF

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
#F0F0F0
interface040
neutral030
#E4E4E4
interface050
neutral040
#CCCCCC
AAA
interface060
neutral100
#0A0A0A
AA
interfaceBrand010
blue060
#0A68C1
interfaceBrand020
blue020
#D5EBFF
AA
interfaceInformative010
teal070
#128293
interfaceInformative020
teal010
#E8F6F8
interfaceNotice010
amber080
#FF7200
interfaceNotice020
amber010
#FFEECF
AA
interfaceNegative010
red070
#D20600
interfaceNegative020
red010
#FFE6E5
AA
interfacePositive010
green080
#0A782A
interfacePositive020
green010
#E6FAEB
interfaceSkeleton010
neutral010
#FAFAFA
interfaceSkeleton020
neutral030
#E4E4E4
AAA
interfaceNeutral010
neutral080
#535353

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
#E6F4FF
interactivePrimary020
blue020
#D5EBFF
AA
interactivePrimary030
blue060
#0A68C1
AAA
interactivePrimary040
blue070
#02509B
AAA
interactivePrimary050
blue080
#01396E
interactiveSecondary010
neutral010
#FAFAFA
interactiveSecondary020
neutral020
#F0F0F0
AAA
interactiveSecondary030
neutral080
#535353
AAA
interactiveSecondary040
neutral090
#2E2E2E
AAA
interactiveSecondary050
neutral100
#0A0A0A
interactiveNegative010
red010
#FFE6E5
interactiveNegative020
red020
#FFB8B8
AA(L)
interactiveNegative030
red060
#EF1703
AA
interactiveNegative040
red070
#D20600
AAA
interactiveNegative050
red080
#A60100
interactivePositive010
green010
#E6FAEB
interactivePositive020
green020
#B8EFC8
AA(L)
interactivePositive030
green060
#23A248
AA(L)
interactivePositive040
green070
#148F39
AA
interactivePositive050
green080
#0A782A
AA
interactiveVisited010
purple050
#7547A3
interactiveDisabled010
neutral030
#E4E4E4