Colour

Elementary

Basic alias colour tokens for the basic building blocks of our products, including backgrounds, borders and dividers.

Page Backgrounds

• Background default Default page background Global token used: $color-mozzarella-100
  $color-dark-background-default
• Background subtle Subtle page background Global token used: $color-mozzarella-80
  $color-dark-background-subtle
• Background dark High contrast page background Global token used: $color-white
  $color-dark-background-dark
• Overlay Translucent background overlay Global token used: $color-black @55%
  $color-dark-overlay

Container Backgrounds

• Container default Default container background Global token used: $color-mozzarella-90
  $color-dark-container-default
• Container subtle Subtle container background Global token used: $color-mozzarella-80
  $color-dark-container-subtle
• Container strong Strong container background Global token used: $color-mozzarella-70
  $color-dark-container-strong
• Container dark Dark container background Global token used: $color-mozzarella-90
  $color-dark-container-dark
• Container inverse Inverse container background Global token used: $color-white
  $color-dark-container-inverse
• Container inverse alternative Alternative Inverse container background Global token used: $color-mozzarella-70
  $color-dark-container-inverse-alternative

Interactive Backgrounds

• Interactive brand Brand interactive colour used mainly in button and CTA backgrounds, accent fills and borders Global token used: $color-orange
  $color-dark-interactive-brand
• Interactive primary Primary interactive colour used mainly in button and CTA backgrounds, accent fills and borders Global token used: $color-white
  $color-dark-interactive-primary
• Interactive secondary Primary interactive colour used mainly in button and CTA backgrounds Global token used: $color-mozzarella-75
  $color-dark-interactive-secondary
• Interactive inverse Inverse interactive colour used mainly in button and CTA backgrounds Global token used: $color-mozzarella-90
  $color-dark-interactive-inverse
• Interactive light Light interactive colour used on dark backgrounds Global token used: $color-white
  $color-dark-interactive-light
• Interactive form Field background on $background-default Global token used: $color-mozzarella-50
  $color-dark-interactive-form
• Interactive error Error interactive colour, used mainly in Destructive buttons, accent fills and borders Global token used: $color-red-40
  $color-dark-interactive-error

Borders

• Border default Default border Global token used: $color-mozzarella-70
  $color-dark-border-default
• Border subtle Subtle border Global token used: $color-mozzarella-75
  $color-dark-border-subtle
• Border strong Higher contrast border Global token used: $color-mozzarella-60
  $color-dark-border-strong
• Border inverse Border on inverse or dark coloured backgrounds Global token used: $color-mozzarella-20
  $color-dark-border-inverse
• Border selected Border for selected state of the box Global token used: $color-mozzarella-30
  $color-dark-border-selected
• Border selected brand Used to indicate a box or container is selected. Make sure you use a 2px border. Global token used: $color-orange
  $color-dark-border-selected-brand

Dividers

• Divider default Divider for use above default and light-coloured backgrounds Global token used: $color-white @20%
  $color-dark-divider-default
• Divider inverse Divider for use above inverse and dark-coloured backgrounds Global token used: $color-black @8%
  $color-dark-divider-inverse

Supportive Feedback

Alias colour tokens used to add meaning and brand our products.

Feedback

• Support neutral Neutral; used for neutral messaging and alerts Global token used: $color-mozzarella-100
  $color-dark-support-neutral
• Support error Error; High impact messaging Global token used: $color-red-40
  $color-dark-support-error
• Support error 02 Low contrast version of $support-error Global token used: $color-red-90
  $color-dark-support-error-02
• Support warning Warning; Moderate impact messaging Global token used: $color-yellow
  $color-dark-support-warning
• Support warning 02 Low contrast version of $support-warning Global token used: $color-yellow-90
  $color-dark-support-warning-02
• Support positive Success; positive messaging Global token used: $color-green-30
  $color-dark-support-positive
• Support positive 02 Low contrast version of $support-positive Global token used: $color-green-90
  $color-dark-support-positive-02
• Support positive inverse High contrast version of $support-positive to be used over dark backgrounds Global token used: $color-green
  $color-dark-support-positive-inverse
• Support info Information; instructional messaging Global token used: $color-blue-30
  $color-dark-support-info
• Support info 02 Low contrast version of $support-info Global token used: $color-blue-90
  $color-dark-support-info-02
• Support info inverse High contrast version of $support-info to be used over dark backgrounds Global token used: $color-blue
  $color-dark-support-info-inverse
• Support neutral persistent Low contrast $support-01 for subtle surfaces + effects. Retains global token value in dark theme. Global token used: $color-mozzarella-20
  $color-dark-support-neutral-persistent
• Support error inverse High contrast support error color used on top of $container-inverse Global token used: $color-red
  $color-dark-support-error-inverse
• Support warning inverse High contrast support error color used on top of $container-inverse Global token used: $color-turmeric-60
  $color-dark-support-warning-inverse

Brand

• Support brand 01 Special; special attention messaging Global token used: $color-orange-30
  $color-dark-support-brand-01
• Support brand 02 Low contrast version of $support-brand-01 for subtle surfaces and effects Global token used: $color-orange-90
  $color-dark-support-brand-02
• Support brand 03 Discretionary brand surfaces and effects Global token used: $color-blue-25
  $color-dark-support-brand-03
• Support brand 03 subtle Discretionary brand surfaces and effects Global token used: $color-cupcake-90
  $color-dark-support-brand-03-subtle
• Support brand 04 Discretionary brand surfaces and effects Global token used: $color-red-25
  $color-dark-support-brand-04
• Support brand 04 subtle Discretionary brand surfaces and effects Global token used: $color-berry-90
  $color-dark-support-brand-04-subtle
• Support brand 05 Discretionary brand surfaces and effects Global token used: $color-yellow
  $color-dark-support-brand-05
• Support brand 05 subtle Discretionary brand surfaces and effects Global token used: $color-turmeric-80
  $color-dark-support-brand-05-subtle
• Support brand 06 Discretionary brand surfaces and effects Global token used: $color-purple
  $color-dark-support-brand-06
• Support brand 06 subtle Discretionary brand surfaces and effects Global token used: $color-aubergine-80
  $color-dark-support-brand-06-subtle
• Support brand 07 Discretionary brand surfaces and effects Global token used: $color-orange-55
  $color-dark-support-brand-07
• Support brand 07 subtle Discretionary brand surfaces and effects Global token used: $color-tomato-90
  $color-dark-support-brand-07-subtle

Content

Alias colour tokens used for text and icons only.

Static

• Content default Default text and icon colour Global token used: $color-white
  $color-dark-content-default
• Content subdued Subdued text and icon colour used for secondary text and input labels Global token used: $color-charcoal-30
  $color-dark-content-subdued
• Content light Text and icon colour used on dark backgrounds Global token used: $color-white
  $color-dark-content-light
• Content dark Text and icon colour used on light backgrounds Global token used: $color-charcoal-80
  $color-dark-content-dark
• Content inverse Text and icon colour used on inverse backgrounds Global token used: $color-charcoal-80
  $color-dark-content-inverse
• Content error Text and icon colour for error messaging Global token used: $color-red-30
  $color-dark-content-error
• Content placeholder Text colour for placeholder text Global token used: $color-charcoal-50
  $color-dark-content-placeholder
• Content positive Text and icon colour for success messaging Global token used: $color-green-30
  $color-dark-content-positive
• Content disabled Text and icon colour to mark them as disabled Global token used: $color-charcoal-50
  $color-dark-content-disabled
• Content brand Brand text and icon colour Global token used: $color-orange-30
  $color-dark-content-brand

Interactive

• Content interactive brand Brand colour for interactive text and icons Global token used: $color-orange-30
  $color-dark-content-interactive-brand
• Content interactive light Persistent colour for interactive text and icons on dark backgrounds. Uses the same global token in all themes Global token used: $color-white
  $color-dark-content-interactive-light
• Content interactive primary Colour for the text and icons of primary interactive elements Global token used: $color-charcoal-80
  $color-dark-content-interactive-primary
• Content interactive secondary Colour for the text and icons of secondary interactive elements Global token used: $color-white
  $color-dark-content-interactive-secondary
• Content interactive tertiary Colour for the text and icons of tertiary interactive elements Global token used: $color-white
  $color-dark-content-interactive-tertiary
• Content interactive inverse Colour for interactive text and icons on inverse backgrounds Global token used: $color-white
  $color-dark-content-interactive-inverse
• Content interactive dark Persistent colour for interactive text and icons on light backgrounds. Uses the same global token in all themes Global token used: $color-charcoal-80
  $color-dark-content-interactive-dark
• Content interactive error Colour for the text and icons of error-specific interactive elements Global token used: $color-red-30
  $color-dark-content-interactive-error
• Content interactive subdued Subdued text and icon colour used for text and icons Global token used: $color-charcoal-40
  $color-dark-content-interactive-subdued

Link

• Content link Text and icon colour for links Global token used: $color-white
  $color-dark-content-link
• Content link distinct Text and icon colour for high visibility links Global token used: $color-blue-30
  $color-dark-content-link-distinct
• Content link light Persistent text and icon colour for dark backgrounds. Uses the same global token in all themes Global token used: $color-white
  $color-dark-content-link-light
• Content link inverse Text and icon colour for inverse backgrounds Global token used: $color-charcoal-80
  $color-dark-content-link-inverse
• Content link visited Text and icon colour for visited links Global token used: $color-system-purple-10
  $color-dark-content-link-visited
• Content link visited inverse Text and icon colour for visited links on inverse backgrounds Global token used: $color-system-purple
  $color-dark-content-link-visited-inverse

Reactive

Alias colour tokens used to represent state changes and loading animations in components.

States

• Hover 01 Opacity effect for hover states on default backgrounds Global token used: $color-hover-lighten
  $color-dark-hover-01
• Hover 02 Opacity effect for hover states on inverse backgrounds Global token used: $color-hover-darken
  $color-dark-hover-02
• Hover 02 light Persistent opacity effect for hover states on dark backgrounds. Uses the same global token in all themes Global token used: $color-hover-lighten
  $color-dark-hover-02-light
• Hover 01 dark Persistent opacity effect for hover states on light backgrounds. Uses the same global token in all themes Global token used: $color-hover-darken
  $color-dark-hover-01-dark
• Active 01 Opacity effect for active states on default backgrounds Global token used: $color-active-lighten
  $color-dark-active-01
• Active 02 Opacity effect for active states on inverse backgrounds Global token used: $color-active-darken
  $color-dark-active-02
• Active 02 light Opacity effect for active states on dark backgrounds. Uses the same global token in all themes Global token used: $color-active-lighten
  $color-dark-active-02-light
• Active 01 dark Opacity effect for active states on light backgrounds. Uses the same global token in all themes Global token used: $color-active-darken
  $color-dark-active-01-dark
• Resting 0% opacity used for resting hover and active overlays Global token used: $color-black
  $color-dark-resting
• Disabled 01 Colour used for disabled UI elements Global token used: $color-mozzarella-80
  $color-dark-disabled-01
• Disabled 01 inverse Colour used for disabled UI elements on inverse backgrounds Global token used: $color-mozzarella-20
  $color-dark-disabled-01-inverse
• Focus inner Colour used for outline focus states Global token used: $color-black
  $color-dark-focus-inner
• Focus outer Colour used for outline focus states Global token used: $color-blue-30
  $color-dark-focus-outer

Skeleton

• Skeleton 01 Colour used for skeletons used as placeholders for UI elements while loading Global token used: $color-mozzarella-80
  $color-dark-skeleton-01
• Skeleton 02 Colour used for skeletons used as placeholders for UI elements while loading Global token used: $color-mozzarella-75
  $color-dark-skeleton-02
• Skeleton 03 Colour used for skeletons used as placeholders for UI elements while loading Global token used: $color-mozzarella-90
  $color-dark-skeleton-03
• Skeleton shimmer 01 Shimmer effect applied on top of Skeleton-01 when loading elements Global token used: $color-mozzarella-75
  $color-dark-skeleton-shimmer-01
• Skeleton shimmer 02 Shimmer effect applied on top of Skeleton-02 when loading elements Global token used: $color-mozzarella-70
  $color-dark-skeleton-shimmer-02
• Skeleton shimmer 03 Shimmer effect applied on top of Skeleton-03 when loading elements Global token used: $color-mozzarella-80
  $color-dark-skeleton-shimmer-03