Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Foundations

Colours

Colours help express brand identity and convey meaning to users.

Overview

NewsKit lets you use bespoke colour palettes while encouraging accessibility.

The design system applies colours through well-defined rules at both the theme and component level. These rules help establish a visual tone, indicate interaction and communicate meaning - while maintaining your brand identity.

Palette colours

Palette colours represent your brand’s colours.

They’re linked to contextual colour tokens, which apply specific meaning (context).

Consider whether a palette colour is best applied directly to an interface or as a contextual colour.

Swatches

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

  • Regular sized text on this colour will have a contrast ratio of 4.5:1 or over

  • Regular sized text on this colour will have a contrast ratio of 3:1 or over

  • Regular sized text on this colour will be inaccessible

The WCAG AA standards define regular and large text sizes as:

Regular
Font size is at least 19px with a regular font weight or heavier.

Large
Font size is at least 19px with a bold font weight or 24px with regular font weight.

blue010
#ECF1FF
blue020
#D5E0FC
blue030
#AEBFFF
blue040
#8BA6F6
blue050
#708DE9
AA(L)
blue060
#3358CC
AA
blue070
#254CAC
AAA
blue080
#14328D
AAA
blue090
#0C285F
AAA
blue100
#071E3C
AAA
teal010
#E6F4F6
teal020
#C7E7EA
teal030
#97D0D6
teal040
#5EB8C0
teal050
#289FAB
AA(L)
teal060
#017582
AA
teal070
#005B65
AAA
teal080
#004249
AAA
teal090
#002B30
AAA
teal100
#001314
AAA
red010
#FEECEC
red020
#FED8D8
red030
#FEB3B3
red040
#FE8888
red050
#FB5959
AA(L)
red060
#D60000
AA
red070
#A90000
AAA
red080
#820000
AAA
red090
#550000
AAA
red100
#3A0000
AAA
green010
#E5F4EA
green020
#C8E4D0
green030
#95CAA3
green040
#6DB681
green050
#41A05B
AA(L)
green060
#007B22
AA
green070
#00601A
AAA
green080
#004514
AAA
green090
#002D0D
AAA
green100
#001D08
AAA
amber010
#FFEDE1
amber020
#FDDCC6
amber030
#FEB788
amber040
#F79247
amber050
#CD6900
AA(L)
amber060
#A75500
AA
amber070
#804200
AAA
amber080
#5D2F00
AAA
amber090
#3C1F00
AAA
amber100
#1D0D02
AAA
neutral010
#F1F1F1
neutral020
#E2E2E2
neutral030
#C6C6C6
neutral040
#ABABAB
neutral050
#919191
AA(L)
neutral060
#6A6A6A
AA
neutral070
#525252
AAA
neutral080
#3B3B3B
AAA
neutral090
#262626
AAA
neutral100
#111111
AAA
purple010
#EFF0FF
purple020
#DFE0FE
purple030
#C0C2FC
purple040
#A3A3FB
purple050
#8883F6
AA(L)
purple060
#6454E3
AA
purple070
#4C33CC
AAA
purple080
#37239C
AAA
purple090
#231668
AAA
purple100
#0F0936
AAA
blackTint010
#0000001A
AAA
blackTint020
#00000033
AAA
blackTint030
#0000004D
AAA
blackTint040
#00000066
AAA
blackTint050
#00000080
AAA
blackTint060
#00000099
AAA
blackTint070
#000000B3
AAA
blackTint080
#000000CC
AAA
blackTint090
#000000E6
AAA
black
#000000
AAA
whiteTint010
#FFFFFF1A
AAA
whiteTint020
#FFFFFF33
AAA
whiteTint030
#FFFFFF4D
AAA
whiteTint040
#FFFFFF66
AAA
whiteTint050
#FFFFFF80
AAA
whiteTint060
#FFFFFF99
AAA
whiteTint070
#FFFFFFB3
AAA
whiteTint080
#FFFFFFCC
AAA
whiteTint090
#FFFFFFE6
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)
focus010
#3768FB
AA
transparent
transparent
AAA

Contextual colours

Select contextual colours from the palette colours and apply specific functions or purposes. There are three categories of contextual colours: ink, interface and interactive.

Ink

Apply ink colours to typography and iconography. There are several variations, each with a specific purpose:

Use ‘common’ ink tokens to style most generic text and icons, including headlines, subheadlines and body text.

ColourColour tokenToken valueCommon uses

Interface

Apply interface colours to fills and borders on often-static background UI elements, including page backgrounds and dividers.

Use ‘common’ interface tokens to style most structural, often static, component layers within a design, including card and page backgrounds.

ColourColour tokenToken valueCommon uses

Interactive

Apply interactive colours to indicate and display interactions of components. This includes components such as buttons, links and switches.

‘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

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

Code example

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

Choose your contextual colours carefully so important UI elements like text and icons are legible without compromising your aesthetic.

Avoid yellow and orange for notices or warnings. Pairing these colours with white text does not allow for sufficient contrast. Aim for contrast ratios that meet WCAG AA standards.

Contrast for text and images of text

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

Large text

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

Link text

Link text must have a minimum contrast of 3:1 between link text colour and the surrounding non-link text colour. Link text within body text (inline link) should be underlined.

Incidental text

Text, and images of text, that are part of an inactive component, purely decorative or part of a picture containing significant other visual content don’t have contrast requirements.

Logotypes

Text that’s part of a logo doesn’t have contrast requirements.

Contrast for non-text elements

User interface components and graphical objects must have a minimum contrast of 3:1 against adjacent colours.

Design tokens

Design tokens are used in the place of hard-coded values to allow a scalable and cohesive system.

Learn more about design tokens

Design tokens

Design tokens are used in the place of hard-coded values to allow a scalable and cohesive system.