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

    Color aliases

    Token Value Resolved Deprecated Deprecated comment Replaced by
    focus-indicator-color {blue-800} light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) No - -
    static-white-focus-indicator-color {white} rgb(255, 255, 255) No - -
    static-black-focus-indicator-color {black} rgb(0, 0, 0) No - -
    overlay-color {black} rgb(0, 0, 0) No - -
    overlay-opacity - light: 0.4; dark: 0.6; wireframe: 0.4 No - -
    drop-shadow-color {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 0.3 0.3 No - -
    background-base-color {gray-25} dark: rgb(17, 17, 17); light: rgb(255, 255, 255); wireframe: rgb(254, 254, 255) No - -
    background-layer-1-color {gray-50} light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) No - -
    background-layer-2-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    neutral-background-color-default {gray-800} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    neutral-background-color-hover {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-background-color-down {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-background-color-key-focus {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-background-color-selected-default {gray-800} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    neutral-background-color-selected-hover {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-background-color-selected-down {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-background-color-selected-key-focus {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-subdued-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    neutral-subdued-background-color-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    neutral-subdued-background-color-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    neutral-subdued-background-color-key-focus - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    neutral-subdued-content-color-selected {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 - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    accent-background-color-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    accent-background-color-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    accent-background-color-key-focus - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    accent-content-color-selected {accent-content-color-down} light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) No - -
    informative-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    informative-background-color-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    informative-background-color-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    informative-background-color-key-focus - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    negative-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    negative-background-color-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    negative-background-color-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    negative-background-color-key-focus - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    positive-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    positive-background-color-hover - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    positive-background-color-down - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    positive-background-color-key-focus - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    notice-background-color-default - dark: [object Object]; light: [object Object]; wireframe: [object Object] No - -
    disabled-background-color {gray-100} light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) No - -
    disabled-static-white-background-color {transparent-white-100} rgba(255, 255, 255, 0.11) No - -
    disabled-static-black-background-color {transparent-black-100} rgba(0, 0, 0, 0.09) No - -
    gray-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    red-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    orange-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    yellow-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    chartreuse-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    celery-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    green-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    seafoam-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    cyan-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    blue-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    indigo-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    purple-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    fuchsia-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    magenta-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    background-opacity-default 0 0 No - -
    background-opacity-hover 0.1 0.1 No - -
    background-opacity-down 0.1 0.1 No - -
    background-opacity-key-focus 0.1 0.1 No - -
    neutral-content-color-default {gray-800} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    neutral-content-color-hover {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-content-color-down {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-content-color-focus-hover {neutral-content-color-down} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-content-color-focus {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 {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    neutral-subdued-content-color-default {gray-700} light: rgb(80, 80, 80); dark: rgb(175, 175, 175); wireframe: rgb(44, 77, 149) No - -
    neutral-subdued-content-color-hover {gray-800} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    neutral-subdued-content-color-down {gray-800} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    neutral-subdued-content-color-key-focus {gray-800} light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) No - -
    accent-content-color-default {accent-color-900} light: rgb(59, 99, 251); dark: rgb(86, 129, 255); wireframe: rgb(74, 111, 195) No - -
    accent-content-color-hover {accent-color-1000} light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) No - -
    accent-content-color-down {accent-color-1000} light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) No - -
    accent-content-color-key-focus {accent-color-1000} light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) No - -
    negative-content-color-default {negative-color-900} light: rgb(215, 50, 32); dark: rgb(252, 67, 46); wireframe: rgb(74, 111, 195) No - -
    negative-content-color-hover {negative-color-1000} light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) No - -
    negative-content-color-down {negative-color-1000} light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) No - -
    negative-content-color-key-focus {negative-color-1000} light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) No - -
    disabled-content-color {gray-400} light: rgb(198, 198, 198); dark: rgb(68, 68, 68); wireframe: rgb(180, 199, 239) No - -
    disabled-static-white-content-color {transparent-white-400} rgba(255, 255, 255, 0.21) No - -
    disabled-static-black-content-color {transparent-black-400} rgba(0, 0, 0, 0.22) No - -
    neutral-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    accent-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    informative-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    negative-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    notice-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    positive-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    gray-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    red-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    orange-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    yellow-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    chartreuse-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    celery-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    green-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    seafoam-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    cyan-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    blue-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    indigo-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    purple-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    fuchsia-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    magenta-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    disabled-border-color {gray-300} light: rgb(218, 218, 218); dark: rgb(57, 57, 57); wireframe: rgb(207, 219, 245) No - -
    disabled-static-white-border-color {transparent-white-300} rgba(255, 255, 255, 0.17) No - -
    disabled-static-black-border-color {transparent-black-300} rgba(0, 0, 0, 0.15) No - -
    negative-border-color-default {negative-color-900} light: rgb(215, 50, 32); dark: rgb(252, 67, 46); wireframe: rgb(74, 111, 195) No - -
    negative-border-color-hover {negative-color-1000} light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) No - -
    negative-border-color-down {negative-color-1100} light: rgb(156, 33, 19); dark: rgb(255, 134, 120); wireframe: rgb(52, 79, 140) No - -
    negative-border-color-focus-hover {negative-border-color-down} light: rgb(156, 33, 19); dark: rgb(255, 134, 120); wireframe: rgb(52, 79, 140) No - -
    negative-border-color-focus {negative-color-1000} light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) No - -
    negative-border-color-key-focus {negative-color-1000} light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) No - -
    background-elevated-color - dark: [object Object]; light: [object Object]; wireframe: [object Object] No - -
    background-pasteboard-color - dark: [object Object]; light: [object Object]; wireframe: [object Object] No - -
    brown-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    cinnamon-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    pink-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    silver-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    turquoise-visual-color - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    brown-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    cinnamon-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    pink-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    silver-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    turquoise-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    title-color {gray-900} light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) No - -
    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-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-color-300 - 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 {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 {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 {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 - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    static-black-text-color {black} rgb(0, 0, 0) No - -
    static-white-text-color {white} rgb(255, 255, 255) No - -
    track-color {gray-300} light: rgb(218, 218, 218); dark: rgb(57, 57, 57); wireframe: rgb(207, 219, 245) No - -
    static-black-track-color {transparent-black-300} rgba(0, 0, 0, 0.15) No - -
    static-white-track-color {transparent-white-300} rgba(255, 255, 255, 0.17) No - -
    static-black-track-indicator-color {transparent-black-900} rgba(0, 0, 0, 0.93) No - -
    static-white-track-indicator-color {transparent-white-900} rgba(255, 255, 255, 0.94) No - -
    drop-shadow-dragged-color {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 - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    blue-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    green-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    orange-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    red-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    brown-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    cinnamon-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    celery-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    chartreuse-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    cyan-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    fuchsia-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    indigo-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    magenta-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    pink-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    purple-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    seafoam-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    silver-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    turquoise-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    yellow-subtle-background-color-default - light: [object Object]; dark: [object Object]; wireframe: [object Object] No - -
    drop-shadow-ambient-color - 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 - 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 - 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 - 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 - 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 - 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 [object Object],[object Object],[object Object] [object Object],[object Object],[object Object] No - -
    drop-shadow-emphasized-hover [object Object],[object Object],[object Object] [object Object],[object Object],[object Object] No - -
    drop-shadow-elevated [object Object],[object Object],[object Object] [object Object],[object Object],[object Object] No - -
    drop-shadow-dragged [object Object],[object Object],[object Object] [object Object],[object Object],[object Object] No - -