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

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    icon-color-inverse alias {gray-50} light: rgb(248, 248, 248)
    dark: rgb(27, 27, 27)
    wireframe: rgb(246, 248, 253)
    Yes - -
    icon-color-primary-default alias {neutral-content-color-default} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)
    No - -
    icon-color-blue-primary-default color-set - light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-green-primary-default alias {green-800} light: rgb(7, 147, 85)
    dark: rgb(6, 136, 80)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-red-primary-default color-set - light: rgb(215, 50, 32)
    dark: rgb(205, 46, 29)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-yellow-primary-default color-set - light: rgb(245, 199, 0)
    dark: rgb(235, 183, 0)
    wireframe: rgb(192, 205, 234)
    No - -
    icon-color-primary-hover alias {neutral-content-color-hover} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    icon-color-primary-down alias {neutral-content-color-down} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -
    icon-color-blue-primary-hover color-set - light: rgb(39, 77, 234)
    dark: rgb(86, 129, 255)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-blue-primary-down color-set - light: rgb(29, 62, 207)
    dark: rgb(105, 149, 254)
    wireframe: rgb(52, 79, 140)
    No - -
    icon-color-brown-primary-default color-set - light: rgb(154, 123, 77)
    dark: rgb(132, 104, 61)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-brown-primary-hover color-set - light: rgb(139, 109, 66)
    dark: rgb(143, 114, 69)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-brown-primary-down color-set - light: rgb(119, 91, 50)
    dark: rgb(163, 132, 84)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-celery-primary-default color-set - light: rgb(82, 161, 25)
    dark: rgb(78, 154, 23)
    wireframe: rgb(113, 142, 208)
    No - -
    icon-color-celery-primary-hover color-set - light: rgb(72, 144, 20)
    dark: rgb(88, 172, 28)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-celery-primary-down color-set - light: rgb(64, 129, 17)
    dark: rgb(100, 190, 35)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-chartreuse-primary-default color-set - light: rgb(143, 172, 0)
    dark: rgb(136, 164, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    icon-color-chartreuse-primary-hover color-set - light: rgb(128, 153, 0)
    dark: rgb(151, 181, 0)
    wireframe: rgb(113, 142, 208)
    No - -
    icon-color-chartreuse-primary-down color-set - light: rgb(114, 137, 0)
    dark: rgb(169, 203, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-cinnamon-primary-default alias {cinnamon-800} dark: rgb(176, 98, 59)
    light: rgb(184, 109, 70)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-cinnamon-primary-hover alias {cinnamon-900} dark: rgb(192, 119, 80)
    light: rgb(170, 94, 56)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-cinnamon-primary-down alias {cinnamon-1000} dark: rgb(206, 136, 99)
    light: rgb(147, 77, 43)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-cyan-primary-default alias {cyan-800} light: rgb(18, 134, 205)
    dark: rgb(13, 125, 186)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-cyan-primary-hover alias {cyan-900} light: rgb(11, 120, 179)
    dark: rgb(24, 142, 220)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-cyan-primary-down alias {cyan-1000} light: rgb(4, 102, 145)
    dark: rgb(38, 159, 244)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-fuchsia-primary-default color-set - light: rgb(181, 57, 200)
    dark: rgb(173, 51, 192)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-fuchsia-primary-hover color-set - light: rgb(156, 40, 175)
    dark: rgb(186, 60, 206)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-fuchsia-primary-down color-set - light: rgb(135, 27, 154)
    dark: rgb(213, 73, 235)
    wireframe: rgb(52, 79, 140)
    No - -
    icon-color-green-primary-hover alias {green-900} light: rgb(5, 131, 78)
    dark: rgb(9, 157, 89)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-green-primary-down alias {green-1000} light: rgb(3, 110, 69)
    dark: rgb(14, 175, 98)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-indigo-primary-default color-set - light: rgb(113, 85, 250)
    dark: rgb(109, 75, 248)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-indigo-primary-hover color-set - light: rgb(99, 56, 238)
    dark: rgb(116, 91, 252)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-indigo-primary-down color-set - light: rgb(84, 36, 219)
    dark: rgb(128, 119, 254)
    wireframe: rgb(52, 79, 140)
    No - -
    icon-color-magenta-primary-default color-set - light: rgb(217, 35, 97)
    dark: rgb(207, 31, 92)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-magenta-primary-hover color-set - light: rgb(186, 22, 80)
    dark: rgb(224, 38, 101)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-magenta-primary-down color-set - light: rgb(163, 5, 62)
    dark: rgb(255, 51, 119)
    wireframe: rgb(52, 79, 140)
    No - -
    icon-color-orange-primary-default color-set - light: rgb(232, 106, 0)
    dark: rgb(224, 100, 0)
    wireframe: rgb(113, 142, 208)
    No - -
    icon-color-orange-primary-hover color-set - light: rgb(212, 91, 0)
    dark: rgb(243, 117, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-orange-primary-down color-set - light: rgb(194, 78, 0)
    dark: rgb(255, 137, 0)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-pink-primary-default color-set - light: rgb(228, 52, 163)
    dark: rgb(196, 39, 138)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-pink-primary-hover color-set - light: rgb(206, 42, 146)
    dark: rgb(213, 45, 151)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-pink-primary-down color-set - light: rgb(176, 31, 123)
    dark: rgb(236, 67, 175)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-purple-primary-default color-set - light: rgb(154, 71, 226)
    dark: rgb(148, 62, 224)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-purple-primary-hover color-set - light: rgb(134, 40, 217)
    dark: rgb(157, 78, 228)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-purple-primary-down color-set - light: rgb(115, 13, 204)
    dark: rgb(173, 105, 233)
    wireframe: rgb(52, 79, 140)
    No - -
    icon-color-red-primary-hover color-set - light: rgb(183, 40, 24)
    dark: rgb(223, 52, 34)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-red-primary-down color-set - light: rgb(156, 33, 19)
    dark: rgb(252, 67, 46)
    wireframe: rgb(52, 79, 140)
    No - -
    icon-color-seafoam-primary-default alias {seafoam-800} light: rgb(9, 144, 120)
    dark: rgb(8, 134, 112)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-seafoam-primary-hover alias {seafoam-900} light: rgb(7, 129, 109)
    dark: rgb(10, 154, 128)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-seafoam-primary-down alias {seafoam-1000} light: rgb(5, 108, 92)
    dark: rgb(12, 173, 142)
    wireframe: rgb(61, 94, 165)
    No - -
    icon-color-silver-primary-default color-set - light: rgb(143, 143, 143)
    dark: rgb(118, 118, 118)
    wireframe: rgb(113, 142, 208)
    No - -
    icon-color-silver-primary-hover color-set - light: rgb(128, 128, 128)
    dark: rgb(137, 137, 137)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-silver-primary-down color-set - light: rgb(114, 114, 114)
    dark: rgb(152, 152, 152)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-turquoise-primary-default color-set - light: rgb(12, 158, 171)
    dark: rgb(9, 131, 142)
    wireframe: rgb(113, 142, 208)
    No - -
    icon-color-turquoise-primary-hover color-set - light: rgb(10, 141, 153)
    dark: rgb(11, 151, 164)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-turquoise-primary-down color-set - light: rgb(8, 126, 137)
    dark: rgb(13, 168, 182)
    wireframe: rgb(74, 111, 195)
    No - -
    icon-color-yellow-primary-hover color-set - light: rgb(230, 175, 0)
    dark: rgb(249, 206, 0)
    wireframe: rgb(164, 183, 225)
    No - -
    icon-color-yellow-primary-down color-set - light: rgb(210, 149, 0)
    dark: rgb(255, 230, 86)
    wireframe: rgb(135, 160, 215)
    No - -
    icon-color-disabled-primary alias {gray-400} light: rgb(198, 198, 198)
    dark: rgb(68, 68, 68)
    wireframe: rgb(180, 199, 239)
    No - -
    icon-color-blue-background color-set - light: rgb(229, 240, 254)
    dark: rgb(12, 33, 117)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-brown-background color-set - light: rgb(247, 238, 225)
    dark: rgb(78, 55, 19)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-celery-background color-set - light: rgb(235, 255, 220)
    dark: rgb(31, 67, 4)
    wireframe: rgb(246, 248, 252)
    No - -
    icon-color-chartreuse-background color-set - light: rgb(234, 246, 173)
    dark: rgb(53, 63, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-cinnamon-background color-set - light: rgb(249, 236, 229)
    dark: rgb(79, 28, 7)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-cyan-background color-set - light: rgb(238, 250, 254)
    dark: rgb(0, 64, 88)
    wireframe: rgb(246, 248, 252)
    No - -
    icon-color-fuchsia-background alias {fuchsia-200} light: rgb(253, 233, 255)
    dark: rgb(61, 0, 74)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-green-background color-set - light: rgb(237, 252, 241)
    dark: rgb(0, 68, 48)
    wireframe: rgb(246, 248, 252)
    No - -
    icon-color-indigo-background color-set - light: rgb(235, 238, 255)
    dark: rgb(30, 0, 93)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-magenta-background alias {magenta-200} light: rgb(255, 232, 240)
    dark: rgb(74, 0, 27)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-orange-background color-set - light: rgb(255, 236, 207)
    dark: rgb(80, 27, 0)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-pink-background alias {pink-200} dark: rgb(71, 0, 44)
    light: rgb(255, 232, 247)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-purple-background alias {purple-200} light: rgb(244, 235, 252)
    dark: rgb(50, 0, 96)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-red-background color-set - light: rgb(255, 235, 232)
    dark: rgb(87, 17, 7)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-seafoam-background color-set - light: rgb(211, 246, 234)
    dark: rgb(0, 67, 59)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-silver-background color-set - light: rgb(239, 239, 239)
    dark: rgb(59, 59, 59)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-turquoise-background color-set - light: rgb(209, 245, 245)
    dark: rgb(0, 66, 72)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-yellow-background color-set - light: rgb(255, 248, 204)
    dark: rgb(83, 52, 0)
    wireframe: rgb(246, 248, 252)
    No - -
    icon-color-inverse-background alias {gray-50} light: rgb(248, 248, 248)
    dark: rgb(27, 27, 27)
    wireframe: rgb(246, 248, 253)
    No - -
    icon-color-emphasized-background alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)
    No - -