Skip to main content

Colors

Available Innomotics colors'

$primary-100
$primary-200
$primary-300
$secondary-50
$secondary-100
$secondary-200
$secondary-300
$secondary-400
$secondary-500
$secondary-600
$secondary-700
$secondary-800
$secondary-900
$chart-25
$chart-50
$chart-75
$chart-100
$chart-125
$chart-150
$chart-175
$chart-200
$chart-225
$chart-250
$chart-275
$chart-300
$chart-325
$chart-350
$chart-375
$chart-400
$chart-425
$chart-450
$error-100
$error-200
$critical-200
$warning-200
$success-100
$success-200
$internal-100
$internal-200
$focus-100
$backdrop
$text-light-highemphasis
$text-light-lowemphasis
$text-light-buttonlabel
$interaction-light-default
$interaction-light-hover
$interaction-light-pressed
$interaction-light-visited
$interaction-light-disabled
$interaction-light-focus
$highlight-light-100
$highlight-light-200
$background-light-100
$background-light-200
$background-light-300
$additional-light-100
$additional-light-200
$additional-light-300
$additional-light-400
$status-light-error
$status-light-critical
$status-ligth-warning
$status-light-success
$status-light-internal
$transparency-light-100
$transparency-light-200
$chart-light-1
$chart-light-2
$chart-light-3
$chart-light-4
$chart-light-5
$chart-light-6
$chart-light-7
$chart-light-8
$chart-light-9
$chart-light-10
$chart-light-11
$chart-light-12
$text-dark-highemphasis
$text-dark-lowemphasis
$text-dark-buttonlabel
$interaction-dark-default
$interaction-dark-hover
$interaction-dark-pressed
$interaction-dark-visited
$interaction-dark-disabled
$interaction-dark-focus
$highlight-dark-100
$highlight-dark-200
$background-dark-100
$background-dark-200
$background-dark-300
$additional-dark-100
$additional-dark-200
$additional-dark-300
$additional-dark-400
$status-dark-error
$status-dark-critical
$status-dark-warning
$status-dark-success
$status-dark-internal
$transparency-dark-100
$transparency-dark-200
$chart-dark-1
$chart-dark-2
$chart-dark-3
$chart-dark-4
$chart-dark-5
$chart-dark-6
$chart-dark-7
$chart-dark-8
$chart-dark-9
$chart-dark-10
$chart-dark-11
$chart-dark-12

Usage

Import the colors either by @use @innomotics/brand-experience/dist/styles/colors; or @use @innomotics/brand-experience/dist/styles/innomotics;