Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Tools
  • Color aliases

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    focus-indicator-color alias {blue-800} light: rgb(75, 117, 255)
    dark: rgb(64, 105, 253)
    wireframe: rgb(93, 127, 201)
    No - -
    static-white-focus-indicator-color alias {white} rgb(255, 255, 255) No - -
    static-black-focus-indicator-color alias {black} rgb(0, 0, 0) No - -
    overlay-color alias {black} rgb(0, 0, 0) No - -
    overlay-opacity color-set - light: 0.4
    dark: 0.6
    wireframe: 0.4
    No - -
    drop-shadow-color alias {drop-shadow-color-100} light: rgba(0, 0, 0, 0.12)
    dark: rgba(0, 0, 0, 0.36)
    wireframe: rgba(0, 0, 0, 0.12)
    Yes Replaced with drop-shadow-color-100 Replaced by drop-shadow-color-100
    opacity-disabled opacity 0.3 0.3 No - -
    background-base-color alias {gray-25} dark: rgb(17, 17, 17)
    light: rgb(255, 255, 255)
    wireframe: rgb(254, 254, 255)
    No - -
    background-layer-1-color alias {gray-50} light: rgb(248, 248, 248)
    dark: rgb(27, 27, 27)
    wireframe: rgb(246, 248, 253)
    No - -
    background-layer-2-color color-set - light: rgb(255, 255, 255)
    dark: rgb(34, 34, 34)
    wireframe: rgb(254, 254, 255)
    No - -
    neutral-background-color-default alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-background-color-hover alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-background-color-down alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-background-color-key-focus alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-background-color-selected-default alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-background-color-selected-hover alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-background-color-selected-down alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-background-color-selected-key-focus alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-subdued-background-color-default color-set - light: rgb(80, 80, 80)
    dark: rgb(109, 109, 109)
    wireframe: rgb(44, 77, 149)
    No - -
    neutral-subdued-background-color-hover color-set - light: rgb(41, 41, 41)
    dark: rgb(68, 68, 68)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-subdued-background-color-down color-set - light: rgb(41, 41, 41)
    dark: rgb(68, 68, 68)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-subdued-background-color-key-focus color-set - light: rgb(41, 41, 41)
    dark: rgb(68, 68, 68)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-subdued-content-color-selected alias {neutral-subdued-content-color-down} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    accent-background-color-default color-set - light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)
    No - -
    accent-background-color-hover color-set - light: rgb(39, 77, 234)
    dark: rgb(52, 91, 248)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-background-color-down color-set - light: rgb(39, 77, 234)
    dark: rgb(52, 91, 248)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-background-color-key-focus color-set - light: rgb(39, 77, 234)
    dark: rgb(52, 91, 248)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-content-color-selected alias {accent-content-color-down} light: rgb(39, 77, 234)
    dark: rgb(105, 149, 254)
    wireframe: rgb(61, 94, 165)
    No - -
    informative-background-color-default color-set - light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)
    No - -
    informative-background-color-hover color-set - light: rgb(39, 77, 234)
    dark: rgb(52, 91, 248)
    wireframe: rgb(61, 94, 165)
    No - -
    informative-background-color-down color-set - light: rgb(39, 77, 234)
    dark: rgb(52, 91, 248)
    wireframe: rgb(61, 94, 165)
    No - -
    informative-background-color-key-focus color-set - light: rgb(39, 77, 234)
    dark: rgb(52, 91, 248)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-background-color-default color-set - light: rgb(215, 50, 32)
    dark: rgb(223, 52, 34)
    wireframe: rgb(74, 111, 195)
    No - -
    negative-background-color-hover color-set - light: rgb(183, 40, 24)
    dark: rgb(205, 46, 29)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-background-color-down color-set - light: rgb(183, 40, 24)
    dark: rgb(205, 46, 29)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-background-color-key-focus color-set - light: rgb(183, 40, 24)
    dark: rgb(205, 46, 29)
    wireframe: rgb(61, 94, 165)
    No - -
    positive-background-color-default color-set - light: rgb(5, 131, 78)
    dark: rgb(6, 136, 80)
    wireframe: rgb(74, 111, 195)
    No - -
    positive-background-color-hover color-set - light: rgb(3, 110, 69)
    dark: rgb(4, 124, 75)
    wireframe: rgb(61, 94, 165)
    No - -
    positive-background-color-down color-set - light: rgb(3, 110, 69)
    dark: rgb(4, 124, 75)
    wireframe: rgb(61, 94, 165)
    No - -
    positive-background-color-key-focus color-set - light: rgb(3, 110, 69)
    dark: rgb(4, 124, 75)
    wireframe: rgb(61, 94, 165)
    No - -
    notice-background-color-default color-set - dark: rgb(224, 100, 0)
    light: rgb(252, 125, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    disabled-background-color alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)
    No - -
    disabled-static-white-background-color alias {transparent-white-100} rgba(255, 255, 255, 0.11) No - -
    disabled-static-black-background-color alias {transparent-black-100} rgba(0, 0, 0, 0.09) No - -
    gray-background-color-default color-set - light: rgb(80, 80, 80)
    dark: rgb(109, 109, 109)
    wireframe: rgb(44, 77, 149)
    No - -
    red-background-color-default color-set - light: rgb(215, 50, 32)
    dark: rgb(223, 52, 34)
    wireframe: rgb(74, 111, 195)
    No - -
    orange-background-color-default color-set - light: rgb(252, 125, 0)
    dark: rgb(224, 100, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    yellow-background-color-default color-set - light: rgb(245, 199, 0)
    dark: rgb(218, 159, 0)
    wireframe: rgb(192, 205, 234)
    No - -
    chartreuse-background-color-default color-set - light: rgb(163, 196, 0)
    dark: rgb(136, 164, 0)
    wireframe: rgb(164, 183, 225)
    No - -
    celery-background-color-default color-set - light: rgb(93, 180, 31)
    dark: rgb(78, 154, 23)
    wireframe: rgb(135, 160, 215)
    No - -
    green-background-color-default color-set - light: rgb(5, 131, 78)
    dark: rgb(6, 136, 80)
    wireframe: rgb(74, 111, 195)
    No - -
    seafoam-background-color-default color-set - light: rgb(7, 129, 109)
    dark: rgb(8, 134, 112)
    wireframe: rgb(74, 111, 195)
    No - -
    cyan-background-color-default color-set - light: rgb(11, 120, 179)
    dark: rgb(13, 125, 186)
    wireframe: rgb(74, 111, 195)
    No - -
    blue-background-color-default color-set - light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)
    No - -
    indigo-background-color-default color-set - light: rgb(113, 85, 250)
    dark: rgb(116, 91, 252)
    wireframe: rgb(74, 111, 195)
    No - -
    purple-background-color-default color-set - light: rgb(154, 71, 226)
    dark: rgb(157, 78, 228)
    wireframe: rgb(74, 111, 195)
    No - -
    fuchsia-background-color-default color-set - light: rgb(181, 57, 200)
    dark: rgb(186, 60, 206)
    wireframe: rgb(74, 111, 195)
    No - -
    magenta-background-color-default color-set - light: rgb(217, 35, 97)
    dark: rgb(224, 38, 101)
    wireframe: rgb(74, 111, 195)
    No - -
    background-opacity-default opacity 0 0 No - -
    background-opacity-hover opacity 0.1 0.1 No - -
    background-opacity-down opacity 0.1 0.1 No - -
    background-opacity-key-focus opacity 0.1 0.1 No - -
    neutral-content-color-default alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-content-color-hover alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-content-color-down alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-content-color-focus-hover alias {neutral-content-color-down} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-content-color-focus alias {neutral-content-color-down} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-content-color-key-focus alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    neutral-subdued-content-color-default alias {gray-700} light: rgb(80, 80, 80)
    dark: rgb(175, 175, 175)
    wireframe: rgb(44, 77, 149)
    No - -
    neutral-subdued-content-color-hover alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-subdued-content-color-down alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    neutral-subdued-content-color-key-focus alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    accent-content-color-default alias {accent-color-900} light: rgb(59, 99, 251)
    dark: rgb(86, 129, 255)
    wireframe: rgb(74, 111, 195)
    No - -
    accent-content-color-hover alias {accent-color-1000} light: rgb(39, 77, 234)
    dark: rgb(105, 149, 254)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-content-color-down alias {accent-color-1000} light: rgb(39, 77, 234)
    dark: rgb(105, 149, 254)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-content-color-key-focus alias {accent-color-1000} light: rgb(39, 77, 234)
    dark: rgb(105, 149, 254)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-content-color-default alias {negative-color-900} light: rgb(215, 50, 32)
    dark: rgb(252, 67, 46)
    wireframe: rgb(74, 111, 195)
    No - -
    negative-content-color-hover alias {negative-color-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-content-color-down alias {negative-color-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-content-color-key-focus alias {negative-color-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    disabled-content-color alias {gray-400} light: rgb(198, 198, 198)
    dark: rgb(68, 68, 68)
    wireframe: rgb(180, 199, 239)
    No - -
    disabled-static-white-content-color alias {transparent-white-400} rgba(255, 255, 255, 0.21) No - -
    disabled-static-black-content-color alias {transparent-black-400} rgba(0, 0, 0, 0.22) No - -
    neutral-visual-color color-set - light: rgb(143, 143, 143)
    dark: rgb(138, 138, 138)
    wireframe: rgb(108, 142, 217)
    No - -
    accent-visual-color color-set - light: rgb(75, 117, 255)
    dark: rgb(86, 129, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    informative-visual-color color-set - light: rgb(75, 117, 255)
    dark: rgb(86, 129, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    negative-visual-color color-set - light: rgb(240, 56, 35)
    dark: rgb(252, 67, 46)
    wireframe: rgb(93, 127, 201)
    No - -
    notice-visual-color color-set - light: rgb(212, 91, 0)
    dark: rgb(224, 100, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    positive-visual-color color-set - light: rgb(7, 147, 85)
    dark: rgb(9, 157, 89)
    wireframe: rgb(93, 127, 201)
    No - -
    gray-visual-color color-set - light: rgb(143, 143, 143)
    dark: rgb(138, 138, 138)
    wireframe: rgb(108, 142, 217)
    No - -
    red-visual-color color-set - light: rgb(240, 56, 35)
    dark: rgb(205, 46, 29)
    wireframe: rgb(93, 127, 201)
    No - -
    orange-visual-color color-set - light: rgb(232, 106, 0)
    dark: rgb(224, 100, 0)
    wireframe: rgb(113, 142, 208)
    No - -
    yellow-visual-color color-set - light: rgb(210, 149, 0)
    dark: rgb(218, 159, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    chartreuse-visual-color color-set - light: rgb(143, 172, 0)
    dark: rgb(122, 147, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    celery-visual-color color-set - light: rgb(82, 161, 25)
    dark: rgb(66, 134, 18)
    wireframe: rgb(113, 142, 208)
    No - -
    green-visual-color color-set - light: rgb(11, 164, 93)
    dark: rgb(6, 136, 80)
    wireframe: rgb(113, 142, 208)
    No - -
    seafoam-visual-color color-set - light: rgb(11, 162, 134)
    dark: rgb(8, 134, 112)
    wireframe: rgb(113, 142, 208)
    No - -
    cyan-visual-color color-set - light: rgb(48, 167, 254)
    dark: rgb(24, 142, 220)
    wireframe: rgb(135, 160, 215)
    No - -
    blue-visual-color color-set - light: rgb(75, 117, 255)
    dark: rgb(86, 129, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    indigo-visual-color color-set - light: rgb(122, 106, 253)
    dark: rgb(128, 119, 254)
    wireframe: rgb(93, 127, 201)
    No - -
    purple-visual-color color-set - light: rgb(166, 92, 231)
    dark: rgb(173, 105, 233)
    wireframe: rgb(93, 127, 201)
    No - -
    fuchsia-visual-color color-set - light: rgb(200, 68, 220)
    dark: rgb(213, 73, 235)
    wireframe: rgb(93, 127, 201)
    No - -
    magenta-visual-color color-set - light: rgb(240, 45, 110)
    dark: rgb(255, 51, 119)
    wireframe: rgb(93, 127, 201)
    No - -
    disabled-border-color alias {gray-300} light: rgb(218, 218, 218)
    dark: rgb(57, 57, 57)
    wireframe: rgb(207, 219, 245)
    No - -
    disabled-static-white-border-color alias {transparent-white-300} rgba(255, 255, 255, 0.17) No - -
    disabled-static-black-border-color alias {transparent-black-300} rgba(0, 0, 0, 0.15) No - -
    negative-border-color-default alias {negative-color-900} light: rgb(215, 50, 32)
    dark: rgb(252, 67, 46)
    wireframe: rgb(74, 111, 195)
    No - -
    negative-border-color-hover alias {negative-color-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-border-color-down alias {negative-color-1100} light: rgb(156, 33, 19)
    dark: rgb(255, 134, 120)
    wireframe: rgb(52, 79, 140)
    No - -
    negative-border-color-focus-hover alias {negative-border-color-down} light: rgb(156, 33, 19)
    dark: rgb(255, 134, 120)
    wireframe: rgb(52, 79, 140)
    No - -
    negative-border-color-focus alias {negative-color-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-border-color-key-focus alias {negative-color-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    background-elevated-color color-set - dark: rgb(34, 34, 34)
    light: rgb(255, 255, 255)
    wireframe: rgb(254, 254, 255)
    No - -
    background-pasteboard-color color-set - dark: rgb(17, 17, 17)
    light: rgb(233, 233, 233)
    wireframe: rgb(228, 234, 249)
    No - -
    brown-visual-color color-set - light: rgb(154, 123, 77)
    dark: rgb(163, 132, 84)
    wireframe: rgb(93, 127, 201)
    No - -
    cinnamon-visual-color color-set - light: rgb(184, 109, 70)
    dark: rgb(192, 119, 80)
    wireframe: rgb(93, 127, 201)
    No - -
    pink-visual-color color-set - light: rgb(228, 52, 163)
    dark: rgb(236, 67, 175)
    wireframe: rgb(93, 127, 201)
    No - -
    silver-visual-color color-set - light: rgb(128, 128, 128)
    dark: rgb(137, 137, 137)
    wireframe: rgb(93, 127, 201)
    No - -
    turquoise-visual-color color-set - light: rgb(10, 141, 153)
    dark: rgb(11, 151, 164)
    wireframe: rgb(93, 127, 201)
    No - -
    brown-background-color-default color-set - light: rgb(139, 109, 66)
    dark: rgb(143, 114, 69)
    wireframe: rgb(74, 111, 195)
    No - -
    cinnamon-background-color-default color-set - light: rgb(170, 94, 56)
    dark: rgb(176, 98, 59)
    wireframe: rgb(74, 111, 195)
    No - -
    pink-background-color-default color-set - light: rgb(206, 42, 146)
    dark: rgb(213, 45, 151)
    wireframe: rgb(74, 111, 195)
    No - -
    silver-background-color-default color-set - light: rgb(114, 114, 114)
    dark: rgb(118, 118, 118)
    wireframe: rgb(74, 111, 195)
    No - -
    turquoise-background-color-default color-set - light: rgb(8, 126, 137)
    dark: rgb(9, 131, 142)
    wireframe: rgb(74, 111, 195)
    No - -
    title-color alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    drop-shadow-color-100 color-set - light: rgba(0, 0, 0, 0.12)
    dark: rgba(0, 0, 0, 0.36)
    wireframe: rgba(0, 0, 0, 0.12)
    No - -
    drop-shadow-color-200 color-set - light: rgba(0, 0, 0, 0.16)
    dark: rgba(0, 0, 0, 0.48)
    wireframe: rgba(0, 0, 0, 0.16)
    No - -
    drop-shadow-color-300 color-set - light: rgba(0, 0, 0, 0.2)
    dark: rgba(0, 0, 0, 0.6)
    wireframe: rgba(0, 0, 0, 0.2)
    No - -
    drop-shadow-emphasized-default-color alias {drop-shadow-color-100} light: rgba(0, 0, 0, 0.12)
    dark: rgba(0, 0, 0, 0.36)
    wireframe: rgba(0, 0, 0, 0.12)
    No - -
    drop-shadow-emphasized-hover-color alias {drop-shadow-color-200} light: rgba(0, 0, 0, 0.16)
    dark: rgba(0, 0, 0, 0.48)
    wireframe: rgba(0, 0, 0, 0.16)
    No - -
    drop-shadow-elevated-color alias {drop-shadow-color-200} light: rgba(0, 0, 0, 0.16)
    dark: rgba(0, 0, 0, 0.48)
    wireframe: rgba(0, 0, 0, 0.16)
    No - -
    neutral-subtle-background-color-default color-set - light: rgb(233, 233, 233)
    dark: rgb(57, 57, 57)
    wireframe: rgb(228, 234, 249)
    No - -
    static-black-text-color alias {black} rgb(0, 0, 0) No - -
    static-white-text-color alias {white} rgb(255, 255, 255) No - -
    track-color alias {gray-300} light: rgb(218, 218, 218)
    dark: rgb(57, 57, 57)
    wireframe: rgb(207, 219, 245)
    No - -
    static-black-track-color alias {transparent-black-300} rgba(0, 0, 0, 0.15) No - -
    static-white-track-color alias {transparent-white-300} rgba(255, 255, 255, 0.17) No - -
    static-black-track-indicator-color alias {transparent-black-900} rgba(0, 0, 0, 0.93) No - -
    static-white-track-indicator-color alias {transparent-white-900} rgba(255, 255, 255, 0.94) No - -
    drop-shadow-dragged-color alias {drop-shadow-color-300} light: rgba(0, 0, 0, 0.2)
    dark: rgba(0, 0, 0, 0.6)
    wireframe: rgba(0, 0, 0, 0.2)
    No - -
    gray-subtle-background-color-default color-set - light: rgb(233, 233, 233)
    dark: rgb(57, 57, 57)
    wireframe: rgb(228, 234, 249)
    No - -
    blue-subtle-background-color-default color-set - light: rgb(229, 240, 254)
    dark: rgb(12, 33, 117)
    wireframe: rgb(235, 239, 248)
    No - -
    green-subtle-background-color-default color-set - light: rgb(215, 247, 225)
    dark: rgb(0, 51, 38)
    wireframe: rgb(235, 239, 248)
    No - -
    orange-subtle-background-color-default color-set - light: rgb(255, 236, 207)
    dark: rgb(80, 27, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    red-subtle-background-color-default color-set - light: rgb(255, 235, 232)
    dark: rgb(87, 17, 7)
    wireframe: rgb(235, 239, 248)
    No - -
    brown-subtle-background-color-default color-set - light: rgb(247, 238, 225)
    dark: rgb(58, 40, 14)
    wireframe: rgb(235, 239, 248)
    No - -
    cinnamon-subtle-background-color-default color-set - light: rgb(249, 236, 229)
    dark: rgb(79, 28, 7)
    wireframe: rgb(235, 239, 248)
    No - -
    celery-subtle-background-color-default color-set - light: rgb(197, 255, 156)
    dark: rgb(21, 51, 1)
    wireframe: rgb(235, 239, 248)
    No - -
    chartreuse-subtle-background-color-default color-set - light: rgb(234, 246, 173)
    dark: rgb(39, 47, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    cyan-subtle-background-color-default color-set - light: rgb(217, 244, 253)
    dark: rgb(0, 48, 65)
    wireframe: rgb(235, 239, 248)
    No - -
    fuchsia-subtle-background-color-default color-set - light: rgb(253, 233, 255)
    dark: rgb(79, 0, 95)
    wireframe: rgb(235, 239, 248)
    No - -
    indigo-subtle-background-color-default color-set - light: rgb(235, 238, 255)
    dark: rgb(47, 0, 140)
    wireframe: rgb(235, 239, 248)
    No - -
    magenta-subtle-background-color-default color-set - light: rgb(255, 232, 240)
    dark: rgb(93, 0, 34)
    wireframe: rgb(235, 239, 248)
    No - -
    pink-subtle-background-color-default color-set - light: rgb(255, 232, 247)
    dark: rgb(90, 0, 57)
    wireframe: rgb(235, 239, 248)
    No - -
    purple-subtle-background-color-default color-set - light: rgb(244, 235, 252)
    dark: rgb(64, 0, 122)
    wireframe: rgb(235, 239, 248)
    No - -
    seafoam-subtle-background-color-default color-set - light: rgb(211, 246, 234)
    dark: rgb(0, 50, 44)
    wireframe: rgb(235, 239, 248)
    No - -
    silver-subtle-background-color-default color-set - light: rgb(239, 239, 239)
    dark: rgb(44, 44, 44)
    wireframe: rgb(235, 239, 248)
    No - -
    turquoise-subtle-background-color-default color-set - light: rgb(209, 245, 245)
    dark: rgb(0, 49, 54)
    wireframe: rgb(235, 239, 248)
    No - -
    yellow-subtle-background-color-default color-set - light: rgb(255, 241, 151)
    dark: rgb(61, 39, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    drop-shadow-ambient-color color-set - light: rgba(0, 0, 0, 0.08)
    dark: rgba(0, 0, 0, 0.24)
    wireframe: rgba(0, 0, 0, 0.08)
    No - -
    drop-shadow-transition-color color-set - light: rgba(0, 0, 0, 0.04)
    dark: rgba(0, 0, 0, 0.12)
    wireframe: rgba(0, 0, 0, 0.04)
    No - -
    drop-shadow-emphasized-key-color color-set - light: rgba(0, 0, 0, 0.08)
    dark: rgba(0, 0, 0, 0.24)
    wireframe: rgba(0, 0, 0, 0.08)
    No - -
    drop-shadow-emphasized-hover-key-color color-set - light: rgba(0, 0, 0, 0.12)
    dark: rgba(0, 0, 0, 0.36)
    wireframe: rgba(0, 0, 0, 0.12)
    No - -
    drop-shadow-elevated-key-color color-set - light: rgba(0, 0, 0, 0.12)
    dark: rgba(0, 0, 0, 0.36)
    wireframe: rgba(0, 0, 0, 0.12)
    No - -
    drop-shadow-dragged-key-color color-set - light: rgba(0, 0, 0, 0.16)
    dark: rgba(0, 0, 0, 0.48)
    wireframe: rgba(0, 0, 0, 0.16)
    No - -
    drop-shadow-emphasized drop-shadow 0px 2px 8px 0px {drop-shadow-ambient-color}, 0px 1px 4px 0px {drop-shadow-transition-color}, 0px 0px 1px 0px {drop-shadow-emphasized-key-color} 0px 2px 8px 0px {drop-shadow-ambient-color}, 0px 1px 4px 0px {drop-shadow-transition-color}, 0px 0px 1px 0px {drop-shadow-emphasized-key-color} No - -
    drop-shadow-emphasized-hover drop-shadow 0px 4px 12px 0px {drop-shadow-ambient-color}, 0px 2px 6px 0px {drop-shadow-transition-color}, 0px 0px 2px 0px {drop-shadow-emphasized-key-color} 0px 4px 12px 0px {drop-shadow-ambient-color}, 0px 2px 6px 0px {drop-shadow-transition-color}, 0px 0px 2px 0px {drop-shadow-emphasized-key-color} No - -
    drop-shadow-elevated drop-shadow 0px 4px 12px 0px {drop-shadow-ambient-color}, 0px 2px 6px 0px {drop-shadow-transition-color}, 0px 0px 2px 0px {drop-shadow-elevated-key-color} 0px 4px 12px 0px {drop-shadow-ambient-color}, 0px 2px 6px 0px {drop-shadow-transition-color}, 0px 0px 2px 0px {drop-shadow-elevated-key-color} No - -
    drop-shadow-dragged drop-shadow 0px 12px 16px 0px {drop-shadow-ambient-color}, 0px 6px 8px 0px {drop-shadow-transition-color}, 0px 0px 6px 0px {drop-shadow-dragged-key-color} 0px 12px 16px 0px {drop-shadow-ambient-color}, 0px 6px 8px 0px {drop-shadow-transition-color}, 0px 0px 6px 0px {drop-shadow-dragged-key-color} No - -