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

--ic-action-default-hover

--ic-action-default-pressed

--ic-action-default-selected

--ic-action-destructive

--ic-action-destructive-hover

--ic-action-destructive-pressed

--ic-action-monochrome-default