@carbon/colors
Version:
Colors for digital and software products using the Carbon Design System
2,225 lines • 52.7 kB
JSON
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Carbon color palette in DTCG format. This is the source of truth for @carbon/colors.",
"black": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0, 0],
"hex": "#000000"
},
"$description": "black"
},
"blackHover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.129412, 0.129412, 0.129412],
"hex": "#212121"
},
"$description": "black hover"
},
"white": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 1, 1],
"hex": "#ffffff"
},
"$description": "white"
},
"whiteHover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.909804, 0.909804, 0.909804],
"hex": "#e8e8e8"
},
"$description": "white hover"
},
"yellow": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.988235, 0.956863, 0.839216],
"hex": "#fcf4d6"
},
"$description": "yellow 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.992157, 0.862745, 0.411765],
"hex": "#fddc69"
},
"$description": "yellow 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.945098, 0.760784, 0.105882],
"hex": "#f1c21b"
},
"$description": "yellow 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.823529, 0.631373, 0.023529],
"hex": "#d2a106"
},
"$description": "yellow 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.698039, 0.52549, 0],
"hex": "#b28600"
},
"$description": "yellow 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.556863, 0.415686, 0],
"hex": "#8e6a00"
},
"$description": "yellow 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.407843, 0.305882, 0],
"hex": "#684e00"
},
"$description": "yellow 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.282353, 0.215686, 0],
"hex": "#483700"
},
"$description": "yellow 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.188235, 0.141176, 0],
"hex": "#302400"
},
"$description": "yellow 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.109804, 0.082353, 0],
"hex": "#1c1500"
},
"$description": "yellow 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.972549, 0.901961, 0.627451],
"hex": "#f8e6a0"
},
"$description": "yellow 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.988235, 0.803922, 0.152941],
"hex": "#fccd27"
},
"$description": "yellow 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.866667, 0.690196, 0.054902],
"hex": "#ddb00e"
},
"$description": "yellow 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.737255, 0.564706, 0.019608],
"hex": "#bc9005"
},
"$description": "yellow 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.619608, 0.466667, 0],
"hex": "#9e7700"
},
"$description": "yellow 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.458824, 0.345098, 0],
"hex": "#755800"
},
"$description": "yellow 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.501961, 0.376471, 0],
"hex": "#806000"
},
"$description": "yellow 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.360784, 0.27451, 0],
"hex": "#5c4600"
},
"$description": "yellow 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.239216, 0.180392, 0],
"hex": "#3d2e00"
},
"$description": "yellow 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.2, 0.14902, 0],
"hex": "#332600"
},
"$description": "yellow 100 hover"
}
},
"orange": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.94902, 0.909804],
"hex": "#fff2e8"
},
"$description": "orange 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.85098, 0.745098],
"hex": "#ffd9be"
},
"$description": "orange 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.717647, 0.517647],
"hex": "#ffb784"
},
"$description": "orange 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.513725, 0.168627],
"hex": "#ff832b"
},
"$description": "orange 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.921569, 0.384314, 0],
"hex": "#eb6200"
},
"$description": "orange 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.729412, 0.305882, 0],
"hex": "#ba4e00"
},
"$description": "orange 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.541176, 0.219608, 0],
"hex": "#8a3800"
},
"$description": "orange 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.368627, 0.160784, 0],
"hex": "#5e2900"
},
"$description": "orange 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.243137, 0.101961, 0],
"hex": "#3e1a00"
},
"$description": "orange 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.137255, 0.062745, 0],
"hex": "#231000"
},
"$description": "orange 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.886275, 0.8],
"hex": "#ffe2cc"
},
"$description": "orange 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.776471, 0.619608],
"hex": "#ffc69e"
},
"$description": "orange 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.615686, 0.341176],
"hex": "#ff9d57"
},
"$description": "orange 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.980392, 0.407843, 0],
"hex": "#fa6800"
},
"$description": "orange 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.8, 0.333333, 0],
"hex": "#cc5500"
},
"$description": "orange 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.619608, 0.258824, 0],
"hex": "#9e4200"
},
"$description": "orange 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.658824, 0.266667, 0],
"hex": "#a84400"
},
"$description": "orange 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.458824, 0.2, 0],
"hex": "#753300"
},
"$description": "orange 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.321569, 0.133333, 0],
"hex": "#522200"
},
"$description": "orange 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.258824, 0.117647, 0],
"hex": "#421e00"
},
"$description": "orange 100 hover"
}
},
"red": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.945098, 0.945098],
"hex": "#fff1f1"
},
"$description": "red 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.843137, 0.85098],
"hex": "#ffd7d9"
},
"$description": "red 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.701961, 0.721569],
"hex": "#ffb3b8"
},
"$description": "red 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.513725, 0.537255],
"hex": "#ff8389"
},
"$description": "red 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.980392, 0.301961, 0.337255],
"hex": "#fa4d56"
},
"$description": "red 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.854902, 0.117647, 0.156863],
"hex": "#da1e28"
},
"$description": "red 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.635294, 0.098039, 0.121569],
"hex": "#a2191f"
},
"$description": "red 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.458824, 0.054902, 0.07451],
"hex": "#750e13"
},
"$description": "red 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.321569, 0.015686, 0.031373],
"hex": "#520408"
},
"$description": "red 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.176471, 0.027451, 0.035294],
"hex": "#2d0709"
},
"$description": "red 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.878431, 0.878431],
"hex": "#ffe0e0"
},
"$description": "red 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.760784, 0.772549],
"hex": "#ffc2c5"
},
"$description": "red 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.6, 0.627451],
"hex": "#ff99a0"
},
"$description": "red 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.380392, 0.407843],
"hex": "#ff6168"
},
"$description": "red 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.933333, 0.027451, 0.07451],
"hex": "#ee0713"
},
"$description": "red 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.721569, 0.098039, 0.133333],
"hex": "#b81922"
},
"$description": "red 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.760784, 0.117647, 0.145098],
"hex": "#c21e25"
},
"$description": "red 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.572549, 0.066667, 0.094118],
"hex": "#921118"
},
"$description": "red 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.4, 0.019608, 0.039216],
"hex": "#66050a"
},
"$description": "red 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.329412, 0.05098, 0.066667],
"hex": "#540d11"
},
"$description": "red 100 hover"
}
},
"magenta": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.941176, 0.968627],
"hex": "#fff0f7"
},
"$description": "magenta 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.839216, 0.909804],
"hex": "#ffd6e8"
},
"$description": "magenta 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.686275, 0.823529],
"hex": "#ffafd2"
},
"$description": "magenta 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.494118, 0.713725],
"hex": "#ff7eb6"
},
"$description": "magenta 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.933333, 0.32549, 0.588235],
"hex": "#ee5396"
},
"$description": "magenta 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.815686, 0.14902, 0.439216],
"hex": "#d02670"
},
"$description": "magenta 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.623529, 0.094118, 0.32549],
"hex": "#9f1853"
},
"$description": "magenta 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.454902, 0.035294, 0.215686],
"hex": "#740937"
},
"$description": "magenta 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.317647, 0.007843, 0.141176],
"hex": "#510224"
},
"$description": "magenta 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.164706, 0.039216, 0.094118],
"hex": "#2a0a18"
},
"$description": "magenta 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.878431, 0.937255],
"hex": "#ffe0ef"
},
"$description": "magenta 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.741176, 0.854902],
"hex": "#ffbdda"
},
"$description": "magenta 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.580392, 0.764706],
"hex": "#ff94c3"
},
"$description": "magenta 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0.341176, 0.627451],
"hex": "#ff57a0"
},
"$description": "magenta 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.890196, 0.090196, 0.435294],
"hex": "#e3176f"
},
"$description": "magenta 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.690196, 0.129412, 0.372549],
"hex": "#b0215f"
},
"$description": "magenta 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.74902, 0.113725, 0.388235],
"hex": "#bf1d63"
},
"$description": "magenta 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.556863, 0.043137, 0.262745],
"hex": "#8e0b43"
},
"$description": "magenta 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.407843, 0.011765, 0.180392],
"hex": "#68032e"
},
"$description": "magenta 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.32549, 0.078431, 0.184314],
"hex": "#53142f"
},
"$description": "magenta 100 hover"
}
},
"purple": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.964706, 0.94902, 1],
"hex": "#f6f2ff"
},
"$description": "purple 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.909804, 0.854902, 1],
"hex": "#e8daff"
},
"$description": "purple 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.831373, 0.733333, 1],
"hex": "#d4bbff"
},
"$description": "purple 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.745098, 0.584314, 1],
"hex": "#be95ff"
},
"$description": "purple 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.647059, 0.431373, 1],
"hex": "#a56eff"
},
"$description": "purple 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.541176, 0.247059, 0.988235],
"hex": "#8a3ffc"
},
"$description": "purple 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.411765, 0.160784, 0.768627],
"hex": "#6929c4"
},
"$description": "purple 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.286275, 0.113725, 0.545098],
"hex": "#491d8b"
},
"$description": "purple 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.192157, 0.07451, 0.368627],
"hex": "#31135e"
},
"$description": "purple 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.109804, 0.058824, 0.188235],
"hex": "#1c0f30"
},
"$description": "purple 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.929412, 0.898039, 1],
"hex": "#ede5ff"
},
"$description": "purple 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.862745, 0.780392, 1],
"hex": "#dcc7ff"
},
"$description": "purple 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.772549, 0.639216, 1],
"hex": "#c5a3ff"
},
"$description": "purple 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.682353, 0.478431, 1],
"hex": "#ae7aff"
},
"$description": "purple 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.576471, 0.321569, 1],
"hex": "#9352ff"
},
"$description": "purple 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.470588, 0.133333, 0.984314],
"hex": "#7822fb"
},
"$description": "purple 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.486275, 0.239216, 0.839216],
"hex": "#7c3dd6"
},
"$description": "purple 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.356863, 0.141176, 0.678431],
"hex": "#5b24ad"
},
"$description": "purple 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.25098, 0.098039, 0.482353],
"hex": "#40197b"
},
"$description": "purple 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.203922, 0.109804, 0.34902],
"hex": "#341c59"
},
"$description": "purple 100 hover"
}
},
"blue": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.929412, 0.960784, 1],
"hex": "#edf5ff"
},
"$description": "blue 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.815686, 0.886275, 1],
"hex": "#d0e2ff"
},
"$description": "blue 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.65098, 0.784314, 1],
"hex": "#a6c8ff"
},
"$description": "blue 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.470588, 0.662745, 1],
"hex": "#78a9ff"
},
"$description": "blue 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.270588, 0.537255, 1],
"hex": "#4589ff"
},
"$description": "blue 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.058824, 0.384314, 0.996078],
"hex": "#0f62fe"
},
"$description": "blue 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.262745, 0.807843],
"hex": "#0043ce"
},
"$description": "blue 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.176471, 0.611765],
"hex": "#002d9c"
},
"$description": "blue 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.113725, 0.423529],
"hex": "#001d6c"
},
"$description": "blue 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.066667, 0.254902],
"hex": "#001141"
},
"$description": "blue 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.858824, 0.921569, 1],
"hex": "#dbebff"
},
"$description": "blue 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.721569, 0.827451, 1],
"hex": "#b8d3ff"
},
"$description": "blue 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.541176, 0.713725, 1],
"hex": "#8ab6ff"
},
"$description": "blue 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.360784, 0.592157, 1],
"hex": "#5c97ff"
},
"$description": "blue 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.121569, 0.439216, 1],
"hex": "#1f70ff"
},
"$description": "blue 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.313725, 0.901961],
"hex": "#0050e6"
},
"$description": "blue 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.32549, 1],
"hex": "#0053ff"
},
"$description": "blue 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.223529, 0.780392],
"hex": "#0039c7"
},
"$description": "blue 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.145098, 0.541176],
"hex": "#00258a"
},
"$description": "blue 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.121569, 0.458824],
"hex": "#001f75"
},
"$description": "blue 100 hover"
}
},
"cyan": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.898039, 0.964706, 1],
"hex": "#e5f6ff"
},
"$description": "cyan 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.729412, 0.901961, 1],
"hex": "#bae6ff"
},
"$description": "cyan 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.509804, 0.811765, 1],
"hex": "#82cfff"
},
"$description": "cyan 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.2, 0.694118, 1],
"hex": "#33b1ff"
},
"$description": "cyan 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.066667, 0.572549, 0.909804],
"hex": "#1192e8"
},
"$description": "cyan 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.447059, 0.764706],
"hex": "#0072c3"
},
"$description": "cyan 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.32549, 0.603922],
"hex": "#00539a"
},
"$description": "cyan 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.227451, 0.427451],
"hex": "#003a6d"
},
"$description": "cyan 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.003922, 0.152941, 0.286275],
"hex": "#012749"
},
"$description": "cyan 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.023529, 0.090196, 0.152941],
"hex": "#061727"
},
"$description": "cyan 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.8, 0.933333, 1],
"hex": "#cceeff"
},
"$description": "cyan 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.6, 0.854902, 1],
"hex": "#99daff"
},
"$description": "cyan 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.341176, 0.745098, 1],
"hex": "#57beff"
},
"$description": "cyan 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.019608, 0.623529, 1],
"hex": "#059fff"
},
"$description": "cyan 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.058824, 0.494118, 0.784314],
"hex": "#0f7ec8"
},
"$description": "cyan 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.372549, 0.639216],
"hex": "#005fa3"
},
"$description": "cyan 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.4, 0.741176],
"hex": "#0066bd"
},
"$description": "cyan 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.286275, 0.541176],
"hex": "#00498a"
},
"$description": "cyan 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.003922, 0.2, 0.376471],
"hex": "#013360"
},
"$description": "cyan 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.043137, 0.160784, 0.278431],
"hex": "#0b2947"
},
"$description": "cyan 100 hover"
}
},
"teal": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.85098, 0.984314, 0.984314],
"hex": "#d9fbfb"
},
"$description": "teal 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.619608, 0.941176, 0.941176],
"hex": "#9ef0f0"
},
"$description": "teal 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.239216, 0.858824, 0.85098],
"hex": "#3ddbd9"
},
"$description": "teal 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.031373, 0.741176, 0.729412],
"hex": "#08bdba"
},
"$description": "teal 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.615686, 0.603922],
"hex": "#009d9a"
},
"$description": "teal 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.490196, 0.47451],
"hex": "#007d79"
},
"$description": "teal 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.364706, 0.364706],
"hex": "#005d5d"
},
"$description": "teal 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.254902, 0.266667],
"hex": "#004144"
},
"$description": "teal 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.007843, 0.168627, 0.188235],
"hex": "#022b30"
},
"$description": "teal 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.031373, 0.101961, 0.109804],
"hex": "#081a1c"
},
"$description": "teal 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.67451, 0.964706, 0.964706],
"hex": "#acf6f6"
},
"$description": "teal 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.341176, 0.898039, 0.898039],
"hex": "#57e5e5"
},
"$description": "teal 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.145098, 0.792157, 0.784314],
"hex": "#25cac8"
},
"$description": "teal 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.027451, 0.670588, 0.662745],
"hex": "#07aba9"
},
"$description": "teal 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.541176, 0.529412],
"hex": "#008a87"
},
"$description": "teal 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.419608, 0.407843],
"hex": "#006b68"
},
"$description": "teal 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.439216, 0.439216],
"hex": "#007070"
},
"$description": "teal 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0.32549, 0.341176],
"hex": "#005357"
},
"$description": "teal 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.011765, 0.223529, 0.25098],
"hex": "#033940"
},
"$description": "teal 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.058824, 0.188235, 0.203922],
"hex": "#0f3034"
},
"$description": "teal 100 hover"
}
},
"green": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.870588, 0.984314, 0.901961],
"hex": "#defbe6"
},
"$description": "green 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.654902, 0.941176, 0.729412],
"hex": "#a7f0ba"
},
"$description": "green 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.435294, 0.862745, 0.54902],
"hex": "#6fdc8c"
},
"$description": "green 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.258824, 0.745098, 0.396078],
"hex": "#42be65"
},
"$description": "green 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.141176, 0.631373, 0.282353],
"hex": "#24a148"
},
"$description": "green 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.098039, 0.501961, 0.219608],
"hex": "#198038"
},
"$description": "green 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.054902, 0.376471, 0.152941],
"hex": "#0e6027"
},
"$description": "green 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.015686, 0.262745, 0.090196],
"hex": "#044317"
},
"$description": "green 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.007843, 0.176471, 0.05098],
"hex": "#022d0d"
},
"$description": "green 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.027451, 0.098039, 0.031373],
"hex": "#071908"
},
"$description": "green 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.713725, 0.964706, 0.784314],
"hex": "#b6f6c8"
},
"$description": "green 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.454902, 0.905882, 0.572549],
"hex": "#74e792"
},
"$description": "green 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.211765, 0.807843, 0.368627],
"hex": "#36ce5e"
},
"$description": "green 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.231373, 0.670588, 0.352941],
"hex": "#3bab5a"
},
"$description": "green 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.12549, 0.556863, 0.247059],
"hex": "#208e3f"
},
"$description": "green 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.086275, 0.435294, 0.192157],
"hex": "#166f31"
},
"$description": "green 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.066667, 0.454902, 0.184314],
"hex": "#11742f"
},
"$description": "green 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.019608, 0.321569, 0.109804],
"hex": "#05521c"
},
"$description": "green 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.011765, 0.231373, 0.066667],
"hex": "#033b11"
},
"$description": "green 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.05098, 0.188235, 0.058824],
"hex": "#0d300f"
},
"$description": "green 100 hover"
}
},
"coolGray": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.94902, 0.956863, 0.972549],
"hex": "#f2f4f8"
},
"$description": "cool gray 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.866667, 0.882353, 0.901961],
"hex": "#dde1e6"
},
"$description": "cool gray 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.756863, 0.780392, 0.803922],
"hex": "#c1c7cd"
},
"$description": "cool gray 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.635294, 0.662745, 0.690196],
"hex": "#a2a9b0"
},
"$description": "cool gray 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.529412, 0.552941, 0.588235],
"hex": "#878d96"
},
"$description": "cool gray 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.411765, 0.439216, 0.466667],
"hex": "#697077"
},
"$description": "cool gray 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.301961, 0.32549, 0.345098],
"hex": "#4d5358"
},
"$description": "cool gray 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.203922, 0.227451, 0.247059],
"hex": "#343a3f"
},
"$description": "cool gray 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.129412, 0.152941, 0.164706],
"hex": "#21272a"
},
"$description": "cool gray 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.070588, 0.086275, 0.098039],
"hex": "#121619"
},
"$description": "cool gray 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.894118, 0.913725, 0.945098],
"hex": "#e4e9f1"
},
"$description": "cool gray 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.803922, 0.827451, 0.854902],
"hex": "#cdd3da"
},
"$description": "cool gray 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.678431, 0.709804, 0.741176],
"hex": "#adb5bd"
},
"$description": "cool gray 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.568627, 0.6, 0.631373],
"hex": "#9199a1"
},
"$description": "cool gray 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.458824, 0.482353, 0.521569],
"hex": "#757b85"
},
"$description": "cool gray 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.345098, 0.368627, 0.392157],
"hex": "#585e64"
},
"$description": "cool gray 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.364706, 0.392157, 0.415686],
"hex": "#5d646a"
},
"$description": "cool gray 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.262745, 0.290196, 0.317647],
"hex": "#434a51"
},
"$description": "cool gray 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.168627, 0.196078, 0.211765],
"hex": "#2b3236"
},
"$description": "cool gray 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.133333, 0.164706, 0.184314],
"hex": "#222a2f"
},
"$description": "cool gray 100 hover"
}
},
"gray": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.956863, 0.956863, 0.956863],
"hex": "#f4f4f4"
},
"$description": "gray 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.878431, 0.878431, 0.878431],
"hex": "#e0e0e0"
},
"$description": "gray 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.776471, 0.776471, 0.776471],
"hex": "#c6c6c6"
},
"$description": "gray 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.658824, 0.658824, 0.658824],
"hex": "#a8a8a8"
},
"$description": "gray 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.552941, 0.552941, 0.552941],
"hex": "#8d8d8d"
},
"$description": "gray 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.435294, 0.435294, 0.435294],
"hex": "#6f6f6f"
},
"$description": "gray 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.321569, 0.321569, 0.321569],
"hex": "#525252"
},
"$description": "gray 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.223529, 0.223529, 0.223529],
"hex": "#393939"
},
"$description": "gray 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.14902, 0.14902, 0.14902],
"hex": "#262626"
},
"$description": "gray 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.086275, 0.086275, 0.086275],
"hex": "#161616"
},
"$description": "gray 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.909804, 0.909804, 0.909804],
"hex": "#e8e8e8"
},
"$description": "gray 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.819608, 0.819608, 0.819608],
"hex": "#d1d1d1"
},
"$description": "gray 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.709804, 0.709804, 0.709804],
"hex": "#b5b5b5"
},
"$description": "gray 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.6, 0.6, 0.6],
"hex": "#999999"
},
"$description": "gray 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.478431, 0.478431, 0.478431],
"hex": "#7a7a7a"
},
"$description": "gray 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.368627, 0.368627, 0.368627],
"hex": "#5e5e5e"
},
"$description": "gray 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.388235, 0.388235, 0.388235],
"hex": "#636363"
},
"$description": "gray 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.278431, 0.278431, 0.278431],
"hex": "#474747"
},
"$description": "gray 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.2, 0.2, 0.2],
"hex": "#333333"
},
"$description": "gray 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.160784, 0.160784, 0.160784],
"hex": "#292929"
},
"$description": "gray 100 hover"
}
},
"warmGray": {
"10": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.968627, 0.952941, 0.94902],
"hex": "#f7f3f2"
},
"$description": "warm gray 10"
},
"20": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.898039, 0.878431, 0.87451],
"hex": "#e5e0df"
},
"$description": "warm gray 20"
},
"30": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.792157, 0.772549, 0.768627],
"hex": "#cac5c4"
},
"$description": "warm gray 30"
},
"40": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.678431, 0.658824, 0.658824],
"hex": "#ada8a8"
},
"$description": "warm gray 40"
},
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.560784, 0.545098, 0.545098],
"hex": "#8f8b8b"
},
"$description": "warm gray 50"
},
"60": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.447059, 0.431373, 0.431373],
"hex": "#726e6e"
},
"$description": "warm gray 60"
},
"70": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.337255, 0.317647, 0.317647],
"hex": "#565151"
},
"$description": "warm gray 70"
},
"80": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.235294, 0.219608, 0.219608],
"hex": "#3c3838"
},
"$description": "warm gray 80"
},
"90": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.152941, 0.145098, 0.145098],
"hex": "#272525"
},
"$description": "warm gray 90"
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.090196, 0.078431, 0.078431],
"hex": "#171414"
},
"$description": "warm gray 100"
},
"10Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.941176, 0.909804, 0.901961],
"hex": "#f0e8e6"
},
"$description": "warm gray 10 hover"
},
"20Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.847059, 0.815686, 0.811765],
"hex": "#d8d0cf"
},
"$description": "warm gray 20 hover"
},
"30Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.72549, 0.701961, 0.694118],
"hex": "#b9b3b1"
},
"$description": "warm gray 30 hover"
},
"40Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.611765, 0.588235, 0.588235],
"hex": "#9c9696"
},
"$description": "warm gray 40 hover"
},
"50Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.498039, 0.482353, 0.482353],
"hex": "#7f7b7b"
},
"$description": "warm gray 50 hover"
},
"60Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.376471, 0.364706, 0.364706],
"hex": "#605d5d"
},
"$description": "warm gray 60 hover"
},
"70Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.411765, 0.388235, 0.388235],
"hex": "#696363"
},
"$description": "warm gray 70 hover"
},
"80Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.298039, 0.282353, 0.282353],
"hex": "#4c4848"
},
"$description": "warm gray 80 hover"
},
"90Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.203922, 0.196078, 0.196078],
"hex": "#343232"
},
"$description": "warm gray 90 hover"
},
"100Hover": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.172549, 0.14902, 0.14902],
"hex": "#2c2626"
},
"$description": "warm gray 100 hover"
}
}
}