Colours

List of our colour tokens for reference.

Foreground

Foreground tones are used for text and icons.

neutral

#1a2a3a

neutralInverted

#ffffff

muted

#646f84

mutedInverted

hsla(0, 0%, 100%, 0.75)

link

#00a87b

disabled

#98a2b8

fieldAccent

#00c28d

placeholder

#646f84

accent

#8b5cf6

primary

#00c28d

primaryHover

#00a87b

primaryActive

#108663

secondary

#ffbb66

secondaryHover

#ffaa44

secondaryActive

#e58f27

caution

#ad541a

critical

#c81b0e

info

#106fb8

positive

#327e59

Background

Background tones are used for all of our background colours (anything from a button up to the entire page.)

muted

#646f84

disabled

#98a2b8

backdrop

hsla(0, 0%, 0%, 0.4)

body

#fafcfe

surface

#ffffff

surfaceMuted

#fafcfe

surfacePressed

#c7cedb

fieldAccent

#1a2a3a

input

#ffffff

inputPressed

#f1f4fb

inputDisabled

#fafcfe

accent

#8b5cf6

accentMuted

#f7f5ff

neutral

#ffffff

neutralLow

#fafcfe

primary

#00a87b

primaryLow

#edfaf5

primaryMuted

#f5fdf9

secondary

#ffaa44

secondaryLow

#fff0e0

secondaryMuted

#fef5eb

caution

#be5c1c

cautionLow

#fff5eb

cautionMuted

#fefaf6

critical

#e61e32

criticalLow

#fff4f4

criticalMuted

#fef8f8

info

#0677d6

infoLow

#f3f8fc

infoMuted

#f6fafd

positive

#2c855d

positiveLow

#f0f9f1

positiveMuted

#f6fbf8

infoLight

#e3ecf4

criticalLight

#f2e3e5

positiveLight

#e9f1ed

cautionLight

#f2eae5

Background Interactions

Background interactions are colours used for indicating hover or active states.

none

#ffffff

primaryActive

#108663

primaryHover

#00c28d

primaryLowHover

#edfaf5

primaryLowActive

#c8eada

secondaryActive

#e58f27

secondaryHover

#ffbb66

secondaryLowHover

#fff5eb

secondaryLowActive

#fdddc4

neutralHover

#f1f4fb

neutralActive

#dce1ec

neutralLowHover

#f1f4fb

neutralLowActive

#dce1ec

cautionLowHover

#fdddc4

cautionLowActive

#face9b

criticalActive

#c81b0e

criticalHover

#f53841

criticalLowHover

#ffdad7

criticalLowActive

#fec1b5

infoLowHover

#d0e4ff

infoLowActive

#b7d2f4

positiveHover

#1e9c65

positiveActive

#327e59

positiveLowHover

#cde9d2

positiveLowActive

#b1dab9

Border

Border tones are used for border colours and for the Divider component. These colours tend to have more contrast with the background tones so they stand out.

neutral

#1a2a3a

standard

#dce1ec

standardInverted

#ffffff

field

#dce1ec

fieldHover

#c7cedb

fieldAccent

#00c28d

fieldDisabled

#c7cedb

primary

#00c28d

primaryHover

#00a87b

primaryActive

#108663

secondary

#ffbb66

secondaryHover

#ffaa44

secondaryActive

#e58f27

accent

#8b5cf6

accentMuted

#997dd8

caution

#be5c1c

cautionMuted

#ffaa44

critical

#e61e32

criticalMuted

#f53841

info

#0677d6

infoMuted

#2b8aed

positive

#2c855d

positiveMuted

#1e9c65

Status

Status tones are used to highlight the semantic meaning of a component. A good example of this is the IndicatorDot in our Badge component.

accent

#8b5cf6

caution

#ffaa44

critical

#f53841

info

#2b8aed

neutral

#1a2a3a

positive

#1e9c65