Colour

Our colour system builds on the recognition of the JET brand colours to make the product interface more usable.

Alias tokens by theme

Alias tokens use different Global Tokens depending on which theme is being used.


Light theme alias tokens

Example Description Token name
  • Background Default
    $color-background-default
  • Background Subtle
    $color-background-subtle
  • Background Dark
    $color-background-dark
  • Container Default
    $color-container-default
  • Container Subtle
    $color-container-subtle
  • Container Strong
    $color-container-strong
  • Container Dark
    $color-container-dark
  • Container Inverse
    $color-container-inverse
  • Border Default
    $color-border-default
  • Border Subtle
    $color-border-subtle
  • Border Strong
    $color-border-strong
  • Border Inverse
    $color-border-inverse
  • Divider Default
    $color-divider-default
  • Divider Inverse
    $color-divider-inverse
  • Interactive Brand
    $color-interactive-brand
  • Interactive Primary
    $color-interactive-primary
  • Interactive Secondary
    $color-interactive-secondary
  • Interactive Inverse
    $color-interactive-inverse
  • Interactive Light
    $color-interactive-light
  • Interactive Form
    $color-interactive-form
  • Overlay
    $color-overlay
  • Support Error
    $color-support-error
  • Support Warning
    $color-support-warning
  • Support Positive
    $color-support-positive
  • Support Info
    $color-support-info
  • Support Neutral
    $color-support-neutral
  • Support Error 02
    $color-support-error-02
  • Support Warning 02
    $color-support-warning-02
  • Support Positive 02
    $color-support-positive-02
  • Support Info 02
    $color-support-info-02
  • Support Info Inverse
    $color-support-info-inverse
  • Support Positive Inverse
    $color-support-positive-inverse
  • Support Brand 01
    $color-support-brand-01
  • Support Brand 02
    $color-support-brand-02
  • Support Brand 03
    $color-support-brand-03
  • Support Brand 04
    $color-support-brand-04
  • Support Brand 05
    $color-support-brand-05
  • Support Brand 06
    $color-support-brand-06
  • Support Brand 07
    $color-support-brand-07
  • Content Default
    $color-content-default
  • Content Subdued
    $color-content-subdued
  • Content Interactive Brand
    $color-content-interactive-brand
  • Content Interactive Light
    $color-content-interactive-light
  • Content Interactive Primary
    $color-content-interactive-primary
  • Content Interactive Secondary
    $color-content-interactive-secondary
  • Content Interactive Tertiary
    $color-content-interactive-tertiary
  • Content Interactive Inverse
    $color-content-interactive-inverse
  • Content Interactive Dark
    $color-content-interactive-dark
  • Content Interactive Error
    $color-content-interactive-error
  • Content Light
    $color-content-light
  • Content Inverse
    $color-content-inverse
  • Content Link
    $color-content-link
  • Content Link Distinct
    $color-content-link-distinct
  • Content Link Light
    $color-content-link-light
  • Content Link Inverse
    $color-content-link-inverse
  • Content Link Visited
    $color-content-link-visited
  • Content Link Visited Inverse
    $color-content-link-visited-inverse
  • Content Error
    $color-content-error
  • Content Positive
    $color-content-positive
  • Content Disabled
    $color-content-disabled
  • Content Brand
    $color-content-brand
  • Hover 01
    $color-hover-01
  • Hover 02
    $color-hover-02
  • Hover 01 Light
    $color-hover-01-light
  • Hover 01 Dark
    $color-hover-01-dark
  • Active 01
    $color-active-01
  • Active 02
    $color-active-02
  • Active 01 Light
    $color-active-01-light
  • Active 01 Dark
    $color-active-01-dark
  • Focus
    $color-focus
  • Disabled 01
    $color-disabled-01
  • Disabled 01 Inverse
    $color-disabled-01-inverse
  • Skeleton 01
    $color-skeleton-01
  • Skeleton 02
    $color-skeleton-02
  • Skeleton 03
    $color-skeleton-03
  • External Bta Background
    $color-external-bta-background
  • External Bta Text
    $color-external-bta-text