Link to Fluid's Microsoft Teams channel Link to the support page

Design Tokens

Design tokens are a tech-agnostic way to store variables. Variable naming convention follows CTI (Category / Type / Item) structure.

Colors

Background Colors

Background primary

Css variable Preview light Preview dark
var(--nj-color-background-primary)
--nj-color-base-neutral-0
--nj-color-base-neutral-0
var(--nj-color-background-primary-hovered)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-primary-focused)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-primary-pressed)
--nj-color-base-neutral-300
--nj-color-base-neutral-300
var(--nj-color-background-primary-selected)
--nj-color-base-brand-200
--nj-color-base-brand-200

Background secondary

Css variable Preview light Preview dark
var(--nj-color-background-secondary)
--nj-color-base-neutral-100
--nj-color-base-neutral-100
var(--nj-color-background-secondary-hovered)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-secondary-focused)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-secondary-pressed)
--nj-color-base-neutral-300
--nj-color-base-neutral-300
var(--nj-color-background-secondary-transparent)
--nj-color-base-neutral-alpha-100
--nj-color-base-neutral-alpha-100
var(--nj-color-background-secondary-transparent-hovered)
--nj-color-base-neutral-alpha-200
--nj-color-base-neutral-alpha-200
var(--nj-color-background-secondary-transparent-focused)
--nj-color-base-neutral-alpha-200
--nj-color-base-neutral-alpha-200
var(--nj-color-background-secondary-transparent-pressed)
--nj-color-base-neutral-alpha-300
--nj-color-base-neutral-alpha-300

Background tertiary

Css variable Preview light Preview dark
var(--nj-color-background-tertiary)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-tertiary-hovered)
--nj-color-base-neutral-300
--nj-color-base-neutral-300
var(--nj-color-background-tertiary-focused)
--nj-color-base-neutral-300
--nj-color-base-neutral-300
var(--nj-color-background-tertiary-pressed)
--nj-color-base-neutral-400
--nj-color-base-neutral-400
var(--nj-color-background-tertiary-transparent)
--nj-color-base-neutral-alpha-200
--nj-color-base-neutral-alpha-200
var(--nj-color-background-tertiary-transparent-hovered)
--nj-color-base-neutral-alpha-300
--nj-color-base-neutral-alpha-300
var(--nj-color-background-tertiary-transparent-focused)
--nj-color-base-neutral-alpha-300
--nj-color-base-neutral-alpha-300
var(--nj-color-background-tertiary-transparent-pressed)
--nj-color-base-neutral-alpha-400
--nj-color-base-neutral-alpha-400

Background neutral

Css variable Preview light Preview dark
var(--nj-color-background-neutral)
--nj-color-base-neutral-600
--nj-color-base-neutral-600
var(--nj-color-background-neutral-hovered)
--nj-color-base-neutral-700
--nj-color-base-neutral-700
var(--nj-color-background-neutral-focused)
--nj-color-base-neutral-700
--nj-color-base-neutral-700
var(--nj-color-background-neutral-pressed)
--nj-color-base-neutral-800
--nj-color-base-neutral-800

Background transparent

Css variable Preview light Preview dark
var(--nj-color-background-transparent)
--nj-color-base-neutral-alpha-0
--nj-color-base-neutral-alpha-0
var(--nj-color-background-transparent-hovered)
--nj-color-base-neutral-alpha-200
--nj-color-base-neutral-alpha-200
var(--nj-color-background-transparent-focused)
--nj-color-base-neutral-alpha-200
--nj-color-base-neutral-alpha-200
var(--nj-color-background-transparent-pressed)
--nj-color-base-neutral-alpha-300
--nj-color-base-neutral-alpha-300
var(--nj-color-background-transparent-selected)
--nj-color-base-brand-alpha-200
--nj-color-base-brand-alpha-200

Background inverse

Css variable Preview light Preview dark
var(--nj-color-background-inverse)
--nj-color-base-neutral-0
--nj-color-base-neutral-0
var(--nj-color-background-inverse-hovered)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-inverse-focused)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-background-inverse-pressed)
--nj-color-base-neutral-300
--nj-color-base-neutral-300
var(--nj-color-background-inverse-transparent)
--nj-color-base-neutral-alpha-0-dark-value
--nj-color-base-neutral-alpha-0-light-value
var(--nj-color-background-inverse-transparent-hovered)
--nj-color-base-neutral-alpha-300-dark-value
--nj-color-base-neutral-alpha-300-light-value
var(--nj-color-background-inverse-transparent-focused)
--nj-color-base-neutral-alpha-300-dark-value
--nj-color-base-neutral-alpha-300-light-value
var(--nj-color-background-inverse-transparent-pressed)
--nj-color-base-neutral-alpha-400-dark-value
--nj-color-base-neutral-alpha-400-light-value
var(--nj-color-background-inverse-contrast)
--nj-color-base-neutral-alpha-200-dark-value
--nj-color-base-neutral-alpha-200-light-value

Background high-contrast

Css variable Preview light Preview dark
var(--nj-color-background-high-contrast)
--nj-color-base-neutral-900
--nj-color-base-neutral-900

Background backdrop

Css variable Preview light Preview dark
var(--nj-color-background-backdrop)
--nj-color-base-neutral-alpha-500
--nj-color-base-neutral-alpha-300

Background brand

Deeper nested variable, display coming soon ...

Css variable Preview light Preview dark
var(--nj-color-background-brand)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-background-brand-secondary)
--nj-color-base-brand-100
--nj-color-base-brand-100
var(--nj-color-background-brand-tertiary)
--nj-color-base-brand-200
--nj-color-base-brand-200
var(--nj-color-background-brand-tertiary-hovered)
--nj-color-base-brand-300
--nj-color-base-brand-300
var(--nj-color-background-brand-tertiary-focused)
--nj-color-base-brand-300
--nj-color-base-brand-300
var(--nj-color-background-brand-tertiary-pressed)
--nj-color-base-brand-400
--nj-color-base-brand-400
var(--nj-color-background-brand-hovered)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-background-brand-focused)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-background-brand-pressed)
--nj-color-base-brand-800
--nj-color-base-brand-800
var(--nj-color-background-brand-transparent)
--nj-color-base-brand-alpha-0
--nj-color-base-brand-alpha-0
var(--nj-color-background-brand-transparent-hovered)
--nj-color-base-brand-alpha-200
--nj-color-base-brand-alpha-200
var(--nj-color-background-brand-transparent-focused)
--nj-color-base-brand-alpha-200
--nj-color-base-brand-alpha-200
var(--nj-color-background-brand-transparent-pressed)
--nj-color-base-brand-alpha-300
--nj-color-base-brand-alpha-300
var(--nj-color-background-brand-high-contrast)
--nj-color-base-brand-900
--nj-color-base-brand-900

Background danger

Css variable Preview light Preview dark
var(--nj-color-background-danger)
--nj-color-base-danger-600
--nj-color-base-danger-600
var(--nj-color-background-danger-secondary)
--nj-color-base-danger-100
--nj-color-base-danger-100
var(--nj-color-background-danger-tertiary)
--nj-color-base-danger-200
--nj-color-base-danger-200
var(--nj-color-background-danger-tertiary-hovered)
--nj-color-base-danger-300
--nj-color-base-danger-300
var(--nj-color-background-danger-tertiary-focused)
--nj-color-base-danger-300
--nj-color-base-danger-300
var(--nj-color-background-danger-tertiary-pressed)
--nj-color-base-danger-400
--nj-color-base-danger-400
var(--nj-color-background-danger-tertiary-transparent)
--nj-color-base-danger-alpha-200
--nj-color-base-danger-alpha-200
var(--nj-color-background-danger-hovered)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-background-danger-pressed)
--nj-color-base-danger-800
--nj-color-base-danger-800
var(--nj-color-background-danger-focused)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-background-danger-transparent)
--nj-color-base-danger-alpha-0
--nj-color-base-danger-alpha-0
var(--nj-color-background-danger-transparent-hovered)
--nj-color-base-danger-alpha-200
--nj-color-base-danger-alpha-200
var(--nj-color-background-danger-transparent-focused)
--nj-color-base-danger-alpha-200
--nj-color-base-danger-alpha-200
var(--nj-color-background-danger-transparent-pressed)
--nj-color-base-danger-alpha-300
--nj-color-base-danger-alpha-300
var(--nj-color-background-danger-transparent-selected)
--nj-color-base-danger-alpha-200
--nj-color-base-danger-alpha-200

Background success

Css variable Preview light Preview dark
var(--nj-color-background-success)
--nj-color-base-success-600
--nj-color-base-success-600
var(--nj-color-background-success-secondary)
--nj-color-base-success-100
--nj-color-base-success-100
var(--nj-color-background-success-tertiary)
--nj-color-base-success-200
--nj-color-base-success-200
var(--nj-color-background-success-tertiary-hovered)
--nj-color-base-success-300
--nj-color-base-success-300
var(--nj-color-background-success-tertiary-focused)
--nj-color-base-success-300
--nj-color-base-success-300
var(--nj-color-background-success-tertiary-pressed)
--nj-color-base-success-400
--nj-color-base-success-400
var(--nj-color-background-success-tertiary-transparent)
--nj-color-base-success-alpha-200
--nj-color-base-success-alpha-200
var(--nj-color-background-success-hovered)
--nj-color-base-success-700
--nj-color-base-success-700
var(--nj-color-background-success-pressed)
--nj-color-base-success-800
--nj-color-base-success-800
var(--nj-color-background-success-transparent)
--nj-color-base-success-alpha-0
--nj-color-base-success-alpha-0
var(--nj-color-background-success-transparent-hovered)
--nj-color-base-success-alpha-200
--nj-color-base-success-alpha-200
var(--nj-color-background-success-transparent-focused)
--nj-color-base-success-alpha-200
--nj-color-base-success-alpha-200
var(--nj-color-background-success-transparent-pressed)
--nj-color-base-success-alpha-300
--nj-color-base-success-alpha-300
var(--nj-color-background-success-transparent-selected)
--nj-color-base-success-alpha-200
--nj-color-base-success-alpha-200

Background warning

Css variable Preview light Preview dark
var(--nj-color-background-warning)
--nj-color-base-warning-400
--nj-color-base-warning-600
var(--nj-color-background-warning-secondary)
--nj-color-base-warning-100
--nj-color-base-warning-100
var(--nj-color-background-warning-tertiary)
--nj-color-base-warning-200
--nj-color-base-warning-200
var(--nj-color-background-warning-tertiary-hovered)
--nj-color-base-warning-300
--nj-color-base-warning-300
var(--nj-color-background-warning-tertiary-focused)
--nj-color-base-warning-300
--nj-color-base-warning-300
var(--nj-color-background-warning-tertiary-pressed)
--nj-color-base-warning-400
--nj-color-base-warning-400
var(--nj-color-background-warning-tertiary-transparent)
--nj-color-base-warning-alpha-200
--nj-color-base-warning-alpha-200
var(--nj-color-background-warning-hovered)
--nj-color-base-warning-500
--nj-color-base-warning-700
var(--nj-color-background-warning-pressed)
--nj-color-base-warning-600
--nj-color-base-warning-800
var(--nj-color-background-warning-transparent)
--nj-color-base-warning-alpha-0
--nj-color-base-warning-alpha-0
var(--nj-color-background-warning-transparent-hovered)
--nj-color-base-warning-alpha-200
--nj-color-base-warning-alpha-200
var(--nj-color-background-warning-transparent-focused)
--nj-color-base-warning-alpha-200
--nj-color-base-warning-alpha-200
var(--nj-color-background-warning-transparent-pressed)
--nj-color-base-warning-alpha-300
--nj-color-base-warning-alpha-300
var(--nj-color-background-warning-transparent-selected)
--nj-color-base-warning-alpha-200
--nj-color-base-warning-alpha-200

Background discovery

Css variable Preview light Preview dark
var(--nj-color-background-discovery)
--nj-color-base-discovery-600
--nj-color-base-discovery-600
var(--nj-color-background-discovery-secondary)
--nj-color-base-discovery-100
--nj-color-base-discovery-100
var(--nj-color-background-discovery-tertiary)
--nj-color-base-discovery-200
--nj-color-base-discovery-200
var(--nj-color-background-discovery-tertiary-hovered)
--nj-color-base-discovery-300
--nj-color-base-discovery-300
var(--nj-color-background-discovery-tertiary-focused)
--nj-color-base-discovery-300
--nj-color-base-discovery-300
var(--nj-color-background-discovery-tertiary-pressed)
--nj-color-base-discovery-400
--nj-color-base-discovery-400
var(--nj-color-background-discovery-tertiary-transparent)
--nj-color-base-discovery-alpha-200
--nj-color-base-discovery-alpha-200
var(--nj-color-background-discovery-hovered)
--nj-color-base-discovery-500
--nj-color-base-discovery-700
var(--nj-color-background-discovery-pressed)
--nj-color-base-discovery-600
--nj-color-base-discovery-800
var(--nj-color-background-discovery-transparent)
--nj-color-base-discovery-alpha-0
--nj-color-base-discovery-alpha-0
var(--nj-color-background-discovery-transparent-hovered)
--nj-color-base-discovery-alpha-200
--nj-color-base-discovery-alpha-200
var(--nj-color-background-discovery-transparent-focused)
--nj-color-base-discovery-alpha-200
--nj-color-base-discovery-alpha-200
var(--nj-color-background-discovery-transparent-pressed)
--nj-color-base-discovery-alpha-300
--nj-color-base-discovery-alpha-300
var(--nj-color-background-discovery-transparent-selected)
--nj-color-base-discovery-alpha-200
--nj-color-base-discovery-alpha-200

Background information

Css variable Preview light Preview dark
var(--nj-color-background-information)
--nj-color-base-information-600
--nj-color-base-information-600
var(--nj-color-background-information-secondary)
--nj-color-base-information-100
--nj-color-base-information-100
var(--nj-color-background-information-tertiary)
--nj-color-base-information-200
--nj-color-base-information-200
var(--nj-color-background-information-tertiary-hovered)
--nj-color-base-information-300
--nj-color-base-information-300
var(--nj-color-background-information-tertiary-focused)
--nj-color-base-information-300
--nj-color-base-information-300
var(--nj-color-background-information-tertiary-pressed)
--nj-color-base-information-400
--nj-color-base-information-400
var(--nj-color-background-information-tertiary-transparent)
--nj-color-base-information-alpha-200
--nj-color-base-information-alpha-200
var(--nj-color-background-information-hovered)
--nj-color-base-information-500
--nj-color-base-information-700
var(--nj-color-background-information-pressed)
--nj-color-base-information-600
--nj-color-base-information-800
var(--nj-color-background-information-transparent)
--nj-color-base-information-alpha-0
--nj-color-base-information-alpha-0
var(--nj-color-background-information-transparent-hovered)
--nj-color-base-information-alpha-200
--nj-color-base-information-alpha-200
var(--nj-color-background-information-transparent-focused)
--nj-color-base-information-alpha-200
--nj-color-base-information-alpha-200
var(--nj-color-background-information-transparent-pressed)
--nj-color-base-information-alpha-300
--nj-color-base-information-alpha-300
var(--nj-color-background-information-transparent-selected)
--nj-color-base-information-alpha-200
--nj-color-base-information-alpha-200

Background pink

Css variable Preview light Preview dark
var(--nj-color-background-pink)
--nj-color-palette-pink-600
--nj-color-palette-pink-600
var(--nj-color-background-pink-secondary)
--nj-color-palette-pink-100
--nj-color-palette-pink-100
var(--nj-color-background-pink-tertiary)
--nj-color-palette-pink-200
--nj-color-palette-pink-200
var(--nj-color-background-pink-tertiary-hovered)
--nj-color-palette-pink-300
--nj-color-palette-pink-300
var(--nj-color-background-pink-tertiary-focused)
--nj-color-palette-pink-300
--nj-color-palette-pink-300
var(--nj-color-background-pink-tertiary-pressed)
--nj-color-palette-pink-400
--nj-color-palette-pink-400
var(--nj-color-background-pink-hovered)
--nj-color-palette-pink-700
--nj-color-palette-pink-700
var(--nj-color-background-pink-pressed)
--nj-color-palette-pink-800
--nj-color-palette-pink-800

Background red

Css variable Preview light Preview dark
var(--nj-color-background-red)
--nj-color-palette-red-600
--nj-color-palette-red-600
var(--nj-color-background-red-secondary)
--nj-color-palette-red-100
--nj-color-palette-red-100
var(--nj-color-background-red-tertiary)
--nj-color-palette-red-200
--nj-color-palette-red-200
var(--nj-color-background-red-tertiary-hovered)
--nj-color-palette-red-300
--nj-color-palette-red-300
var(--nj-color-background-red-tertiary-focused)
--nj-color-palette-red-300
--nj-color-palette-red-300
var(--nj-color-background-red-tertiary-pressed)
--nj-color-palette-red-400
--nj-color-palette-red-400
var(--nj-color-background-red-hovered)
--nj-color-palette-red-700
--nj-color-palette-red-700
var(--nj-color-background-red-pressed)
--nj-color-palette-red-800
--nj-color-palette-red-800

Background orange

Css variable Preview light Preview dark
var(--nj-color-background-orange)
--nj-color-palette-orange-600
--nj-color-palette-orange-600
var(--nj-color-background-orange-secondary)
--nj-color-palette-orange-100
--nj-color-palette-orange-100
var(--nj-color-background-orange-tertiary)
--nj-color-palette-orange-200
--nj-color-palette-orange-200
var(--nj-color-background-orange-tertiary-hovered)
--nj-color-palette-orange-300
--nj-color-palette-orange-300
var(--nj-color-background-orange-tertiary-focused)
--nj-color-palette-orange-300
--nj-color-palette-orange-300
var(--nj-color-background-orange-tertiary-pressed)
--nj-color-palette-orange-400
--nj-color-palette-orange-400
var(--nj-color-background-orange-hovered)
--nj-color-palette-orange-700
--nj-color-palette-orange-700
var(--nj-color-background-orange-pressed)
--nj-color-palette-orange-800
--nj-color-palette-orange-800

Background yellow

Css variable Preview light Preview dark
var(--nj-color-background-yellow)
--nj-color-palette-yellow-300
--nj-color-palette-yellow-700
var(--nj-color-background-yellow-secondary)
--nj-color-palette-yellow-100
--nj-color-palette-yellow-100
var(--nj-color-background-yellow-tertiary)
--nj-color-palette-yellow-200
--nj-color-palette-yellow-200
var(--nj-color-background-yellow-tertiary-hovered)
--nj-color-palette-yellow-300
--nj-color-palette-yellow-300
var(--nj-color-background-yellow-tertiary-focused)
--nj-color-palette-yellow-300
--nj-color-palette-yellow-300
var(--nj-color-background-yellow-tertiary-pressed)
--nj-color-palette-yellow-400
--nj-color-palette-yellow-400
var(--nj-color-background-yellow-hovered)
--nj-color-palette-yellow-700
--nj-color-palette-yellow-700
var(--nj-color-background-yellow-pressed)
--nj-color-palette-yellow-800
--nj-color-palette-yellow-800

Background green

Css variable Preview light Preview dark
var(--nj-color-background-green)
--nj-color-palette-green-600
--nj-color-palette-green-600
var(--nj-color-background-green-secondary)
--nj-color-palette-green-100
--nj-color-palette-green-100
var(--nj-color-background-green-tertiary)
--nj-color-palette-green-200
--nj-color-palette-green-200
var(--nj-color-background-green-tertiary-hovered)
--nj-color-palette-green-300
--nj-color-palette-green-300
var(--nj-color-background-green-tertiary-focused)
--nj-color-palette-green-300
--nj-color-palette-green-300
var(--nj-color-background-green-tertiary-pressed)
--nj-color-palette-green-400
--nj-color-palette-green-400
var(--nj-color-background-green-hovered)
--nj-color-palette-green-700
--nj-color-palette-green-700
var(--nj-color-background-green-pressed)
--nj-color-palette-green-800
--nj-color-palette-green-800

Background grey

Css variable Preview light Preview dark
var(--nj-color-background-grey)
--nj-color-palette-grey-600
--nj-color-palette-grey-600
var(--nj-color-background-grey-secondary)
--nj-color-palette-grey-100
--nj-color-palette-grey-100
var(--nj-color-background-grey-tertiary)
--nj-color-palette-grey-200
--nj-color-palette-grey-200
var(--nj-color-background-grey-tertiary-hovered)
--nj-color-palette-grey-300
--nj-color-palette-grey-300
var(--nj-color-background-grey-tertiary-focused)
--nj-color-palette-grey-300
--nj-color-palette-grey-300
var(--nj-color-background-grey-tertiary-pressed)
--nj-color-palette-grey-400
--nj-color-palette-grey-400
var(--nj-color-background-grey-hovered)
--nj-color-palette-grey-700
--nj-color-palette-grey-700
var(--nj-color-background-grey-pressed)
--nj-color-palette-grey-800
--nj-color-palette-grey-800

Background blue

Css variable Preview light Preview dark
var(--nj-color-background-blue)
--nj-color-palette-blue-600
--nj-color-palette-blue-600
var(--nj-color-background-blue-secondary)
--nj-color-palette-blue-100
--nj-color-palette-blue-100
var(--nj-color-background-blue-tertiary)
--nj-color-palette-blue-200
--nj-color-palette-blue-200
var(--nj-color-background-blue-tertiary-hovered)
--nj-color-palette-blue-300
--nj-color-palette-blue-300
var(--nj-color-background-blue-tertiary-focused)
--nj-color-palette-blue-300
--nj-color-palette-blue-300
var(--nj-color-background-blue-tertiary-pressed)
--nj-color-palette-blue-400
--nj-color-palette-blue-400
var(--nj-color-background-blue-hovered)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-background-blue-pressed)
--nj-color-palette-blue-800
--nj-color-palette-blue-800

Background ultramarine

Css variable Preview light Preview dark
var(--nj-color-background-ultramarine)
--nj-color-palette-ultramarine-600
--nj-color-palette-ultramarine-600
var(--nj-color-background-ultramarine-secondary)
--nj-color-palette-ultramarine-100
--nj-color-palette-ultramarine-100
var(--nj-color-background-ultramarine-tertiary)
--nj-color-palette-ultramarine-200
--nj-color-palette-ultramarine-200
var(--nj-color-background-ultramarine-tertiary-hovered)
--nj-color-palette-ultramarine-300
--nj-color-palette-ultramarine-300
var(--nj-color-background-ultramarine-tertiary-focused)
--nj-color-palette-ultramarine-300
--nj-color-palette-ultramarine-300
var(--nj-color-background-ultramarine-tertiary-pressed)
--nj-color-palette-ultramarine-400
--nj-color-palette-ultramarine-400
var(--nj-color-background-ultramarine-hovered)
--nj-color-palette-ultramarine-700
--nj-color-palette-ultramarine-700
var(--nj-color-background-ultramarine-pressed)
--nj-color-palette-ultramarine-800
--nj-color-palette-ultramarine-800

Background purple

Css variable Preview light Preview dark
var(--nj-color-background-purple)
--nj-color-palette-purple-600
--nj-color-palette-purple-600
var(--nj-color-background-purple-secondary)
--nj-color-palette-purple-100
--nj-color-palette-purple-100
var(--nj-color-background-purple-tertiary)
--nj-color-palette-purple-200
--nj-color-palette-purple-200
var(--nj-color-background-purple-tertiary-hovered)
--nj-color-palette-purple-300
--nj-color-palette-purple-300
var(--nj-color-background-purple-tertiary-focused)
--nj-color-palette-purple-300
--nj-color-palette-purple-300
var(--nj-color-background-purple-tertiary-pressed)
--nj-color-palette-purple-400
--nj-color-palette-purple-400
var(--nj-color-background-purple-hovered)
--nj-color-palette-purple-700
--nj-color-palette-purple-700
var(--nj-color-background-purple-pressed)
--nj-color-palette-purple-800
--nj-color-palette-purple-800

Background teal

Css variable Preview light Preview dark
var(--nj-color-background-teal)
--nj-color-palette-teal-600
--nj-color-palette-teal-600
var(--nj-color-background-teal-secondary)
--nj-color-palette-teal-100
--nj-color-palette-teal-100
var(--nj-color-background-teal-tertiary)
--nj-color-palette-teal-200
--nj-color-palette-teal-200
var(--nj-color-background-teal-tertiary-hovered)
--nj-color-palette-teal-300
--nj-color-palette-teal-300
var(--nj-color-background-teal-tertiary-focused)
--nj-color-palette-teal-300
--nj-color-palette-teal-300
var(--nj-color-background-teal-tertiary-pressed)
--nj-color-palette-teal-400
--nj-color-palette-teal-400
var(--nj-color-background-teal-hovered)
--nj-color-palette-teal-700
--nj-color-palette-teal-700
var(--nj-color-background-teal-pressed)
--nj-color-palette-teal-800
--nj-color-palette-teal-800

Background lime

Css variable Preview light Preview dark
var(--nj-color-background-lime)
--nj-color-palette-lime-600
--nj-color-palette-lime-600
var(--nj-color-background-lime-secondary)
--nj-color-palette-lime-100
--nj-color-palette-lime-100
var(--nj-color-background-lime-tertiary)
--nj-color-palette-lime-200
--nj-color-palette-lime-200
var(--nj-color-background-lime-tertiary-hovered)
--nj-color-palette-lime-300
--nj-color-palette-lime-300
var(--nj-color-background-lime-tertiary-focused)
--nj-color-palette-lime-300
--nj-color-palette-lime-300
var(--nj-color-background-lime-tertiary-pressed)
--nj-color-palette-lime-400
--nj-color-palette-lime-400
var(--nj-color-background-lime-hovered)
--nj-color-palette-lime-700
--nj-color-palette-lime-700
var(--nj-color-background-lime-pressed)
--nj-color-palette-lime-800
--nj-color-palette-lime-800

Border colors

Border minimal

Css variable Preview light Preview dark
var(--nj-color-border-minimal)
--nj-color-base-neutral-200
--nj-color-base-neutral-200

Border subtle

Css variable Preview light Preview dark
var(--nj-color-border-subtle)
--nj-color-base-neutral-300
--nj-color-base-neutral-300
var(--nj-color-border-subtle-transparent)
--nj-color-base-neutral-alpha-300
--nj-color-base-neutral-alpha-300

Border moderate

Css variable Preview light Preview dark
var(--nj-color-border-moderate)
--nj-color-base-neutral-400
--nj-color-base-neutral-400

Border bold

Css variable Preview light Preview dark
var(--nj-color-border-bold)
--nj-color-base-neutral-600
--nj-color-base-neutral-600

Border strong

Css variable Preview light Preview dark
var(--nj-color-border-strong)
--nj-color-base-neutral-700
--nj-color-base-neutral-700

Border contrast

Css variable Preview light Preview dark
var(--nj-color-border-contrast)
--nj-color-base-neutral-900
--nj-color-base-neutral-900

Border hovered

Css variable Preview light Preview dark
var(--nj-color-border-hovered)
--nj-color-border-brand-bold
--nj-color-border-brand-bold

Border focused

Css variable Preview light Preview dark
var(--nj-color-border-focused)
--nj-color-border-brand-bold
--nj-color-border-brand-bold

Border brand

Css variable Preview light Preview dark
var(--nj-color-border-brand-moderate)
--nj-color-base-brand-400
--nj-color-base-brand-400
var(--nj-color-border-brand-bold)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-border-brand-strong)
--nj-color-base-brand-700
--nj-color-base-brand-700

Border inverse

Css variable Preview light Preview dark
var(--nj-color-border-inverse)
--nj-color-base-neutral-0
--nj-color-base-neutral-0
var(--nj-color-border-inverse-focused)
--nj-color-base-neutral-0
--nj-color-base-neutral-0

Border danger

Css variable Preview light Preview dark
var(--nj-color-border-danger-subtle)
--nj-color-base-danger-300
--nj-color-base-danger-300
var(--nj-color-border-danger-moderate)
--nj-color-base-danger-400
--nj-color-base-danger-400
var(--nj-color-border-danger-bold)
--nj-color-base-danger-600
--nj-color-base-danger-600
var(--nj-color-border-danger-strong)
--nj-color-base-danger-700
--nj-color-base-danger-700

Border warning

Css variable Preview light Preview dark
var(--nj-color-border-warning-subtle)
--nj-color-base-warning-300
--nj-color-base-warning-300
var(--nj-color-border-warning-moderate)
--nj-color-base-warning-400
--nj-color-base-warning-400
var(--nj-color-border-warning-bold)
--nj-color-base-warning-600
--nj-color-base-warning-600
var(--nj-color-border-warning-strong)
--nj-color-base-warning-700
--nj-color-base-warning-700

Border success

Css variable Preview light Preview dark
var(--nj-color-border-success-subtle)
--nj-color-base-success-300
--nj-color-base-success-300
var(--nj-color-border-success-moderate)
--nj-color-base-success-400
--nj-color-base-success-400
var(--nj-color-border-success-bold)
--nj-color-base-success-600
--nj-color-base-success-600
var(--nj-color-border-success-strong)
--nj-color-base-success-700
--nj-color-base-success-700

Border discovery

Css variable Preview light Preview dark
var(--nj-color-border-discovery-subtle)
--nj-color-base-discovery-300
--nj-color-base-discovery-300
var(--nj-color-border-discovery-moderate)
--nj-color-base-discovery-400
--nj-color-base-discovery-400
var(--nj-color-border-discovery-bold)
--nj-color-base-discovery-600
--nj-color-base-discovery-600
var(--nj-color-border-discovery-strong)
--nj-color-base-discovery-700
--nj-color-base-discovery-700

Border information

Css variable Preview light Preview dark
var(--nj-color-border-information-subtle)
--nj-color-base-information-300
--nj-color-base-information-300
var(--nj-color-border-information-moderate)
--nj-color-base-information-400
--nj-color-base-information-400
var(--nj-color-border-information-bold)
--nj-color-base-information-600
--nj-color-base-information-600
var(--nj-color-border-information-strong)
--nj-color-base-information-700
--nj-color-base-information-700

Border pink

Css variable Preview light Preview dark
var(--nj-color-border-pink-moderate)
--nj-color-palette-pink-400
--nj-color-palette-pink-400
var(--nj-color-border-pink-bold)
--nj-color-palette-pink-600
--nj-color-palette-pink-600
var(--nj-color-border-pink-strong)
--nj-color-palette-pink-700
--nj-color-palette-pink-700

Border red

Css variable Preview light Preview dark
var(--nj-color-border-red-moderate)
--nj-color-palette-red-400
--nj-color-palette-red-400
var(--nj-color-border-red-bold)
--nj-color-palette-red-600
--nj-color-palette-red-600
var(--nj-color-border-red-strong)
--nj-color-palette-red-700
--nj-color-palette-red-700

Border orange

Css variable Preview light Preview dark
var(--nj-color-border-orange-moderate)
--nj-color-palette-orange-400
--nj-color-palette-orange-400
var(--nj-color-border-orange-bold)
--nj-color-palette-orange-600
--nj-color-palette-orange-600
var(--nj-color-border-orange-strong)
--nj-color-palette-orange-700
--nj-color-palette-orange-700

Border yellow

Css variable Preview light Preview dark
var(--nj-color-border-yellow-moderate)
--nj-color-palette-yellow-400
--nj-color-palette-yellow-400
var(--nj-color-border-yellow-bold)
--nj-color-palette-yellow-600
--nj-color-palette-yellow-600
var(--nj-color-border-yellow-strong)
--nj-color-palette-yellow-700
--nj-color-palette-yellow-700

Border green

Css variable Preview light Preview dark
var(--nj-color-border-green-moderate)
--nj-color-palette-green-400
--nj-color-palette-green-400
var(--nj-color-border-green-bold)
--nj-color-palette-green-600
--nj-color-palette-green-600
var(--nj-color-border-green-strong)
--nj-color-palette-green-700
--nj-color-palette-green-700

Border grey

Css variable Preview light Preview dark
var(--nj-color-border-grey-moderate)
--nj-color-palette-grey-400
--nj-color-palette-grey-400
var(--nj-color-border-grey-bold)
--nj-color-palette-grey-600
--nj-color-palette-grey-600
var(--nj-color-border-grey-strong)
--nj-color-palette-grey-700
--nj-color-palette-grey-700

Border blue

Css variable Preview light Preview dark
var(--nj-color-border-blue-moderate)
--nj-color-palette-blue-400
--nj-color-palette-blue-400
var(--nj-color-border-blue-bold)
--nj-color-palette-blue-600
--nj-color-palette-blue-600
var(--nj-color-border-blue-strong)
--nj-color-palette-blue-700
--nj-color-palette-blue-700

Border ultramarine

Css variable Preview light Preview dark
var(--nj-color-border-ultramarine-moderate)
--nj-color-palette-ultramarine-400
--nj-color-palette-ultramarine-400
var(--nj-color-border-ultramarine-bold)
--nj-color-palette-ultramarine-600
--nj-color-palette-ultramarine-600
var(--nj-color-border-ultramarine-strong)
--nj-color-palette-ultramarine-700
--nj-color-palette-ultramarine-700

Border purple

Css variable Preview light Preview dark
var(--nj-color-border-purple-moderate)
--nj-color-palette-purple-400
--nj-color-palette-purple-400
var(--nj-color-border-purple-bold)
--nj-color-palette-purple-600
--nj-color-palette-purple-600
var(--nj-color-border-purple-strong)
--nj-color-palette-purple-700
--nj-color-palette-purple-700

Border teal

Css variable Preview light Preview dark
var(--nj-color-border-teal-moderate)
--nj-color-palette-teal-400
--nj-color-palette-teal-400
var(--nj-color-border-teal-bold)
--nj-color-palette-teal-600
--nj-color-palette-teal-600
var(--nj-color-border-teal-strong)
--nj-color-palette-teal-700
--nj-color-palette-teal-700

Border lime

Css variable Preview light Preview dark
var(--nj-color-border-lime-moderate)
--nj-color-palette-lime-400
--nj-color-palette-lime-400
var(--nj-color-border-lime-bold)
--nj-color-palette-lime-600
--nj-color-palette-lime-600
var(--nj-color-border-lime-strong)
--nj-color-palette-lime-700
--nj-color-palette-lime-700

Text colors

Text primary

Css variable Preview light Preview dark
var(--nj-color-text-primary)
--nj-color-base-neutral-1000
--nj-color-base-neutral-1000
var(--nj-color-text-primary-hovered)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-text-primary-focused)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-text-primary-pressed)
--nj-color-base-brand-700
--nj-color-base-brand-700

Text secondary

Css variable Preview light Preview dark
var(--nj-color-text-secondary)
--nj-color-base-neutral-800
--nj-color-base-neutral-800

Text tertiary

Css variable Preview light Preview dark
var(--nj-color-text-tertiary)
--nj-color-base-neutral-600
--nj-color-base-neutral-600
var(--nj-color-text-tertiary-hovered)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-text-tertiary-focused)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-text-tertiary-pressed)
--nj-color-base-brand-700
--nj-color-base-brand-700

Text inverse

Css variable Preview light Preview dark
var(--nj-color-text-inverse)
--nj-color-base-neutral-0
--nj-color-base-neutral-0
var(--nj-color-text-inverse-hovered)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-text-inverse-focused)
--nj-color-base-neutral-200
--nj-color-base-neutral-200
var(--nj-color-text-inverse-pressed)
--nj-color-base-neutral-300
--nj-color-base-neutral-300

Text brand

Css variable Preview light Preview dark
var(--nj-color-text-brand-primary)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-text-brand-primary-hovered)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-text-brand-primary-focused)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-text-brand-primary-pressed)
--nj-color-base-brand-800
--nj-color-base-brand-800
var(--nj-color-text-brand-high-contrast)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-text-brand-high-contrast-hovered)
--nj-color-base-brand-800
--nj-color-base-brand-800
var(--nj-color-text-brand-high-contrast-focused)
--nj-color-base-brand-800
--nj-color-base-brand-800
var(--nj-color-text-brand-high-contrast-pressed)
--nj-color-base-brand-900
--nj-color-base-brand-900

Text danger

Css variable Preview light Preview dark
var(--nj-color-text-danger-primary)
--nj-color-base-danger-600
--nj-color-base-danger-600
var(--nj-color-text-danger-primary-hovered)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-text-danger-primary-focused)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-text-danger-primary-pressed)
--nj-color-base-danger-800
--nj-color-base-danger-800
var(--nj-color-text-danger-secondary)
--nj-color-base-danger-800
--nj-color-base-danger-800
var(--nj-color-text-danger-high-contrast)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-text-danger-high-contrast-hovered)
--nj-color-base-danger-800
--nj-color-base-danger-800
var(--nj-color-text-danger-high-contrast-focused)
--nj-color-base-danger-800
--nj-color-base-danger-800
var(--nj-color-text-danger-high-contrast-pressed)
--nj-color-base-danger-900
--nj-color-base-danger-900

Text warning

Css variable Preview light Preview dark
var(--nj-color-text-warning-primary)
--nj-color-base-warning-600
--nj-color-base-warning-600
var(--nj-color-text-warning-primary-hovered)
--nj-color-base-warning-700
--nj-color-base-warning-700
var(--nj-color-text-warning-primary-focused)
--nj-color-base-warning-700
--nj-color-base-warning-700
var(--nj-color-text-warning-primary-pressed)
--nj-color-base-warning-800
--nj-color-base-warning-800
var(--nj-color-text-warning-secondary)
--nj-color-base-warning-800
--nj-color-base-warning-800
var(--nj-color-text-warning-high-contrast)
--nj-color-base-warning-700
--nj-color-base-warning-700
var(--nj-color-text-warning-high-contrast-hovered)
--nj-color-base-warning-800
--nj-color-base-warning-800
var(--nj-color-text-warning-high-contrast-focused)
--nj-color-base-warning-800
--nj-color-base-warning-800
var(--nj-color-text-warning-high-contrast-pressed)
--nj-color-base-warning-900
--nj-color-base-warning-900

Text success

Css variable Preview light Preview dark
var(--nj-color-text-success-primary)
--nj-color-base-success-600
--nj-color-base-success-600
var(--nj-color-text-success-primary-hovered)
--nj-color-base-success-700
--nj-color-base-success-700
var(--nj-color-text-success-primary-focused)
--nj-color-base-success-700
--nj-color-base-success-700
var(--nj-color-text-success-primary-pressed)
--nj-color-base-success-800
--nj-color-base-success-800
var(--nj-color-text-success-secondary)
--nj-color-base-success-800
--nj-color-base-success-800
var(--nj-color-text-success-high-contrast)
--nj-color-base-success-700
--nj-color-base-success-700
var(--nj-color-text-success-high-contrast-hovered)
--nj-color-base-success-800
--nj-color-base-success-800
var(--nj-color-text-success-high-contrast-focused)
--nj-color-base-success-800
--nj-color-base-success-800
var(--nj-color-text-success-high-contrast-pressed)
--nj-color-base-success-900
--nj-color-base-success-900

Text information

Css variable Preview light Preview dark
var(--nj-color-text-information-primary)
--nj-color-base-information-600
--nj-color-base-information-600
var(--nj-color-text-information-primary-hovered)
--nj-color-base-information-700
--nj-color-base-information-700
var(--nj-color-text-information-primary-focused)
--nj-color-base-information-700
--nj-color-base-information-700
var(--nj-color-text-information-primary-pressed)
--nj-color-base-information-800
--nj-color-base-information-800
var(--nj-color-text-information-secondary)
--nj-color-base-information-800
--nj-color-base-information-800
var(--nj-color-text-information-high-contrast)
--nj-color-base-information-700
--nj-color-base-information-700
var(--nj-color-text-information-high-contrast-hovered)
--nj-color-base-information-800
--nj-color-base-information-800
var(--nj-color-text-information-high-contrast-focused)
--nj-color-base-information-800
--nj-color-base-information-800
var(--nj-color-text-information-high-contrast-pressed)
--nj-color-base-information-900
--nj-color-base-information-900

Text discovery

Css variable Preview light Preview dark
var(--nj-color-text-discovery-primary)
--nj-color-base-discovery-600
--nj-color-base-discovery-600
var(--nj-color-text-discovery-primary-hovered)
--nj-color-base-discovery-700
--nj-color-base-discovery-700
var(--nj-color-text-discovery-primary-focused)
--nj-color-base-discovery-700
--nj-color-base-discovery-700
var(--nj-color-text-discovery-primary-pressed)
--nj-color-base-discovery-800
--nj-color-base-discovery-800
var(--nj-color-text-discovery-secondary)
--nj-color-base-discovery-800
--nj-color-base-discovery-800
var(--nj-color-text-discovery-high-contrast)
--nj-color-base-discovery-700
--nj-color-base-discovery-700
var(--nj-color-text-discovery-high-contrast-hovered)
--nj-color-base-discovery-800
--nj-color-base-discovery-800
var(--nj-color-text-discovery-high-contrast-focused)
--nj-color-base-discovery-800
--nj-color-base-discovery-800
var(--nj-color-text-discovery-high-contrast-pressed)
--nj-color-base-discovery-900
--nj-color-base-discovery-900

Text pink

Css variable Preview light Preview dark
var(--nj-color-text-pink-primary)
--nj-color-palette-pink-600
--nj-color-palette-pink-600
var(--nj-color-text-pink-primary-hovered)
--nj-color-palette-pink-700
--nj-color-palette-pink-700
var(--nj-color-text-pink-primary-focused)
--nj-color-palette-pink-700
--nj-color-palette-pink-700
var(--nj-color-text-pink-primary-pressed)
--nj-color-palette-pink-800
--nj-color-palette-pink-800

Text red

Css variable Preview light Preview dark
var(--nj-color-text-red-primary)
--nj-color-palette-red-600
--nj-color-palette-red-600
var(--nj-color-text-red-primary-hovered)
--nj-color-palette-red-700
--nj-color-palette-red-700
var(--nj-color-text-red-primary-focused)
--nj-color-palette-red-700
--nj-color-palette-red-700
var(--nj-color-text-red-primary-pressed)
--nj-color-palette-red-800
--nj-color-palette-red-800

Text orange

Css variable Preview light Preview dark
var(--nj-color-text-orange-primary)
--nj-color-palette-orange-600
--nj-color-palette-orange-600
var(--nj-color-text-orange-primary-hovered)
--nj-color-palette-orange-700
--nj-color-palette-orange-700
var(--nj-color-text-orange-primary-focused)
--nj-color-palette-orange-700
--nj-color-palette-orange-700
var(--nj-color-text-orange-primary-pressed)
--nj-color-palette-orange-800
--nj-color-palette-orange-800

Text yellow

Css variable Preview light Preview dark
var(--nj-color-text-yellow-primary)
--nj-color-palette-yellow-600
--nj-color-palette-yellow-600
var(--nj-color-text-yellow-primary-hovered)
--nj-color-palette-yellow-700
--nj-color-palette-yellow-700
var(--nj-color-text-yellow-primary-focused)
--nj-color-palette-yellow-700
--nj-color-palette-yellow-700
var(--nj-color-text-yellow-primary-pressed)
--nj-color-palette-yellow-800
--nj-color-palette-yellow-800

Text green

Css variable Preview light Preview dark
var(--nj-color-text-green-primary)
--nj-color-palette-green-600
--nj-color-palette-green-600
var(--nj-color-text-green-primary-hovered)
--nj-color-palette-green-700
--nj-color-palette-green-700
var(--nj-color-text-green-primary-focused)
--nj-color-palette-green-700
--nj-color-palette-green-700
var(--nj-color-text-green-primary-pressed)
--nj-color-palette-green-800
--nj-color-palette-green-800

Text grey

Css variable Preview light Preview dark
var(--nj-color-text-grey-primary)
--nj-color-palette-grey-600
--nj-color-palette-grey-600
var(--nj-color-text-grey-primary-hovered)
--nj-color-palette-grey-700
--nj-color-palette-grey-700
var(--nj-color-text-grey-primary-focused)
--nj-color-palette-grey-700
--nj-color-palette-grey-700
var(--nj-color-text-grey-primary-pressed)
--nj-color-palette-grey-800
--nj-color-palette-grey-800

Text blue

Css variable Preview light Preview dark
var(--nj-color-text-blue-primary)
--nj-color-palette-blue-600
--nj-color-palette-blue-600
var(--nj-color-text-blue-primary-hovered)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-text-blue-primary-focused)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-text-blue-primary-pressed)
--nj-color-palette-blue-800
--nj-color-palette-blue-800

Text ultramarine

Css variable Preview light Preview dark
var(--nj-color-text-ultramarine-primary)
--nj-color-palette-ultramarine-600
--nj-color-palette-ultramarine-600
var(--nj-color-text-ultramarine-primary-hovered)
--nj-color-palette-ultramarine-700
--nj-color-palette-ultramarine-700
var(--nj-color-text-ultramarine-primary-focused)
--nj-color-palette-ultramarine-700
--nj-color-palette-ultramarine-700
var(--nj-color-text-ultramarine-primary-pressed)
--nj-color-palette-ultramarine-800
--nj-color-palette-ultramarine-800

Text purple

Css variable Preview light Preview dark
var(--nj-color-text-purple-primary)
--nj-color-palette-purple-600
--nj-color-palette-purple-600
var(--nj-color-text-purple-primary-hovered)
--nj-color-palette-purple-700
--nj-color-palette-purple-700
var(--nj-color-text-purple-primary-focused)
--nj-color-palette-purple-700
--nj-color-palette-purple-700
var(--nj-color-text-purple-primary-pressed)
--nj-color-palette-purple-800
--nj-color-palette-purple-800

Text teal

Css variable Preview light Preview dark
var(--nj-color-text-teal-primary)
--nj-color-palette-teal-600
--nj-color-palette-teal-600
var(--nj-color-text-teal-primary-hovered)
--nj-color-palette-teal-700
--nj-color-palette-teal-700
var(--nj-color-text-teal-primary-focused)
--nj-color-palette-teal-700
--nj-color-palette-teal-700
var(--nj-color-text-teal-primary-pressed)
--nj-color-palette-teal-800
--nj-color-palette-teal-800

Text lime

Css variable Preview light Preview dark
var(--nj-color-text-lime-primary)
--nj-color-palette-lime-600
--nj-color-palette-lime-600
var(--nj-color-text-lime-primary-hovered)
--nj-color-palette-lime-700
--nj-color-palette-lime-700
var(--nj-color-text-lime-primary-focused)
--nj-color-palette-lime-700
--nj-color-palette-lime-700
var(--nj-color-text-lime-primary-pressed)
--nj-color-palette-lime-800
--nj-color-palette-lime-800

Icon colors

Icon tertiary

Css variable Preview light Preview dark
var(--nj-color-icon-tertiary)
--nj-color-base-neutral-500
--nj-color-base-neutral-500

Icon secondary

Css variable Preview light Preview dark
var(--nj-color-icon-secondary)
--nj-color-base-neutral-600
--nj-color-base-neutral-600
var(--nj-color-icon-secondary-hovered)
--nj-color-base-neutral-700
--nj-color-base-neutral-700
var(--nj-color-icon-secondary-focused)
--nj-color-base-neutral-700
--nj-color-base-neutral-700
var(--nj-color-icon-secondary-pressed)
--nj-color-base-neutral-800
--nj-color-base-neutral-800

Icon primary

Css variable Preview light Preview dark
var(--nj-color-icon-primary)
--nj-color-base-neutral-800
--nj-color-base-neutral-800

Icon inverse

Css variable Preview light Preview dark
var(--nj-color-icon-inverse-primary)
--nj-color-base-neutral-0
--nj-color-base-neutral-0

Icon brand

Css variable Preview light Preview dark
var(--nj-color-icon-brand-secondary)
--nj-color-base-brand-600
--nj-color-base-brand-600
var(--nj-color-icon-brand-secondary-hovered)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-icon-brand-secondary-focused)
--nj-color-base-brand-700
--nj-color-base-brand-700
var(--nj-color-icon-brand-secondary-pressed)
--nj-color-base-brand-800
--nj-color-base-brand-800
var(--nj-color-icon-brand-primary)
--nj-color-base-brand-800
--nj-color-base-brand-800

Icon danger

Css variable Preview light Preview dark
var(--nj-color-icon-danger-secondary)
--nj-color-base-danger-600
--nj-color-base-danger-600
var(--nj-color-icon-danger-secondary-hovered)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-icon-danger-secondary-focused)
--nj-color-base-danger-700
--nj-color-base-danger-700
var(--nj-color-icon-danger-secondary-pressed)
--nj-color-base-danger-800
--nj-color-base-danger-800
var(--nj-color-icon-danger-primary)
--nj-color-base-danger-800
--nj-color-base-danger-800

Icon pink

Css variable Preview light Preview dark
var(--nj-color-icon-pink-secondary)
--nj-color-palette-pink-600
--nj-color-palette-pink-600
var(--nj-color-icon-pink-secondary-hovered)
--nj-color-palette-pink-700
--nj-color-palette-pink-700
var(--nj-color-icon-pink-secondary-focused)
--nj-color-palette-pink-700
--nj-color-palette-pink-700
var(--nj-color-icon-pink-secondary-pressed)
--nj-color-palette-pink-800
--nj-color-palette-pink-800
var(--nj-color-icon-pink-primary)
--nj-color-palette-pink-800
--nj-color-palette-pink-800

Icon red

Css variable Preview light Preview dark
var(--nj-color-icon-red-secondary)
--nj-color-palette-red-600
--nj-color-palette-red-600
var(--nj-color-icon-red-secondary-hovered)
--nj-color-palette-red-700
--nj-color-palette-red-700
var(--nj-color-icon-red-secondary-focused)
--nj-color-palette-red-700
--nj-color-palette-red-700
var(--nj-color-icon-red-secondary-pressed)
--nj-color-palette-red-800
--nj-color-palette-red-800
var(--nj-color-icon-red-primary)
--nj-color-palette-red-800
--nj-color-palette-red-800

Icon orange

Css variable Preview light Preview dark
var(--nj-color-icon-orange-secondary)
--nj-color-palette-orange-600
--nj-color-palette-orange-600
var(--nj-color-icon-orange-secondary-hovered)
--nj-color-palette-orange-700
--nj-color-palette-orange-700
var(--nj-color-icon-orange-secondary-focused)
--nj-color-palette-orange-700
--nj-color-palette-orange-700
var(--nj-color-icon-orange-secondary-pressed)
--nj-color-palette-orange-800
--nj-color-palette-orange-800
var(--nj-color-icon-orange-primary)
--nj-color-palette-orange-800
--nj-color-palette-orange-800

Icon yellow

Css variable Preview light Preview dark
var(--nj-color-icon-yellow-secondary)
--nj-color-palette-yellow-600
--nj-color-palette-yellow-600
var(--nj-color-icon-yellow-secondary-hovered)
--nj-color-palette-yellow-700
--nj-color-palette-yellow-700
var(--nj-color-icon-yellow-secondary-focused)
--nj-color-palette-yellow-700
--nj-color-palette-yellow-700
var(--nj-color-icon-yellow-secondary-pressed)
--nj-color-palette-yellow-800
--nj-color-palette-yellow-800
var(--nj-color-icon-yellow-primary)
--nj-color-palette-yellow-800
--nj-color-palette-yellow-800

Icon green

Css variable Preview light Preview dark
var(--nj-color-icon-green-secondary)
--nj-color-palette-green-600
--nj-color-palette-green-600
var(--nj-color-icon-green-secondary-hovered)
--nj-color-palette-green-700
--nj-color-palette-green-700
var(--nj-color-icon-green-secondary-focused)
--nj-color-palette-green-700
--nj-color-palette-green-700
var(--nj-color-icon-green-secondary-pressed)
--nj-color-palette-green-800
--nj-color-palette-green-800
var(--nj-color-icon-green-primary)
--nj-color-palette-green-800
--nj-color-palette-green-800

Icon grey

Css variable Preview light Preview dark
var(--nj-color-icon-grey-secondary)
--nj-color-palette-grey-600
--nj-color-palette-grey-600
var(--nj-color-icon-grey-secondary-hovered)
--nj-color-palette-grey-700
--nj-color-palette-grey-700
var(--nj-color-icon-grey-secondary-focused)
--nj-color-palette-grey-700
--nj-color-palette-grey-700
var(--nj-color-icon-grey-secondary-pressed)
--nj-color-palette-grey-800
--nj-color-palette-grey-800
var(--nj-color-icon-grey-primary)
--nj-color-palette-grey-800
--nj-color-palette-grey-800

Icon blue

Css variable Preview light Preview dark
var(--nj-color-icon-blue-secondary)
--nj-color-palette-blue-600
--nj-color-palette-blue-600
var(--nj-color-icon-blue-secondary-hovered)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-icon-blue-secondary-focused)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-icon-blue-secondary-pressed)
--nj-color-palette-blue-800
--nj-color-palette-blue-800
var(--nj-color-icon-blue-primary)
--nj-color-palette-blue-800
--nj-color-palette-blue-800

Icon ultramarine

Css variable Preview light Preview dark
var(--nj-color-icon-ultramarine-secondary)
--nj-color-palette-ultramarine-600
--nj-color-palette-ultramarine-600
var(--nj-color-icon-ultramarine-secondary-hovered)
--nj-color-palette-ultramarine-700
--nj-color-palette-ultramarine-700
var(--nj-color-icon-ultramarine-secondary-focused)
--nj-color-palette-ultramarine-700
--nj-color-palette-ultramarine-700
var(--nj-color-icon-ultramarine-secondary-pressed)
--nj-color-palette-ultramarine-800
--nj-color-palette-ultramarine-800
var(--nj-color-icon-ultramarine-primary)
--nj-color-palette-ultramarine-800
--nj-color-palette-ultramarine-800

Icon purple

Css variable Preview light Preview dark
var(--nj-color-icon-purple-secondary)
--nj-color-palette-purple-600
--nj-color-palette-purple-600
var(--nj-color-icon-purple-secondary-hovered)
--nj-color-palette-purple-700
--nj-color-palette-purple-700
var(--nj-color-icon-purple-secondary-focused)
--nj-color-palette-purple-700
--nj-color-palette-purple-700
var(--nj-color-icon-purple-secondary-pressed)
--nj-color-palette-purple-800
--nj-color-palette-purple-800
var(--nj-color-icon-purple-primary)
--nj-color-palette-purple-800
--nj-color-palette-purple-800

Icon teal

Css variable Preview light Preview dark
var(--nj-color-icon-teal-secondary)
--nj-color-palette-teal-600
--nj-color-palette-teal-600
var(--nj-color-icon-teal-secondary-hovered)
--nj-color-palette-teal-700
--nj-color-palette-teal-700
var(--nj-color-icon-teal-secondary-focused)
--nj-color-palette-teal-700
--nj-color-palette-teal-700
var(--nj-color-icon-teal-secondary-pressed)
--nj-color-palette-teal-800
--nj-color-palette-teal-800
var(--nj-color-icon-teal-primary)
--nj-color-palette-teal-800
--nj-color-palette-teal-800

Icon lime

Css variable Preview light Preview dark
var(--nj-color-icon-lime-secondary)
--nj-color-palette-lime-600
--nj-color-palette-lime-600
var(--nj-color-icon-lime-secondary-hovered)
--nj-color-palette-lime-700
--nj-color-palette-lime-700
var(--nj-color-icon-lime-secondary-focused)
--nj-color-palette-lime-700
--nj-color-palette-lime-700
var(--nj-color-icon-lime-secondary-pressed)
--nj-color-palette-lime-800
--nj-color-palette-lime-800
var(--nj-color-icon-lime-primary)
--nj-color-palette-lime-800
--nj-color-palette-lime-800

Color Base

Base brand

Css variable Preview light Preview dark
var(--nj-color-base-brand-100)
--nj-color-palette-blue-100
--nj-color-palette-blue-100
var(--nj-color-base-brand-200)
--nj-color-palette-blue-200
--nj-color-palette-blue-200
var(--nj-color-base-brand-300)
--nj-color-palette-blue-300
--nj-color-palette-blue-300
var(--nj-color-base-brand-400)
--nj-color-palette-blue-400
--nj-color-palette-blue-400
var(--nj-color-base-brand-500)
--nj-color-palette-blue-500
--nj-color-palette-blue-500
var(--nj-color-base-brand-600)
--nj-color-palette-blue-600
--nj-color-palette-blue-600
var(--nj-color-base-brand-700)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-base-brand-800)
--nj-color-palette-blue-800
--nj-color-palette-blue-800
var(--nj-color-base-brand-900)
--nj-color-palette-blue-900
--nj-color-palette-blue-900
var(--nj-color-base-brand-alpha-0)
--nj-color-palette-blue-alpha-0
--nj-color-palette-blue-alpha-0
var(--nj-color-base-brand-alpha-100)
--nj-color-palette-blue-alpha-100
--nj-color-palette-blue-alpha-100
var(--nj-color-base-brand-alpha-200)
--nj-color-palette-blue-alpha-200
--nj-color-palette-blue-alpha-200
var(--nj-color-base-brand-alpha-300)
--nj-color-palette-blue-alpha-300
--nj-color-palette-blue-alpha-300

Base neutral

Css variable Preview light Preview dark
var(--nj-color-base-neutral-0)
--nj-color-palette-grey-0
--nj-color-palette-grey-0
var(--nj-color-base-neutral-100)
--nj-color-palette-grey-100
--nj-color-palette-grey-100
var(--nj-color-base-neutral-200)
--nj-color-palette-grey-200
--nj-color-palette-grey-200
var(--nj-color-base-neutral-300)
--nj-color-palette-grey-300
--nj-color-palette-grey-300
var(--nj-color-base-neutral-400)
--nj-color-palette-grey-400
--nj-color-palette-grey-400
var(--nj-color-base-neutral-500)
--nj-color-palette-grey-500
--nj-color-palette-grey-500
var(--nj-color-base-neutral-600)
--nj-color-palette-grey-600
--nj-color-palette-grey-600
var(--nj-color-base-neutral-700)
--nj-color-palette-grey-700
--nj-color-palette-grey-700
var(--nj-color-base-neutral-800)
--nj-color-palette-grey-800
--nj-color-palette-grey-800
var(--nj-color-base-neutral-900)
--nj-color-palette-grey-900
--nj-color-palette-grey-900
var(--nj-color-base-neutral-1000)
--nj-color-palette-grey-1000
--nj-color-palette-grey-1000
var(--nj-color-base-neutral-alpha-0)
--nj-color-palette-grey-alpha-0
--nj-color-palette-grey-alpha-0
var(--nj-color-base-neutral-alpha-100)
--nj-color-palette-grey-alpha-100
--nj-color-palette-grey-alpha-100
var(--nj-color-base-neutral-alpha-200)
--nj-color-palette-grey-alpha-200
--nj-color-palette-grey-alpha-200
var(--nj-color-base-neutral-alpha-300)
--nj-color-palette-grey-alpha-300
--nj-color-palette-grey-alpha-300
var(--nj-color-base-neutral-alpha-400)
--nj-color-palette-grey-alpha-400
--nj-color-palette-grey-alpha-400
var(--nj-color-base-neutral-alpha-500)
--nj-color-palette-grey-alpha-500
--nj-color-palette-grey-alpha-500

Base danger

Css variable Preview light Preview dark
var(--nj-color-base-danger-100)
--nj-color-palette-red-100
--nj-color-palette-red-100
var(--nj-color-base-danger-200)
--nj-color-palette-red-200
--nj-color-palette-red-200
var(--nj-color-base-danger-300)
--nj-color-palette-red-300
--nj-color-palette-red-300
var(--nj-color-base-danger-400)
--nj-color-palette-red-400
--nj-color-palette-red-400
var(--nj-color-base-danger-500)
--nj-color-palette-red-500
--nj-color-palette-red-500
var(--nj-color-base-danger-600)
--nj-color-palette-red-600
--nj-color-palette-red-600
var(--nj-color-base-danger-700)
--nj-color-palette-red-700
--nj-color-palette-red-700
var(--nj-color-base-danger-800)
--nj-color-palette-red-800
--nj-color-palette-red-800
var(--nj-color-base-danger-900)
--nj-color-palette-red-900
--nj-color-palette-red-900
var(--nj-color-base-danger-alpha-0)
--nj-color-palette-red-alpha-0
--nj-color-palette-red-alpha-0
var(--nj-color-base-danger-alpha-100)
--nj-color-palette-red-alpha-100
--nj-color-palette-red-alpha-100
var(--nj-color-base-danger-alpha-200)
--nj-color-palette-red-alpha-200
--nj-color-palette-red-alpha-200
var(--nj-color-base-danger-alpha-300)
--nj-color-palette-red-alpha-300
--nj-color-palette-red-alpha-300

Base success

Css variable Preview light Preview dark
var(--nj-color-base-success-100)
--nj-color-palette-green-100
--nj-color-palette-green-100
var(--nj-color-base-success-200)
--nj-color-palette-green-200
--nj-color-palette-green-200
var(--nj-color-base-success-300)
--nj-color-palette-green-300
--nj-color-palette-green-300
var(--nj-color-base-success-400)
--nj-color-palette-green-400
--nj-color-palette-green-400
var(--nj-color-base-success-500)
--nj-color-palette-green-500
--nj-color-palette-green-500
var(--nj-color-base-success-600)
--nj-color-palette-green-600
--nj-color-palette-green-600
var(--nj-color-base-success-700)
--nj-color-palette-green-700
--nj-color-palette-green-700
var(--nj-color-base-success-800)
--nj-color-palette-green-800
--nj-color-palette-green-800
var(--nj-color-base-success-900)
--nj-color-palette-green-900
--nj-color-palette-green-900
var(--nj-color-base-success-alpha-0)
--nj-color-palette-green-alpha-0
--nj-color-palette-green-alpha-0
var(--nj-color-base-success-alpha-100)
--nj-color-palette-green-alpha-100
--nj-color-palette-green-alpha-100
var(--nj-color-base-success-alpha-200)
--nj-color-palette-green-alpha-200
--nj-color-palette-green-alpha-200
var(--nj-color-base-success-alpha-300)
--nj-color-palette-green-alpha-300
--nj-color-palette-green-alpha-300

Base warning

Css variable Preview light Preview dark
var(--nj-color-base-warning-100)
--nj-color-palette-orange-100
--nj-color-palette-orange-100
var(--nj-color-base-warning-200)
--nj-color-palette-orange-200
--nj-color-palette-orange-200
var(--nj-color-base-warning-300)
--nj-color-palette-orange-300
--nj-color-palette-orange-300
var(--nj-color-base-warning-400)
--nj-color-palette-orange-400
--nj-color-palette-orange-400
var(--nj-color-base-warning-500)
--nj-color-palette-orange-500
--nj-color-palette-orange-500
var(--nj-color-base-warning-600)
--nj-color-palette-orange-600
--nj-color-palette-orange-600
var(--nj-color-base-warning-700)
--nj-color-palette-orange-700
--nj-color-palette-orange-700
var(--nj-color-base-warning-800)
--nj-color-palette-orange-800
--nj-color-palette-orange-800
var(--nj-color-base-warning-900)
--nj-color-palette-orange-900
--nj-color-palette-orange-900
var(--nj-color-base-warning-alpha-0)
--nj-color-palette-orange-alpha-0
--nj-color-palette-orange-alpha-0
var(--nj-color-base-warning-alpha-100)
--nj-color-palette-orange-alpha-100
--nj-color-palette-orange-alpha-100
var(--nj-color-base-warning-alpha-200)
--nj-color-palette-orange-alpha-200
--nj-color-palette-orange-alpha-200
var(--nj-color-base-warning-alpha-300)
--nj-color-palette-orange-alpha-300
--nj-color-palette-orange-alpha-300

Base discovery

Css variable Preview light Preview dark
var(--nj-color-base-discovery-100)
--nj-color-palette-purple-100
--nj-color-palette-purple-100
var(--nj-color-base-discovery-200)
--nj-color-palette-purple-200
--nj-color-palette-purple-200
var(--nj-color-base-discovery-300)
--nj-color-palette-purple-300
--nj-color-palette-purple-300
var(--nj-color-base-discovery-400)
--nj-color-palette-purple-400
--nj-color-palette-purple-400
var(--nj-color-base-discovery-500)
--nj-color-palette-purple-500
--nj-color-palette-purple-500
var(--nj-color-base-discovery-600)
--nj-color-palette-purple-600
--nj-color-palette-purple-600
var(--nj-color-base-discovery-700)
--nj-color-palette-purple-700
--nj-color-palette-purple-700
var(--nj-color-base-discovery-800)
--nj-color-palette-purple-800
--nj-color-palette-purple-800
var(--nj-color-base-discovery-900)
--nj-color-palette-purple-900
--nj-color-palette-purple-900
var(--nj-color-base-discovery-alpha-0)
--nj-color-palette-purple-alpha-0
--nj-color-palette-purple-alpha-0
var(--nj-color-base-discovery-alpha-100)
--nj-color-palette-purple-alpha-100
--nj-color-palette-purple-alpha-100
var(--nj-color-base-discovery-alpha-200)
--nj-color-palette-purple-alpha-200
--nj-color-palette-purple-alpha-200
var(--nj-color-base-discovery-alpha-300)
--nj-color-palette-purple-alpha-300
--nj-color-palette-purple-alpha-300

Base information

Css variable Preview light Preview dark
var(--nj-color-base-information-100)
--nj-color-palette-blue-100
--nj-color-palette-blue-100
var(--nj-color-base-information-200)
--nj-color-palette-blue-200
--nj-color-palette-blue-200
var(--nj-color-base-information-300)
--nj-color-palette-blue-300
--nj-color-palette-blue-300
var(--nj-color-base-information-400)
--nj-color-palette-blue-400
--nj-color-palette-blue-400
var(--nj-color-base-information-500)
--nj-color-palette-blue-500
--nj-color-palette-blue-500
var(--nj-color-base-information-600)
--nj-color-palette-blue-600
--nj-color-palette-blue-600
var(--nj-color-base-information-700)
--nj-color-palette-blue-700
--nj-color-palette-blue-700
var(--nj-color-base-information-800)
--nj-color-palette-blue-800
--nj-color-palette-blue-800
var(--nj-color-base-information-900)
--nj-color-palette-blue-900
--nj-color-palette-blue-900
var(--nj-color-base-information-alpha-0)
--nj-color-palette-blue-alpha-0
--nj-color-palette-blue-alpha-0
var(--nj-color-base-information-alpha-100)
--nj-color-palette-blue-alpha-100
--nj-color-palette-blue-alpha-100
var(--nj-color-base-information-alpha-200)
--nj-color-palette-blue-alpha-200
--nj-color-palette-blue-alpha-200
var(--nj-color-base-information-alpha-300)
--nj-color-palette-blue-alpha-300
--nj-color-palette-blue-alpha-300

Base gradient

Css variable Preview light Preview dark
var(--nj-color-base-gradient)
--njlinear-gradient%2890deg%2C+-color-palette-engie-blue+0%25%2C+-color-palette-engie-green+100%25%29
--njlinear-gradient%2890deg%2C+-color-palette-engie-blue+0%25%2C+-color-palette-engie-green+100%25%29

Color Palette

We provide the color palette as reference, please do not use these tokens directly. They are the base that every other token build on to provide a coherent experience.

Palette grey

Css variable Preview light Preview dark
var(--nj-color-palette-grey-0)
var(--nj-color-palette-grey-100)
var(--nj-color-palette-grey-200)
var(--nj-color-palette-grey-300)
var(--nj-color-palette-grey-400)
var(--nj-color-palette-grey-500)
var(--nj-color-palette-grey-600)
var(--nj-color-palette-grey-700)
var(--nj-color-palette-grey-800)
var(--nj-color-palette-grey-900)
var(--nj-color-palette-grey-1000)
var(--nj-color-palette-grey-alpha-0)
var(--nj-color-palette-grey-alpha-100)
var(--nj-color-palette-grey-alpha-200)
var(--nj-color-palette-grey-alpha-300)
var(--nj-color-palette-grey-alpha-400)
var(--nj-color-palette-grey-alpha-500)

Palette pink

Css variable Preview light Preview dark
var(--nj-color-palette-pink-100)
var(--nj-color-palette-pink-200)
var(--nj-color-palette-pink-300)
var(--nj-color-palette-pink-400)
var(--nj-color-palette-pink-500)
var(--nj-color-palette-pink-600)
var(--nj-color-palette-pink-700)
var(--nj-color-palette-pink-800)
var(--nj-color-palette-pink-900)

Palette red

Css variable Preview light Preview dark
var(--nj-color-palette-red-100)
var(--nj-color-palette-red-200)
var(--nj-color-palette-red-300)
var(--nj-color-palette-red-400)
var(--nj-color-palette-red-500)
var(--nj-color-palette-red-600)
var(--nj-color-palette-red-700)
var(--nj-color-palette-red-800)
var(--nj-color-palette-red-900)
var(--nj-color-palette-red-alpha-0)
var(--nj-color-palette-red-alpha-100)
var(--nj-color-palette-red-alpha-200)
var(--nj-color-palette-red-alpha-300)

Palette orange

Css variable Preview light Preview dark
var(--nj-color-palette-orange-100)
var(--nj-color-palette-orange-200)
var(--nj-color-palette-orange-300)
var(--nj-color-palette-orange-400)
var(--nj-color-palette-orange-500)
var(--nj-color-palette-orange-600)
var(--nj-color-palette-orange-700)
var(--nj-color-palette-orange-800)
var(--nj-color-palette-orange-900)
var(--nj-color-palette-orange-alpha-0)
var(--nj-color-palette-orange-alpha-100)
var(--nj-color-palette-orange-alpha-200)
var(--nj-color-palette-orange-alpha-300)

Palette yellow

Css variable Preview light Preview dark
var(--nj-color-palette-yellow-100)
var(--nj-color-palette-yellow-200)
var(--nj-color-palette-yellow-300)
var(--nj-color-palette-yellow-400)
var(--nj-color-palette-yellow-500)
var(--nj-color-palette-yellow-600)
var(--nj-color-palette-yellow-700)
var(--nj-color-palette-yellow-800)
var(--nj-color-palette-yellow-900)

Palette green

Css variable Preview light Preview dark
var(--nj-color-palette-green-100)
var(--nj-color-palette-green-200)
var(--nj-color-palette-green-300)
var(--nj-color-palette-green-400)
var(--nj-color-palette-green-500)
var(--nj-color-palette-green-600)
var(--nj-color-palette-green-700)
var(--nj-color-palette-green-800)
var(--nj-color-palette-green-900)
var(--nj-color-palette-green-alpha-0)
var(--nj-color-palette-green-alpha-100)
var(--nj-color-palette-green-alpha-200)
var(--nj-color-palette-green-alpha-300)

Palette blue

Css variable Preview light Preview dark
var(--nj-color-palette-blue-100)
var(--nj-color-palette-blue-200)
var(--nj-color-palette-blue-300)
var(--nj-color-palette-blue-400)
var(--nj-color-palette-blue-500)
var(--nj-color-palette-blue-600)
var(--nj-color-palette-blue-700)
var(--nj-color-palette-blue-800)
var(--nj-color-palette-blue-900)
var(--nj-color-palette-blue-alpha-0)
var(--nj-color-palette-blue-alpha-100)
var(--nj-color-palette-blue-alpha-200)
var(--nj-color-palette-blue-alpha-300)

Palette ultramarine

Css variable Preview light Preview dark
var(--nj-color-palette-ultramarine-100)
var(--nj-color-palette-ultramarine-200)
var(--nj-color-palette-ultramarine-300)
var(--nj-color-palette-ultramarine-400)
var(--nj-color-palette-ultramarine-500)
var(--nj-color-palette-ultramarine-600)
var(--nj-color-palette-ultramarine-700)
var(--nj-color-palette-ultramarine-800)
var(--nj-color-palette-ultramarine-900)

Palette purple

Css variable Preview light Preview dark
var(--nj-color-palette-purple-100)
var(--nj-color-palette-purple-200)
var(--nj-color-palette-purple-300)
var(--nj-color-palette-purple-400)
var(--nj-color-palette-purple-500)
var(--nj-color-palette-purple-600)
var(--nj-color-palette-purple-700)
var(--nj-color-palette-purple-800)
var(--nj-color-palette-purple-900)
var(--nj-color-palette-purple-alpha-0)
var(--nj-color-palette-purple-alpha-100)
var(--nj-color-palette-purple-alpha-200)
var(--nj-color-palette-purple-alpha-300)

Palette teal

Css variable Preview light Preview dark
var(--nj-color-palette-teal-100)
var(--nj-color-palette-teal-200)
var(--nj-color-palette-teal-300)
var(--nj-color-palette-teal-400)
var(--nj-color-palette-teal-500)
var(--nj-color-palette-teal-600)
var(--nj-color-palette-teal-700)
var(--nj-color-palette-teal-800)
var(--nj-color-palette-teal-900)

Palette lime

Css variable Preview light Preview dark
var(--nj-color-palette-lime-100)
var(--nj-color-palette-lime-200)
var(--nj-color-palette-lime-300)
var(--nj-color-palette-lime-400)
var(--nj-color-palette-lime-500)
var(--nj-color-palette-lime-600)
var(--nj-color-palette-lime-700)
var(--nj-color-palette-lime-800)
var(--nj-color-palette-lime-900)

Palette engie

Css variable Preview light Preview dark
var(--nj-color-palette-engie-blue)
var(--nj-color-palette-engie-green)

Size

Border size

Css variable value
var(--nj-size-border-width) 1px
var(--nj-size-border-radius-md) 0
var(--nj-size-border-radius-sm) 0
var(--nj-size-border-focus-width) 2px
var(--nj-size-border-focus-offset) 2px

Font size

Css variable value
var(--nj-size-font-peta) 4.75rem
var(--nj-size-font-tera) 3.375rem
var(--nj-size-font-giga) 2.25rem
var(--nj-size-font-mega) 1.75rem
var(--nj-size-font-kilo) 1.5rem
var(--nj-size-font-hecto) 1.25rem
var(--nj-size-font-deca) 1.125rem
var(--nj-size-font-base) 1rem
var(--nj-size-font-deci) .875rem
var(--nj-size-font-centi) .75rem

Icon size

Css variable value
var(--nj-size-icon-sm) 16px
var(--nj-size-icon-md) 24px
var(--nj-size-icon-lg) 32px
var(--nj-size-icon-xl) 48px
var(--nj-size-icon-xxl) 64px
var(--nj-size-icon-3xl) 80px
var(--nj-size-icon-4xl) 96px
var(--nj-size-icon-5xl) 112px
var(--nj-size-icon-6xl) 128px

Space size

Css variable value
var(--nj-size-space-2) 0.125rem
var(--nj-size-space-4) 0.25rem
var(--nj-size-space-8) 0.5rem
var(--nj-size-space-12) 0.75rem
var(--nj-size-space-16) 1rem
var(--nj-size-space-20) 1.25rem
var(--nj-size-space-24) 1.5rem
var(--nj-size-space-32) 2rem
var(--nj-size-space-48) 3rem
var(--nj-size-space-64) 4rem
var(--nj-size-space-80) 5rem
var(--nj-size-space-96) 6rem
var(--nj-size-space-112) 7rem

Elevation

Css variable Value
var(--nj-elevation-dropdown) 1000
var(--nj-elevation-sticky) 1020
var(--nj-elevation-fixed) 1030
var(--nj-elevation-modal-backdrop) 1040
var(--nj-elevation-modal) 1050
var(--nj-elevation-popover) 1060
var(--nj-elevation-tooltip) 1070
var(--nj-elevation-toast-container) 1080
var(--nj-elevation-toast) 1080

Font

Css variable Value
var(--nj-font-space-family-sansSerif) "Lato", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--nj-font-space-family-monospace) "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace
var(--nj-font-space-family-default) {font.family.sansSerif}
var(--nj-font-space-weight-light) 300
var(--nj-font-space-weight-normal) 400
var(--nj-font-space-weight-bold) 700
var(--nj-font-space-weight-black) 900
var(--nj-font-space-line-height-default) {font.line.height.sansSerif}
var(--nj-font-space-line-height-sansSerif) 1.5

Motion

Css variable Value
var(--nj-motion-bezier-fast-out-slow-in) cubic-bezier(.4, 0, .2, 1)
var(--nj-motion-bezier-linear-out-slow-in) cubic-bezier(0, 0, .2, 1)
var(--nj-motion-bezier-fast-out-linear-in) cubic-bezier(.4, 0, 1, 1)

Shadow

Css variable Preview light Preview dark
var(--nj-shadow-level-2-dp)
var(--nj-shadow-level-4-dp)
var(--nj-shadow-level-6-dp)
var(--nj-shadow-level-8-dp)
var(--nj-shadow-level-16-dp)
var(--nj-shadow-level-24-dp)