Colour - Intelligence Community Design System

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

--ic-architectural-40

--ic-architectural-60

--ic-architectural-80

--ic-architectural-100

--ic-architectural-200

--ic-architectural-300

--ic-architectural-400

--ic-architectural-500

--ic-architectural-600

--ic-architectural-700

--ic-architectural-750

--ic-architectural-800

--ic-architectural-850

--ic-architectural-900

--ic-architectural-950

--ic-architectural-white

--ic-architectural-black

Architectural state layers

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

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

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

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

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

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

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

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

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

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

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

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

Blue

--ic-blue-0

--ic-blue-50

--ic-blue-100

--ic-blue-200

--ic-blue-300

--ic-blue-400

--ic-blue-500

--ic-blue-600

--ic-blue-700

--ic-blue-800

--ic-blue-900

--ic-blue-1000

--ic-blue-1100

--ic-blue-1200

--ic-blue-1300

--ic-blue-1400

--ic-blue-1500

--ic-blue-1600

--ic-blue-1700

--ic-blue-1800

Blue state layers

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

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

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

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

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

--ic-blue-800-state-layer-40

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

Brand

--ic-brand-blue-primary

Dark blue

--ic-dark-blue-0

--ic-dark-blue-20

--ic-dark-blue-40

--ic-dark-blue-60

--ic-dark-blue-80

--ic-dark-blue-100

--ic-dark-blue-500

--ic-dark-blue-700

--ic-dark-blue-800

--ic-dark-blue-900

Focus

--ic-color-focus-inner

--ic-color-focus-outer

Green

--ic-green-0

--ic-green-50

--ic-green-100

--ic-green-200

--ic-green-300

--ic-green-400

--ic-green-500

--ic-green-600

--ic-green-700

--ic-green-800

--ic-green-900

--ic-green-1000

--ic-green-1100

--ic-green-1200

--ic-green-1300

--ic-green-1400

--ic-green-1600

--ic-green-1700

--ic-green-1800

Light blue

--ic-light-blue-0

--ic-light-blue-100

--ic-light-blue-600

--ic-light-blue-1000

--ic-light-blue-1400

Link

--ic-color-link-default

--ic-color-link-hover

--ic-color-link-visited

--ic-color-link-visited-contrast

Purple

--ic-purple-0

--ic-purple-50

--ic-purple-100

--ic-purple-200

--ic-purple-300

--ic-purple-400

--ic-purple-500

--ic-purple-600

--ic-purple-700

--ic-purple-800

--ic-purple-900

--ic-purple-1000

--ic-purple-1100

--ic-purple-1200

--ic-purple-1300

--ic-purple-1400

--ic-purple-1800

Red

--ic-red-0

--ic-red-50

--ic-red-100

--ic-red-200

--ic-red-300

--ic-red-400

--ic-red-500

--ic-red-600

--ic-red-700

--ic-red-800

--ic-red-900

--ic-red-1000

--ic-red-1100

--ic-red-1300

--ic-red-1500

--ic-red-1700

--ic-red-1800

Yellow

--ic-yellow-0

--ic-yellow-50

--ic-yellow-100

--ic-yellow-200

--ic-yellow-300

--ic-yellow-400

--ic-yellow-500

--ic-yellow-600

--ic-yellow-700

--ic-yellow-800

--ic-yellow-900

--ic-yellow-1000

--ic-yellow-1100

--ic-yellow-1200

--ic-yellow-1300

--ic-yellow-1400

--ic-yellow-1700

--ic-yellow-1800

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, with colours displaying the light and dark tokens where necessary;

Action

--ic-action-default-light

--ic-action-default-dark

--ic-action-default-hover-light

--ic-action-default-hover-dark

--ic-action-default-pressed-light

--ic-action-default-pressed-dark

--ic-action-default-selected-light

--ic-action-default-selected-dark

--ic-action-destructive-light

--ic-action-destructive-dark

--ic-action-destructive-hover-light

--ic-action-destructive-hover-dark

--ic-action-destructive-pressed-light

--ic-action-destructive-pressed-dark

--ic-action-monochrome

--ic-action-monochrome-dark

--ic-action-monochrome-hover

--ic-action-monochrome-hover-dark

--ic-action-monochrome-pressed

--ic-action-monochrome-pressed-dark

--ic-action-neutral-light

--ic-action-neutral-dark

Background

--ic-color-background-primary-light

--ic-color-background-primary-dark

--ic-color-background-secondary-light

--ic-color-background-secondary-dark

--ic-color-background-hover-default

--ic-color-background-hover-light

--ic-color-background-hover-dark

--ic-color-background-pressed-default

--ic-color-background-pressed-light

--ic-color-background-pressed-dark

--ic-color-background-selected

--ic-color-background-active-light

--ic-color-background-active-dark

--ic-color-background-neutral-light

--ic-color-background-neutral-dark

--ic-color-background-success-light

--ic-color-background-success-dark

--ic-color-background-warning-light

--ic-color-background-warning-dark

--ic-color-background-destructive-light

--ic-color-background-destructive-dark

--ic-color-background-destructive-hover-light

--ic-color-background-destructive-hover-dark

--ic-color-background-destructive-pressed-light

--ic-color-background-destructive-pressed-dark

--ic-color-background-disabled-default

--ic-color-background-disabled-dark

Border

--ic-color-border-action-default

--ic-color-border-action-default-dark

--ic-color-border-action-hover-light

--ic-color-border-action-hover-dark

--ic-color-border-action-pressed-light

--ic-color-border-action-pressed-dark

--ic-color-border-error-default

--ic-color-border-error-default-dark

--ic-color-border-error-hover-light

--ic-color-border-error-hover-dark

--ic-color-border-error-pressed-light

--ic-color-border-error-pressed-dark

--ic-color-border-neutral-default

--ic-color-border-neutral-default-dark

--ic-color-border-neutral-hover-default

--ic-color-border-neutral-hover-dark

--ic-color-border-neutral-pressed-default

--ic-color-border-neutral-pressed-dark

--ic-color-border-neutral-disabled-light

--ic-color-border-neutral-disabled-dark

--ic-color-border-neutral-grey-light

--ic-color-border-neutral-grey-dark

--ic-color-border-success-default

--ic-color-border-success-default-dark

--ic-color-border-success-hover-light

--ic-color-border-success-hover-dark

--ic-color-border-success-pressed-light

--ic-color-border-success-pressed-dark

--ic-color-border-warning-default

--ic-color-border-warning-default-dark

--ic-color-border-warning-hover-light

--ic-color-border-warning-hover-dark

--ic-color-border-warning-pressed-light

--ic-color-border-warning-pressed-dark

Classification

--ic-classification-not-set

--ic-classification-official

--ic-classification-official-sensitive

--ic-classification-secret

--ic-classification-top-secret

Icon

--ic-color-icon-brand

--ic-color-icon-neutral

--ic-color-icon-inverted

--ic-color-icon-hover-light

--ic-color-icon-hover-dark

--ic-color-icon-pressed-light

--ic-color-icon-pressed-dark

--ic-color-icon-disabled-light

--ic-color-icon-disabled-dark

--ic-color-icon-disabled-mid

--ic-color-icon-grey-default

--ic-color-icon-grey-light

--ic-color-icon-grey-lighter

--ic-color-icon-grey-dark

--ic-color-icon-grey-darker

--ic-color-icon-action-default-light

--ic-color-icon-action-default-dark

--ic-color-icon-action-hover

--ic-color-icon-action-hover-dark

--ic-color-icon-action-pressed

--ic-color-icon-action-pressed-dark

--ic-color-icon-error-light

--ic-color-icon-error-dark

--ic-color-icon-action-dark

Keyline

--ic-color-keyline

--ic-color-keyline-light

--ic-color-keyline-lighten

--ic-color-keyline-darken

Link

--ic-color-hyperlink-default-light

--ic-color-hyperlink-default-dark

--ic-color-hyperlink-visited-light

--ic-color-hyperlink-visited-dark

--ic-color-hyperlink-visited-monochrome-light

--ic-color-hyperlink-visited-monochrome-dark

--ic-color-hyperlink-brand

Status

--ic-status-anomalous-default

--ic-status-anomalous-default-dm

--ic-status-anomalous-contrast

--ic-status-anomalous-light

--ic-status-anomalous-dark

--ic-status-error-default

--ic-status-error-default-dm

--ic-status-error-contrast

--ic-status-error-light

--ic-status-error-dark

--ic-status-error-dark-dm

--ic-status-error-outlined

--ic-status-info-default

--ic-status-info-contrast

--ic-status-info-light

--ic-status-info-light-dm

--ic-status-info-dark

--ic-status-info-dark-dm

--ic-status-unknown-default

--ic-status-unknown-default-dm

--ic-status-unknown-contrast

--ic-status-unknown-light

--ic-status-unknown-light-dm

--ic-status-unknown-mid

--ic-status-unknown-dark

--ic-status-unknown-dark-dm

--ic-status-unknown-outlined

--ic-status-success-default

--ic-status-success-default-dm

--ic-status-success-contrast

--ic-status-success-contrast-dm

--ic-status-success-light

--ic-status-success-dark

--ic-status-success-outlined

--ic-status-warning-default

--ic-status-warning-default-dm

--ic-status-warning-contrast

--ic-status-warning-light

--ic-status-warning-dark

--ic-status-warning-dark-dm

--ic-status-warning-outlined

Text

--ic-color-brand-text

--ic-color-text-primary-light

--ic-color-text-primary-dark

--ic-color-text-secondary-light

--ic-color-text-secondary-dark

--ic-color-text-tertiary-light

--ic-color-text-tertiary-dark

--ic-color-text-inverted

--ic-color-text-disabled-light

--ic-color-text-disabled-dark

--ic-color-text-disabled-mid

--ic-color-text-inactive

--ic-color-text-action-light

--ic-color-text-action-dark

--ic-color-text-action-hover-light

--ic-color-text-action-hover-dark

--ic-color-text-action-pressed-light

--ic-color-text-action-pressed-dark

--ic-color-text-error-dark

--ic-color-text-error-light

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 7 April 2025 .