Skip to main content Skip to docs navigation

Colors

Colors are designed to be clear and accessible.

SCSS variables

the notation below can be used to use scss tokens

@use '@seduo/design-system/scss/tokens/colors';

if you want to use more second tokens, they can also be loaded according to the notation below (but they may not contain all custom brand tokens, which are defined in the table below)

@use '@seduo/design-system/scss/@tokens' as tokens;
sass variable css token value
$white var(--spirit-color-white)
#ffffff
rgb(255, 255, 255)
$black var(--spirit-color-black)
#000000
rgb(0, 0, 0)
$brand-primary var(--spirit-color-brand-primary)
#321c3d
rgb(50, 28, 61)
$brand-secondary var(--spirit-color-brand-secondary)
#ff9900
rgb(255, 153, 0)
$brand-light var(--spirit-color-brand-light)
#65457d
rgb(101, 69, 125)
$brand-background var(--spirit-color-brand-background)
#eee4f5
rgb(238, 228, 245)
$brand-primary-inverted var(--spirit-color-brand-primary-inverted)
#4b3754
rgb(75, 55, 84)
$text-primary-default var(--spirit-color-text-primary-default)
#2e383c
rgb(46, 56, 60)
$text-primary-disabled var(--spirit-color-text-primary-disabled)
#dfdfe0
rgb(223, 223, 224)
$text-primary-inverted-default var(--spirit-color-text-primary-inverted-default)
#ffffff
rgb(255, 255, 255)
$text-primary-inverted-disabled var(--spirit-color-text-primary-inverted-disabled)
#737373
rgb(115, 115, 115)
$text-secondary-default var(--spirit-color-text-secondary-default)
#717579
rgb(113, 117, 121)
$text-secondary-disabled var(--spirit-color-text-secondary-disabled)
#dfdfe0
rgb(223, 223, 224)
$text-secondary-inverted-default var(--spirit-color-text-secondary-inverted-default)
#e9e9e9
rgb(233, 233, 233)
$text-secondary-inverted-disabled var(--spirit-color-text-secondary-inverted-disabled)
#737373
rgb(115, 115, 115)
$text-light var(--spirit-color-text-light)
#949b9f
rgb(148, 155, 159)
$text-light-disabled var(--spirit-color-text-light-disabled)
#dfdfe0
rgb(223, 223, 224)
$action-primary-default var(--spirit-color-action-primary-default)
#18b48e
rgb(24, 180, 142)
$action-primary-hover var(--spirit-color-action-primary-hover)
#159c7b
rgb(21, 156, 123)
$action-primary-active var(--spirit-color-action-primary-active)
#118267
rgb(17, 130, 103)
$action-primary-disabled var(--spirit-color-action-primary-disabled)
#d6d8dd
rgb(214, 216, 221)
$action-secondary-default var(--spirit-color-action-secondary-default)
#e8ebea
rgb(232, 235, 234)
$action-secondary-hover var(--spirit-color-action-secondary-hover)
#e2e6e4
rgb(226, 230, 228)
$action-secondary-active var(--spirit-color-action-secondary-active)
#dce0df
rgb(220, 224, 223)
$action-secondary-disabled var(--spirit-color-action-secondary-disabled)
#f7f7f8
rgb(247, 247, 248)
$action-tertiary-default var(--spirit-color-action-tertiary-default)
#e7e7e9
rgb(231, 231, 233)
$action-tertiary-hover var(--spirit-color-action-tertiary-hover)
#dbdbde
rgb(219, 219, 222)
$action-tertiary-active var(--spirit-color-action-tertiary-active)
#f3f3f5
rgb(243, 243, 245)
$action-tertiary-disabled var(--spirit-color-action-tertiary-disabled)
#f4f4f5
rgb(244, 244, 245)
$action-selected-default var(--spirit-color-action-selected-default)
#18b48e
rgb(24, 180, 142)
$action-selected-active var(--spirit-color-action-selected-active)
#118267
rgb(17, 130, 103)
$action-selected-disabled var(--spirit-color-action-selected-disabled)
#d6d8dd
rgb(214, 216, 221)
$action-selected-hover var(--spirit-color-action-selected-hover)
#159c7b
rgb(21, 156, 123)
$action-unselected-default var(--spirit-color-action-unselected-default)
#2e383c
rgb(46, 56, 60)
$action-unselected-disabled var(--spirit-color-action-unselected-disabled)
#d6d8dd
rgb(214, 216, 221)
$action-unselected-active var(--spirit-color-action-unselected-active)
#091417
rgb(9, 20, 23)
$action-unselected-hover var(--spirit-color-action-unselected-hover)
#0b1c21
rgb(11, 28, 33)
$action-inverted-active var(--spirit-color-action-inverted-active)
#d4d4d4
rgb(212, 212, 212)
$action-inverted-default var(--spirit-color-action-inverted-default)
#e9e9e9
rgb(233, 233, 233)
$action-inverted-disabled var(--spirit-color-action-inverted-disabled)
#c4c4c4
rgb(196, 196, 196)
$action-inverted-hover var(--spirit-color-action-inverted-hover)
#dbdbdb
rgb(219, 219, 219)
$action-link-primary-default var(--spirit-color-action-link-primary-default)
#5082cc
rgb(80, 130, 204)
$action-link-primary-hover var(--spirit-color-action-link-primary-hover)
#4671b2
rgb(70, 113, 178)
$action-link-primary-active var(--spirit-color-action-link-primary-active)
#3c6199
rgb(60, 97, 153)
$action-link-primary-disabled var(--spirit-color-action-link-primary-disabled)
#dfdfe0
rgb(223, 223, 224)
$action-link-primary-visited var(--spirit-color-action-link-primary-visited)
#64a1ff
rgb(100, 161, 255)
$action-link-secondary-default var(--spirit-color-action-link-secondary-default)
#949b9f
rgb(148, 155, 159)
$action-link-secondary-hover var(--spirit-color-action-link-secondary-hover)
#878e91
rgb(135, 142, 145)
$action-link-secondary-active var(--spirit-color-action-link-secondary-active)
#7b8285
rgb(123, 130, 133)
$action-link-secondary-disabled var(--spirit-color-action-link-secondary-disabled)
#dfdfe0
rgb(223, 223, 224)
$action-link-secondary-visited var(--spirit-color-action-link-secondary-visited)
#acb6ba
rgb(172, 182, 186)
$action-link-inverted-default var(--spirit-color-action-link-inverted-default)
#8db8f6
rgb(141, 184, 246)
$action-link-inverted-hover var(--spirit-color-action-link-inverted-hover)
#69a2f3
rgb(105, 162, 243)
$action-link-inverted-active var(--spirit-color-action-link-inverted-active)
#5796f2
rgb(87, 150, 242)
$action-link-inverted-disabled var(--spirit-color-action-link-inverted-disabled)
#737373
rgb(115, 115, 115)
$action-link-inverted-visited var(--spirit-color-action-link-inverted-visited)
#bfd6f9
rgb(191, 214, 249)
$action-link-tertiary-default var(--spirit-color-action-link-tertiary-default)
#2e383c
rgb(46, 56, 60)
$action-link-tertiary-hover var(--spirit-color-action-link-tertiary-hover)
#5a696f
rgb(90, 105, 111)
$action-link-tertiary-active var(--spirit-color-action-link-tertiary-active)
#7b8d94
rgb(123, 141, 148)
$action-link-tertiary-disabled var(--spirit-color-action-link-tertiary-disabled)
#dfdfe0
rgb(223, 223, 224)
$action-link-tertiary-visited var(--spirit-color-action-link-tertiary-visited)
#2e383c
rgb(46, 56, 60)
$border-primary-default var(--spirit-color-border-primary-default)
#e7e7e9
rgb(231, 231, 233)
$border-primary-hover var(--spirit-color-border-primary-hover)
#dbdbde
rgb(219, 219, 222)
$border-primary-active var(--spirit-color-border-primary-active)
#c9c9cc
rgb(201, 201, 204)
$border-primary-selected var(--spirit-color-border-primary-selected)
#18b48e
rgb(24, 180, 142)
$border-primary-disabled var(--spirit-color-border-primary-disabled)
#f5f6f7
rgb(245, 246, 247)
$border-primary-focus var(--spirit-color-border-primary-focus)
#5082cc
rgb(80, 130, 204)
$emotion-danger-default var(--spirit-color-emotion-danger-default)
#db506c
rgb(219, 80, 108)
$emotion-danger-hover var(--spirit-color-emotion-danger-hover)
#cf4b66
rgb(207, 75, 102)
$emotion-danger-active var(--spirit-color-emotion-danger-active)
#c24760
rgb(194, 71, 96)
$emotion-danger-disabled var(--spirit-color-emotion-danger-disabled)
#ebeaea
rgb(235, 234, 234)
$emotion-danger-background var(--spirit-color-emotion-danger-background)
#ffeef1
rgb(255, 238, 241)
$emotion-warning-default var(--spirit-color-emotion-warning-default)
#ff9e45
rgb(255, 158, 69)
$emotion-warning-hover var(--spirit-color-emotion-warning-hover)
#ef751d
rgb(239, 117, 29)
$emotion-warning-active var(--spirit-color-emotion-warning-active)
#d7600b
rgb(215, 96, 11)
$emotion-warning-disabled var(--spirit-color-emotion-warning-disabled)
#ebeaea
rgb(235, 234, 234)
$emotion-warning-background var(--spirit-color-emotion-warning-background)
#fff3e8
rgb(255, 243, 232)
$emotion-success-default var(--spirit-color-emotion-success-default)
#21b26d
rgb(33, 178, 109)
$emotion-success-hover var(--spirit-color-emotion-success-hover)
#16b066
rgb(22, 176, 102)
$emotion-success-active var(--spirit-color-emotion-success-active)
#109464
rgb(16, 148, 100)
$emotion-success-disabled var(--spirit-color-emotion-success-disabled)
#ebeaea
rgb(235, 234, 234)
$emotion-success-background var(--spirit-color-emotion-success-background)
#e1fcf2
rgb(225, 252, 242)
$emotion-informative-default var(--spirit-color-emotion-informative-default)
#5082cc
rgb(80, 130, 204)
$emotion-informative-hover var(--spirit-color-emotion-informative-hover)
#436cab
rgb(67, 108, 171)
$emotion-informative-active var(--spirit-color-emotion-informative-active)
#37598c
rgb(55, 89, 140)
$emotion-informative-disabled var(--spirit-color-emotion-informative-disabled)
#ebeaea
rgb(235, 234, 234)
$emotion-informative-background var(--spirit-color-emotion-informative-background)
#e6f4f8
rgb(230, 244, 248)
$background-basic var(--spirit-color-background-basic)
#ffffff
rgb(255, 255, 255)
$background-cover var(--spirit-color-background-cover)
#f5f6f7
rgb(245, 246, 247)
$background-interactive-default var(--spirit-color-background-interactive-default)
#ffffff
rgb(255, 255, 255)
$background-interactive-hover var(--spirit-color-background-interactive-hover)
#f5f5f5
rgb(245, 245, 245)
$background-interactive-active var(--spirit-color-background-interactive-active)
#e9e9e9
rgb(233, 233, 233)
$background-interactive-selected var(--spirit-color-background-interactive-selected)
#edf9f6
rgb(237, 249, 246)
$background-inverted var(--spirit-color-background-inverted)
#191c1d
rgb(25, 28, 29)
$background-inverted-cover var(--spirit-color-background-inverted-cover)
#292e31
rgb(41, 46, 49)
On this page