Colour - Intelligence Community Design System

Skip to page content

Show navigation section

ICDS uses tokens to manage colours, primarily to enable light and dark mode switching but will also enable custom theming.

The colour styles are built into the UI Kit . You should use these to help maintain consistency when you are building custom experiences.

The tokens are visible in Figma; click on Libraries in the colour-picker popup and select ICDS v3.0. The colours are displayed in the following hierarchy order:

Primitive

These are the fundamental building blocks for all colours used throughout the ICDS. Primitive tokens are grouped by base colour and contain several shades of that colour. These are the only tokens that contain a HEX value.

For example,Color/Red:800= #F15B4E

The primitive tokens are grouped as follows;

Architectural

--ic-architectural-20

#f9fafa

--ic-architectural-40

#f4f4f5

--ic-architectural-60

#f4f4f5

--ic-architectural-80

#e8e9eb

--ic-architectural-100

#e1e3e5

--ic-architectural-200

#c4c8cd

--ic-architectural-300

#a7acb3

--ic-architectural-400

#8a919b

--ic-architectural-500

#6c7580

--ic-architectural-600

#575e68

--ic-architectural-700

#41464d

--ic-architectural-750

#3b3e45

--ic-architectural-800

#2c2f34

--ic-architectural-850

#232629

--ic-architectural-900

#17191c

--ic-architectural-950

#0b0c0c

--ic-architectural-white

#ffffff

--ic-architectural-black

#000000

Architectural state layers

--ic-architectural-700-state-layer-10

#41464d1a

--ic-architectural-700-state-layer-20

#41464d33

--ic-architectural-700-state-layer-24

#41464d3d

--ic-architectural-700-state-layer-34

#41464d57

--ic-architectural-white-state-layer-10

#ffffff1a

--ic-architectural-white-state-layer-20

#ffffff33

--ic-architectural-white-state-layer-24

#ffffff3d

--ic-architectural-white-state-layer-25

#ffffff40

--ic-architectural-white-state-layer-30

#ffffff40

--ic-architectural-white-state-layer-34

#ffffff57

--ic-architectural-white-state-layer-40

#ffffff66

--ic-architectural-white-state-layer-50

#ffffff80

Blue

--ic-blue-0

#e1f0fc

--ic-blue-50

#c3e1f9

--ic-blue-100

#98c9f5

--ic-blue-200

#77b4f0

--ic-blue-300

#5da0ea

--ic-blue-400

#488fe3

--ic-blue-500

#377fdb

--ic-blue-600

#2a71d2

--ic-blue-700

#2064c8

--ic-blue-800

#1759bc

--ic-blue-900

#124db3

--ic-blue-1000

#0e43a8

--ic-blue-1100

#0b399c

--ic-blue-1200

#09308e

--ic-blue-1300

#07277e

--ic-blue-1400

#1b3c79

--ic-blue-1500

#122e63

--ic-blue-1600

#041144

--ic-blue-1700

#020b2e

Blue state layers

--ic-blue-800-state-layer-10

#1759bc1a

--ic-blue-800-state-layer-20

#1759bc33

--ic-blue-800-state-layer-24

#1759bc3d

--ic-blue-800-state-layer-30

#1759bc4d

--ic-blue-800-state-layer-34

#1759bc57

--ic-blue-800-state-layer-50

#1759bc80

Green

--ic-green-0

#e8fef3

--ic-green-50

#d1fde7

--ic-green-100

#b2fad6

--ic-green-200

#97f6c8

--ic-green-300

#81f2bb

--ic-green-400

#6dedaf

--ic-green-500

#5ce7a3

--ic-green-600

#4cdf98

--ic-green-700

#3ed78d

--ic-green-800

#31cd83

--ic-green-900

#26c278

--ic-green-1000

#1bb56c

--ic-green-1100

#12a661

--ic-green-1200

#0b9655

--ic-green-1300

#058449

--ic-green-1400

#00703c

--ic-green-1600

#0e462b

--ic-green-1700

#0e3020

Purple

--ic-purple-0

#f9f2ff

--ic-purple-50

#efdbff

--ic-purple-100

#e4c5ff

--ic-purple-200

#d5a2fe

--ic-purple-300

#c988fd

--ic-purple-400

#bf74fc

--ic-purple-500

#b764fb

--ic-purple-600

#b057f9

--ic-purple-700

#ab4df7

--ic-purple-800

#a645f5

--ic-purple-900

#a13ef2

--ic-purple-1000

#9c38ee

--ic-purple-1100

#9733e8

--ic-purple-1200

#902fe0

--ic-purple-1300

#882ad5

--ic-purple-1400

#7c25c2

--ic-purple-1800

#350f54

Red

--ic-red-0

#ffe4e3

--ic-red-50

#fec9c8

--ic-red-100

#fca19e

--ic-red-200

#f9837d

--ic-red-300

#f66d63

--ic-red-400

#f15b4e

--ic-red-500

#ec4e3d

--ic-red-600

#e54330

--ic-red-700

#dd3b25

--ic-red-800

#d4351c

--ic-red-900

#c92c16

--ic-red-1000

#bc2411

--ic-red-1100

#ad1e0e

--ic-red-1300

#8b1209

--ic-red-1500

#610a05

--ic-red-1700

#330403

Yellow

--ic-yellow-0

#fffbd8

--ic-yellow-50

#fff7b0

--ic-yellow-100

#ffed83

--ic-yellow-200

#ffe058

--ic-yellow-300

#ffd12e

--ic-yellow-400

#ffc107

--ic-yellow-500

#f8ae10

--ic-yellow-600

#f09d19

--ic-yellow-700

#e78f22

--ic-yellow-800

#dc832a

--ic-yellow-900

#d07932

--ic-yellow-1000

#c26f38

--ic-yellow-1100

#b3673c

--ic-yellow-1200

#a25e3f

--ic-yellow-1300

#8f553e

--ic-yellow-1400

#7a4c3c

--ic-yellow-1700

#342521

Semantic

These tokens carry meaning and explain the intent of their use. A semantic token will always refer to a primitive token for its colour.

For example,border/error/default = Color/Red/800 (This token is for a border in an error state.)

Semantic tokens are grouped as follows (Key = Colour name | CSS token | Light & Dark hex value );

Action

--ic-action-default

#1759bc

#488fe3

--ic-action-default-hover

#0b399c

#77b4f0

--ic-action-default-pressed

#07277e

#98c9f5

--ic-action-default-selected

#1759bc1a

#124db3

--ic-action-destructive

#d4351c

#f66d63

--ic-action-destructive-hover

#ad1e0e

#f15b4e

--ic-action-destructive-pressed

#8b1209

#dd3b25

--ic-action-neutral

#e1e3e5

#2c2f34

Background

--ic-color-background-primary

#ffffff

#2c2f34

--ic-color-background-secondary

#f9fafa

#41464d

--ic-color-background-active

#1759bc

#488fe3

--ic-color-background-hover

#c4c8cd

#2c2f34

--ic-color-background-pressed

#a7acb3

#41464d

--ic-color-background-disabled

#e8e9eb

#a7acb3

--ic-color-background-success

#00703c

#81f2bb

--ic-color-background-warning

#ffc107

#ffd12e

--ic-color-background-destructive

#d4351c

#f66d63

--ic-color-background-destructive-hover

#ad1e0e

#f15b4e

--ic-color-background-destructive-pressed

#8b1209

#dd3b25

--ic-color-background-neutral

#2c2f34

#0b0c0c

Border

--ic-color-border-neutral-default

#a7acb3

--ic-color-border-neutral-black

#000000

--ic-color-border-neutral-white

#ffffff

--ic-color-border-neutral-grey

#f4f4f5

#8a919b

--ic-color-border-neutral-hover

#6c7580

#c4c8cd

--ic-color-border-neutral-pressed

#575e68

#c4c8cd

--ic-color-border-neutral-disabled

#c4c8cd

#575e68

--ic-color-border-success

#00703c

#81f2bb

--ic-color-border-success-hover

#0e462b

#6dedaf

--ic-color-border-success-pressed

#0e3020

#4cdf98

--ic-color-border-warning

#d07932

#ffd12e

--ic-color-border-warning-hover

#b3673c

#ffc107

--ic-color-border-warning-pressed

#8f553e

#f8ae10

--ic-color-border-error

#d4351c

#f66d63

--ic-color-border-error-hover

#ad1e0e

#f15b4e

--ic-color-border-error-pressed

#8b1209

#dd3b25

--ic-color-border-action

#1759bc

#488fe3

--ic-color-border-action-hover

#0b399c

#77b4f0

--ic-color-border-action-pressed

#07277e

#98c9f5

Brand

--ic-brand-blue-primary

#1b3c79

--ic-brand-yellow-primary

#ffc93c

Classification

--ic-classification-not-set

#616161

--ic-classification-official

#2b71c7

--ic-classification-official-sensitive

#2b71c7

--ic-classification-secret

#f39c2c

--ic-classification-top-secret

#a00

Focus

--ic-color-focus-inner

#0044d7

--ic-color-focus-outer

#80a1e8

Icons

--ic-color-icon-grey

#c4c8cd

#6c7580

--ic-color-icon-hover

#c4c8cd

#2c2f34

--ic-color-icon-pressed

#a7acb3

#41464d

--ic-color-icon-disabled

#a7acb3

#6c7580

--ic-color-icon-action-default

#1759bc

#488fe3

--ic-color-icon-error

#f66d63

#d4351c

--ic-color-icon-brand

#ffffff

--ic-color-icon-neutral

#0b0c0c

--ic-color-icon-inverted

#ffffff

Keyline

--ic-color-keyline

#c4c8cd

--ic-color-keyline-light

#e1e3e5

--ic-color-keyline-lighten

#ffffff33

--ic-color-keyline-darken

#00000033

Link

--ic-color-hyperlink-default

#1759bc

#5da0ea

--ic-color-hyperlink-visited

#330072

#c988fd

--ic-color-hyperlink-visited-monochrome

#41464d

#b0b0b0

Status

--ic-status-success

#e8fef3

#0e3020

--ic-status-warning

#fffbd8

#7a4c3c

--ic-status-error

#ffe4e3

#610a05

--ic-status-anomalous

#efdbff

#350f54

--ic-status-info

#e1f0fc

#041144

--ic-status-unknown

#f4f4f5

#2c2f34

Text

--ic-color-text-primary

#0b0c0c

#ffffff

--ic-color-text-secondary

#41464d

#e1e3e5

--ic-color-text-tertiary

#6c7580

#c4c8cd

--ic-color-text-inverse

#fff

#0b0c0c

--ic-color-text-disabled

#c4c8cd

#575e68

Component

These tokens are assigned to components. They have both light and dark mode values, which allows the component to switch between the two colours easily. The component tokens always refer to semantic tokens. The name of the component token indicates:

The component it will be used with (e.g. text-field)
The attribute of the component it will be applied to (e.g. border)
The context (e.g. error)

For example;

Component token	Light mode	Dark mode
text-field-border-error	border/error/default	border/error/default-dark

Component tokens will provide the ability to introduce theming to specific components and their attributes.

If you do introduce theming, please ensure that your colours meet or exceed all accessibility requirements .

Accessibility considerations

These colours have been considered against a variety of accessibility and usability practices. This includes colour contrast, recognition, consistency and with various colour deficiencies.

Last reviewed 11 February 2025 .