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
Action destructive default
--ic-action-destructive
--ic-action-destructive-hover
Action destructive pressed
--ic-action-destructive-pressed
--ic-action-monochrome-default
--ic-action-monochrome-default-hover
Action monochrome pressed
--ic-action-monochrome-default-pressed
--ic-action-neutral
Background
--ic-color-background-primary
--ic-color-background-secondary
--ic-color-background-hover-default
Background hover monochrome
--ic-color-background-hover
--ic-color-background-pressed-default
Background pressed monochrome
--ic-color-background-pressed
--ic-color-background-selected
--ic-color-background-active
--ic-color-background-neutral
--ic-color-background-success
--ic-color-background-warning
--ic-color-background-destructive
Background destructive hover
--ic-color-background-destructive-hover
Background destructive pressed
--ic-color-background-destructive-pressed
--ic-color-background-disabled
Border
--ic-color-border-action
--ic-color-border-action-hover
--ic-color-border-action-pressed
--ic-color-border-error
--ic-color-border-error-hover
--ic-color-border-error-pressed
--ic-color-border-neutral
--ic-color-border-neutral-hover
--ic-color-border-neutral-pressed
--ic-color-border-neutral-disabled
--ic-color-border-neutral-grey
--ic-color-border-success
--ic-color-border-success-hover
--ic-color-border-success-pressed
--ic-color-border-warning
--ic-color-border-warning-hover
--ic-color-border-warning-pressed
Classification
--ic-classification-not-set
--ic-classification-official
Classification official-sensitive
--ic-classification-official-sensitive
--ic-classification-secret
Classification top-secret
--ic-classification-top-secret
Icon
--ic-color-icon-brand
--ic-color-icon-neutral
--ic-color-icon-inverted
--ic-color-icon-hover
--ic-color-icon-pressed
--ic-color-icon-disabled
--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
--ic-color-icon-action-default-hover
--ic-color-icon-action-default-pressed
--ic-color-icon-error
--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
--ic-color-hyperlink-visited
Hyperlink visited monochrome
--ic-color-hyperlink-visited-monochrome
--ic-color-hyperlink-brand
Status
--ic-status-anomalous-default-color
Status anomalous contrast
--ic-status-anomalous-contrast
--ic-status-anomalous
--ic-status-error-default-color
--ic-status-error-contrast
--ic-status-error-light
--ic-status-error-dark-color
--ic-status-error-outlined
--ic-status-info-default
--ic-status-info-contrast
--ic-status-info-light-color
--ic-status-info-dark-color
--ic-status-neutral
--ic-status-unknown-contrast
--ic-status-neutral-light
--ic-status-unknown-mid
--ic-status-neutral-dark
--ic-status-unknown-outlined
--ic-status-success-default-color
--ic-status-success-contrast-color
--ic-status-success
--ic-status-success-outlined
--ic-status-warning-default-color
--ic-status-warning-contrast
--ic-status-warning-light
--ic-status-warning-dark-color
--ic-status-warning-outlined
Text
--ic-color-brand-text
--ic-color-text-primary
--ic-color-text-secondary
--ic-color-text-tertiary
--ic-color-text-inverted
--ic-color-text-disabled
--ic-color-text-disabled-mid
--ic-color-text-inactive
--ic-color-text-action
--ic-color-text-action-hover
--ic-color-text-action-pressed
--ic-color-text-error
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.