Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Tools
  • Semantic color palette

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    accent-color-100 alias {blue-100} light: rgb(245, 249, 255)
    dark: rgb(14, 23, 63)
    wireframe: rgb(246, 248, 252)
    No - -
    accent-color-200 alias {blue-200} light: rgb(229, 240, 254)
    dark: rgb(15, 28, 82)
    wireframe: rgb(235, 239, 248)
    No - -
    accent-color-300 alias {blue-300} light: rgb(203, 226, 254)
    dark: rgb(12, 33, 117)
    wireframe: rgb(216, 224, 242)
    No - -
    accent-color-400 alias {blue-400} light: rgb(172, 207, 253)
    dark: rgb(18, 45, 154)
    wireframe: rgb(192, 205, 234)
    No - -
    accent-color-500 alias {blue-500} light: rgb(142, 185, 252)
    dark: rgb(26, 58, 195)
    wireframe: rgb(164, 183, 225)
    No - -
    accent-color-600 alias {blue-600} light: rgb(114, 158, 253)
    dark: rgb(37, 73, 229)
    wireframe: rgb(135, 160, 215)
    No - -
    accent-color-700 alias {blue-700} light: rgb(93, 137, 255)
    dark: rgb(52, 91, 248)
    wireframe: rgb(113, 142, 208)
    No - -
    accent-color-800 alias {blue-800} light: rgb(75, 117, 255)
    dark: rgb(64, 105, 253)
    wireframe: rgb(93, 127, 201)
    No - -
    accent-color-900 alias {blue-900} light: rgb(59, 99, 251)
    dark: rgb(86, 129, 255)
    wireframe: rgb(74, 111, 195)
    No - -
    accent-color-1000 alias {blue-1000} light: rgb(39, 77, 234)
    dark: rgb(105, 149, 254)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-color-1100 alias {blue-1100} light: rgb(29, 62, 207)
    dark: rgb(124, 169, 252)
    wireframe: rgb(52, 79, 140)
    No - -
    accent-color-1200 alias {blue-1200} light: rgb(21, 50, 173)
    dark: rgb(152, 192, 252)
    wireframe: rgb(42, 65, 114)
    No - -
    accent-color-1300 alias {blue-1300} light: rgb(16, 40, 140)
    dark: rgb(181, 213, 253)
    wireframe: rgb(34, 51, 91)
    No - -
    accent-color-1400 alias {blue-1400} light: rgb(12, 31, 105)
    dark: rgb(213, 231, 254)
    wireframe: rgb(25, 39, 69)
    No - -
    accent-color-1500 alias {blue-1500} dark: rgb(238, 245, 255)
    light: rgb(14, 24, 67)
    wireframe: rgb(18, 27, 48)
    No - -
    accent-color-1600 alias {blue-1600} dark: rgb(255, 255, 255)
    light: rgb(7, 11, 30)
    wireframe: rgb(8, 12, 22)
    No - -
    informative-color-100 alias {blue-100} light: rgb(245, 249, 255)
    dark: rgb(14, 23, 63)
    wireframe: rgb(246, 248, 252)
    No - -
    informative-color-200 alias {blue-200} light: rgb(229, 240, 254)
    dark: rgb(15, 28, 82)
    wireframe: rgb(235, 239, 248)
    No - -
    informative-color-300 alias {blue-300} light: rgb(203, 226, 254)
    dark: rgb(12, 33, 117)
    wireframe: rgb(216, 224, 242)
    No - -
    informative-color-400 alias {blue-400} light: rgb(172, 207, 253)
    dark: rgb(18, 45, 154)
    wireframe: rgb(192, 205, 234)
    No - -
    informative-color-500 alias {blue-500} light: rgb(142, 185, 252)
    dark: rgb(26, 58, 195)
    wireframe: rgb(164, 183, 225)
    No - -
    informative-color-600 alias {blue-600} light: rgb(114, 158, 253)
    dark: rgb(37, 73, 229)
    wireframe: rgb(135, 160, 215)
    No - -
    informative-color-700 alias {blue-700} light: rgb(93, 137, 255)
    dark: rgb(52, 91, 248)
    wireframe: rgb(113, 142, 208)
    No - -
    informative-color-800 alias {blue-800} light: rgb(75, 117, 255)
    dark: rgb(64, 105, 253)
    wireframe: rgb(93, 127, 201)
    No - -
    informative-color-900 alias {blue-900} light: rgb(59, 99, 251)
    dark: rgb(86, 129, 255)
    wireframe: rgb(74, 111, 195)
    No - -
    informative-color-1000 alias {blue-1000} light: rgb(39, 77, 234)
    dark: rgb(105, 149, 254)
    wireframe: rgb(61, 94, 165)
    No - -
    informative-color-1100 alias {blue-1100} light: rgb(29, 62, 207)
    dark: rgb(124, 169, 252)
    wireframe: rgb(52, 79, 140)
    No - -
    informative-color-1200 alias {blue-1200} light: rgb(21, 50, 173)
    dark: rgb(152, 192, 252)
    wireframe: rgb(42, 65, 114)
    No - -
    informative-color-1300 alias {blue-1300} light: rgb(16, 40, 140)
    dark: rgb(181, 213, 253)
    wireframe: rgb(34, 51, 91)
    No - -
    informative-color-1400 alias {blue-1400} light: rgb(12, 31, 105)
    dark: rgb(213, 231, 254)
    wireframe: rgb(25, 39, 69)
    No - -
    informative-color-1500 alias {blue-1500} dark: rgb(238, 245, 255)
    light: rgb(14, 24, 67)
    wireframe: rgb(18, 27, 48)
    No - -
    informative-color-1600 alias {blue-1600} dark: rgb(255, 255, 255)
    light: rgb(7, 11, 30)
    wireframe: rgb(8, 12, 22)
    No - -
    negative-color-100 alias {red-100} light: rgb(255, 246, 245)
    dark: rgb(54, 10, 3)
    wireframe: rgb(246, 248, 252)
    No - -
    negative-color-200 alias {red-200} light: rgb(255, 235, 232)
    dark: rgb(68, 13, 5)
    wireframe: rgb(235, 239, 248)
    No - -
    negative-color-300 alias {red-300} light: rgb(255, 214, 209)
    dark: rgb(87, 17, 7)
    wireframe: rgb(216, 224, 242)
    No - -
    negative-color-400 alias {red-400} light: rgb(255, 188, 180)
    dark: rgb(115, 24, 11)
    wireframe: rgb(192, 205, 234)
    No - -
    negative-color-500 alias {red-500} light: rgb(255, 157, 145)
    dark: rgb(147, 31, 17)
    wireframe: rgb(164, 183, 225)
    No - -
    negative-color-600 alias {red-600} light: rgb(255, 118, 101)
    dark: rgb(177, 38, 23)
    wireframe: rgb(135, 160, 215)
    No - -
    negative-color-700 alias {red-700} light: rgb(255, 81, 61)
    dark: rgb(205, 46, 29)
    wireframe: rgb(113, 142, 208)
    No - -
    negative-color-800 alias {red-800} light: rgb(240, 56, 35)
    dark: rgb(223, 52, 34)
    wireframe: rgb(93, 127, 201)
    No - -
    negative-color-900 alias {red-900} light: rgb(215, 50, 32)
    dark: rgb(252, 67, 46)
    wireframe: rgb(74, 111, 195)
    No - -
    negative-color-1000 alias {red-1000} light: rgb(183, 40, 24)
    dark: rgb(255, 103, 86)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-color-1100 alias {red-1100} light: rgb(156, 33, 19)
    dark: rgb(255, 134, 120)
    wireframe: rgb(52, 79, 140)
    No - -
    negative-color-1200 alias {red-1200} light: rgb(129, 27, 14)
    dark: rgb(255, 167, 157)
    wireframe: rgb(42, 65, 114)
    No - -
    negative-color-1300 alias {red-1300} light: rgb(104, 21, 10)
    dark: rgb(255, 196, 189)
    wireframe: rgb(34, 51, 91)
    No - -
    negative-color-1400 alias {red-1400} light: rgb(80, 16, 6)
    dark: rgb(255, 222, 219)
    wireframe: rgb(25, 39, 69)
    No - -
    negative-color-1500 alias {red-1500} dark: rgb(255, 242, 240)
    light: rgb(59, 11, 4)
    wireframe: rgb(18, 27, 48)
    No - -
    negative-color-1600 alias {red-1600} dark: rgb(255, 255, 255)
    light: rgb(29, 5, 2)
    wireframe: rgb(8, 12, 22)
    No - -
    notice-color-100 alias {orange-100} light: rgb(255, 246, 231)
    dark: rgb(49, 16, 0)
    wireframe: rgb(246, 248, 252)
    No - -
    notice-color-200 alias {orange-200} light: rgb(255, 236, 207)
    dark: rgb(61, 21, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    notice-color-300 alias {orange-300} light: rgb(255, 218, 158)
    dark: rgb(80, 27, 0)
    wireframe: rgb(216, 224, 242)
    No - -
    notice-color-400 alias {orange-400} light: rgb(255, 193, 94)
    dark: rgb(106, 36, 0)
    wireframe: rgb(192, 205, 234)
    No - -
    notice-color-500 alias {orange-500} light: rgb(255, 162, 19)
    dark: rgb(135, 47, 0)
    wireframe: rgb(164, 183, 225)
    No - -
    notice-color-600 alias {orange-600} light: rgb(252, 125, 0)
    dark: rgb(162, 59, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    notice-color-700 alias {orange-700} light: rgb(232, 106, 0)
    dark: rgb(185, 73, 0)
    wireframe: rgb(113, 142, 208)
    No - -
    notice-color-800 alias {orange-800} light: rgb(212, 91, 0)
    dark: rgb(199, 82, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    notice-color-900 alias {orange-900} light: rgb(194, 78, 0)
    dark: rgb(224, 100, 0)
    wireframe: rgb(74, 111, 195)
    No - -
    notice-color-1000 alias {orange-1000} light: rgb(167, 62, 0)
    dark: rgb(243, 117, 0)
    wireframe: rgb(61, 94, 165)
    No - -
    notice-color-1100 alias {orange-1100} light: rgb(144, 51, 0)
    dark: rgb(255, 137, 0)
    wireframe: rgb(52, 79, 140)
    No - -
    notice-color-1200 alias {orange-1200} light: rgb(118, 41, 0)
    dark: rgb(255, 173, 45)
    wireframe: rgb(42, 65, 114)
    No - -
    notice-color-1300 alias {orange-1300} light: rgb(95, 32, 0)
    dark: rgb(255, 201, 116)
    wireframe: rgb(34, 51, 91)
    No - -
    notice-color-1400 alias {orange-1400} light: rgb(73, 24, 0)
    dark: rgb(255, 225, 178)
    wireframe: rgb(25, 39, 69)
    No - -
    notice-color-1500 alias {orange-1500} dark: rgb(255, 243, 225)
    light: rgb(52, 18, 0)
    wireframe: rgb(18, 27, 48)
    No - -
    notice-color-1600 alias {orange-1600} dark: rgb(255, 255, 255)
    light: rgb(25, 8, 0)
    wireframe: rgb(8, 12, 22)
    No - -
    positive-color-100 alias {green-100} light: rgb(237, 252, 241)
    dark: rgb(0, 30, 23)
    wireframe: rgb(246, 248, 252)
    No - -
    positive-color-200 alias {green-200} light: rgb(215, 247, 225)
    dark: rgb(0, 38, 29)
    wireframe: rgb(235, 239, 248)
    No - -
    positive-color-300 alias {green-300} light: rgb(173, 238, 197)
    dark: rgb(0, 51, 38)
    wireframe: rgb(216, 224, 242)
    No - -
    positive-color-400 alias {green-400} light: rgb(107, 227, 162)
    dark: rgb(0, 68, 48)
    wireframe: rgb(192, 205, 234)
    No - -
    positive-color-500 alias {green-500} light: rgb(43, 209, 125)
    dark: rgb(2, 87, 58)
    wireframe: rgb(164, 183, 225)
    No - -
    positive-color-600 alias {green-600} light: rgb(18, 184, 103)
    dark: rgb(3, 106, 67)
    wireframe: rgb(135, 160, 215)
    No - -
    positive-color-700 alias {green-700} light: rgb(11, 164, 93)
    dark: rgb(4, 124, 75)
    wireframe: rgb(113, 142, 208)
    No - -
    positive-color-800 alias {green-800} light: rgb(7, 147, 85)
    dark: rgb(6, 136, 80)
    wireframe: rgb(93, 127, 201)
    No - -
    positive-color-900 alias {green-900} light: rgb(5, 131, 78)
    dark: rgb(9, 157, 89)
    wireframe: rgb(74, 111, 195)
    No - -
    positive-color-1000 alias {green-1000} light: rgb(3, 110, 69)
    dark: rgb(14, 175, 98)
    wireframe: rgb(61, 94, 165)
    No - -
    positive-color-1100 alias {green-1100} light: rgb(2, 93, 60)
    dark: rgb(24, 193, 110)
    wireframe: rgb(52, 79, 140)
    No - -
    positive-color-1200 alias {green-1200} light: rgb(1, 76, 52)
    dark: rgb(57, 215, 134)
    wireframe: rgb(42, 65, 114)
    No - -
    positive-color-1300 alias {green-1300} light: rgb(0, 61, 44)
    dark: rgb(126, 231, 172)
    wireframe: rgb(34, 51, 91)
    No - -
    positive-color-1400 alias {green-1400} light: rgb(0, 46, 34)
    dark: rgb(189, 241, 208)
    wireframe: rgb(25, 39, 69)
    No - -
    positive-color-1500 alias {green-1500} dark: rgb(229, 250, 236)
    light: rgb(0, 33, 25)
    wireframe: rgb(18, 27, 48)
    No - -
    positive-color-1600 alias {green-1600} dark: rgb(255, 255, 255)
    light: rgb(0, 15, 12)
    wireframe: rgb(8, 12, 22)
    No - -
    negative-subdued-background-color-default alias {negative-subtle-background-color-default} light: rgb(255, 235, 232)
    dark: rgb(87, 17, 7)
    wireframe: rgb(235, 239, 248)
    Yes - -
    negative-subdued-background-color-hover alias {negative-color-300} light: rgb(255, 214, 209)
    dark: rgb(87, 17, 7)
    wireframe: rgb(216, 224, 242)
    Yes - -
    negative-subdued-background-color-down alias {negative-color-300} light: rgb(255, 214, 209)
    dark: rgb(87, 17, 7)
    wireframe: rgb(216, 224, 242)
    Yes - -
    negative-subdued-background-color-key-focus alias {negative-color-300} light: rgb(255, 214, 209)
    dark: rgb(87, 17, 7)
    wireframe: rgb(216, 224, 242)
    Yes - -
    informative-subtle-background-color-default color-set - light: rgb(229, 240, 254)
    dark: rgb(12, 33, 117)
    wireframe: rgb(235, 239, 248)
    No - -
    positive-subtle-background-color-default color-set - light: rgb(215, 247, 225)
    dark: rgb(0, 51, 38)
    wireframe: rgb(235, 239, 248)
    No - -
    notice-subtle-background-color-default color-set - light: rgb(255, 236, 207)
    dark: rgb(80, 27, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    negative-subtle-background-color-default color-set - light: rgb(255, 235, 232)
    dark: rgb(87, 17, 7)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-informative alias {informative-visual-color} light: rgb(75, 117, 255)
    dark: rgb(86, 129, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-neutral alias {neutral-visual-color} light: rgb(143, 143, 143)
    dark: rgb(138, 138, 138)
    wireframe: rgb(108, 142, 217)
    No - -
    icon-color-positive alias {positive-visual-color} light: rgb(7, 147, 85)
    dark: rgb(9, 157, 89)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-notice alias {notice-visual-color} light: rgb(212, 91, 0)
    dark: rgb(224, 100, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-negative alias {negative-visual-color} light: rgb(240, 56, 35)
    dark: rgb(252, 67, 46)
    wireframe: rgb(93, 127, 201)
    No - -
    accent-subtle-background-color-default color-set - light: rgb(229, 240, 254)
    dark: rgb(12, 33, 117)
    wireframe: rgb(235, 239, 248)
    No - -