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