Colour

latest

Arc colours are systematic and accessible. There are two colour pathways, light and dark.

Brand

These colours form the cornerstone of the BT brand.

#5514b4

Indigo BtColorBrandIndigo

The brand colour.

#ff80ff

Pink BtColorBrandPink

The secondary brand colour. Usually reserved for the dark pathway.

Gradients

Gradients bring energy to the otherwise flat brand colours.

#5514b4 50%, #7e2ec6

Gradient indigo BtGradientBrandIndigo

The gradient version of the brand indigo.

#ff80ff 50%, #d666ed

Gradient pink BtGradientBrandPink

The gradient version of the brand pink. Only used for interactive elements in the dark pathway.

Colour pathways

Arc's light and dark colour pathways make content stand out and can help guide users on their journey. Each pathway contains a background colour palette and a WCAG 2.1 AA accessible foreground colour palette.

This palette is derived from the core brand colours, the brand gradients and an extended raw palette. Use only these colours when building websites with Arc.

Light backgrounds

#ffffff

White BtColorBackgroundWhite

#f7f7f7

Lighter BtColorBackgroundLighter

#f0f0f0

Light BtColorBackgroundLight

#fff2f0, #f5eefa

Coral BtGradientBackgroundCoral

#f5eefa, #eafcff

Turquoise BtGradientBackgroundTurquoise

Dark backgrounds

#5514b4 50%, #7e2ec6

Brand BtGradientDarkPathwayBackgroundBrand

#5514b4

Brand (flat) BtColorDarkPathwayBackgroundBrand

#2a2a2a

Darker BtColorDarkPathwayBackgroundDarker

#434343

Dark BtColorDarkPathwayBackgroundDark

Foreground palette

#2a2a2a

#ffffff

Body text BtColorBodyText

The default colour for all text.

#434343

#e3e3e3

Supporting text BtColorSupportingText

A slightly de-emphasised text colour for less important text.

#6b6b6b

#c8c8c8

Muted text BtColorMutedText

The most de-emphasised text colour, whilst still have sufficient contrast for accessibility.

#5514b4

#ffffff

Heading brand BtColorHeadingBrand

Brand colour for headings. Reverts to white on the dark pathway.

#f200f5

#ff80ff

Heading proposition BtColorHeadingProposition

Propositions are used as a two-tone treatment to highlight key words.

#5514b4 50%, #7e2ec6

#ff80ff 50%, #d666ed

Interactive BtGradientInteractive

The default gradient for interactive elements like links and buttons.

#5514b4

#ff80ff

Interactive (flat) BtColorInteractive

The fallback colour for interactive elements like links and buttons. Use this when it's not possible to use a gradient.

#3f187f

#ffb7fe

Interactive hover BtColorInteractiveHover

The default colour for the hover state on interactive elements like links and buttons.

#2a1c4a

#ffe4ff

Interactive active BtColorInteractiveActive

The default colour for the active state on interactive elements like links and buttons.

#ffffff

#000000

Button foreground BtColorButtonForeground

The colour for text placed on a solid button.

#8449cc

#d4bfec

Focus outline BtColorFocusOutline

The outline colour to use when focusing interactive elements.

#2a1c4a

#ffe4ff

Selected BtColorSelected

The colour for "selected" elements, like checkboxes or radios.

#434343

#f0f0f0

Disabled foreground BtColorDisabledForeground

The colour for text, borders and other foreground elements in a disabled interactive element.

#d9d9d9

#6b6b6b

Disabled background BtColorDisabledBackground

The background colour to use when an interactive element is disabled. For example, used as the background colour of a form input.

#c8c8c8

#aaaaaa

Border default BtColorBorderDefault

The default border colour.

#2a2a2a

#ffffff

Border input BtColorBorderInput

The border colour for input elements.

#da020f

#fa9590

Status red BtColorStatusRed

A colour used to indicate a negative or dangerous state to the user, like errors in forms.

#ffe9ec

#ab0000

Status red complementary BtColorStatusRedComplementary

A complementary colour to status red, which can be used as a background colour.

#ffa200

#ffc501

Status amber BtColorStatusAmber

A colour used to warn or alert the user. Reverts to Grey 09 on the light pathway to provide sufficient contrast.

#088003

#75c26c

Status green BtColorStatusGreen

A colour used to indicate a positive state to the user.

Components

The Surface component

Place content on a Surface to automatically switch colour pathways.

View the Surface component

White SurfaceThis content switches pathway automatically.

Brand SurfaceThis content switches pathway automatically.

In Figma

Use Figma colour styles to access the Arc colour palette:

Use the Light Pathway and Dark Pathway colours when designing on the colour pathways.
Use the Raw colours for illustrations and data visualisations.
Core Brand colours are included for reference.

View the Figma setup guide

Usage guidelines

Avoid raw colour palettes for UI

Use the colour pathways to build interfaces, avoiding the raw colour palettes.

Heading brand

Coral 02

Avoid custom colours

Introducing new colours risks confusing the user and introducing colour contrast problems. It also means experiences will not be on-brand. Avoid using new colours anywhere in your design.

hotpink

Don't mix pathway colours

Mixing foreground and background colours across both pathways will result in inaccessible colour combinations. Only use the correct foreground colour for your chosen background colour.

This proposition fails WCAG2.1 AA on a light surface.

Adjust the gradient angle as necessary.

It's okay to adjust the angle of gradients depending on your design, but keep an eye on the contrast. Most of the time you'll want to maximise contrast with your content, which usually sits on the left-hand side. If you're using Arc components, the angle of the gradients they use will be predefined.

Hello world

Use a fallback colour for gradients

Gradients should always have an appropriate flat fallback colour, to be used if the gradient doesn't load. For indigo gradients, use flat indigo as a fallback.

Hover over me

Other colours

Extended

Extensions to the core brand palette, for reference only. These aren't currently used within Arc, but are included for completeness.

#ec9b9b

Coral BtColorCoral

#1ec8e6

Turquoise BtColorTurquoise

Raw

10-point colour spectrums that underpin the colour pathways, for reference only.

Avoid using the raw palette when building UI unless absolutely necessary. Exceptions include data visualisations and illustrations.

Indigo

#efe5f7

#d4bfec

#c2a4e6

#996cd5

#8449cc

#712dc2

#6724bd

#5514b4

08 Brand BtColor08

#3f187f

#2a1c4a

Pink

#ffe4ff

#ffb7fe

#ff80ff

03 Brand BtColor03

#fd51ff

#f200f5

#dc00e0

#ca00dc

#b202d6

#9e02c9

#7e0091

Coral

#f5c8c8

#f1b4b4

#ec9b9b

03 Extended BtColor03

#e88484

#e47070

#de5454

#d83232

#c22525

#aa2020

#9b0015

Turquoise

#b4ecf8

#80dff3

#4bd2ec

#1ec8e6

04 Extended BtColor04

#04bbe0

#02a5ce

#028fb2

#027591

#00566e

#003e55

Grey

#f7f7f7

#f0f0f0

#e3e3e3

#d9d9d9

#c8c8c8

#aaaaaa

#808080

#6b6b6b

#434343

#2a2a2a

Green

#e6f4e5

#c4e4bf

#9ed296

#75c26c

#56b54b

#34a827

#219417

#088003

08 Status BtColor08

#036c01

#005900

Amber

#fffee7

#fffbc0

#fef795

#fcf567

#f9ed3e

#fae423

#ffd502

#ffc501

08 Status BtColor08

#ffa200

#ff7f00

Red

#ffe9ec

#ffc8cb

#fa9590

#ed6460

#f63a38

#f91f14

#eb0113

#da020f

08 Status BtColor08

#c90104

#ab0000

Brand​

Gradients​

Colour pathways​

Light backgrounds​

Dark backgrounds​

Foreground palette​

Components​

The Surface component

In Figma​

Usage guidelines​

Avoid raw colour palettes for UI

Avoid custom colours

Don't mix pathway colours

Adjust the gradient angle as necessary.

Use a fallback colour for gradients

Other colours​

Extended​

Raw​

Indigo​

Pink​

Coral​

Turquoise​

Grey​

Green​

Amber​

Red​

Brand

Gradients

Colour pathways

Light backgrounds

Dark backgrounds

Foreground palette

Components

In Figma

Usage guidelines

Other colours

Extended

Raw

Indigo

Pink

Coral

Turquoise

Grey

Green

Amber

Red