@atlaskit/tokens/figma/atlassian-light.json

Design tokens are the single source of truth to name and store design decisions.

{
  "name": "Light",
  "tokens": {
    "Light/color.background.accent.lime.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.6.0",
        "description": "Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#EFFFD6"
    },
    "Light/color.background.accent.lime.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.lime.subtlest."
      },
      "value": "#D3F1A7"
    },
    "Light/color.background.accent.lime.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.lime.subtlest."
      },
      "value": "#BDE97C"
    },
    "Light/color.background.accent.lime.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.6.0",
        "description": "Use for for backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#D3F1A7"
    },
    "Light/color.background.accent.lime.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.lime.subtler."
      },
      "value": "#BDE97C"
    },
    "Light/color.background.accent.lime.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.lime.subtler."
      },
      "value": "#B3DF72"
    },
    "Light/color.background.accent.lime.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.6.0",
        "description": "Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#94C748"
    },
    "Light/color.background.accent.lime.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.lime.subtle."
      },
      "value": "#B3DF72"
    },
    "Light/color.background.accent.lime.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.lime.subtle."
      },
      "value": "#BDE97C"
    },
    "Light/color.background.accent.lime.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.6.0",
        "description": "Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#5B7F24"
    },
    "Light/color.background.accent.lime.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.lime.bolder."
      },
      "value": "#4C6B1F"
    },
    "Light/color.background.accent.lime.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.lime.bolder."
      },
      "value": "#3F5224"
    },
    "Light/color.background.accent.red.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#FFECEB"
    },
    "Light/color.background.accent.red.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.red.subtlest."
      },
      "value": "#FFD5D2"
    },
    "Light/color.background.accent.red.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.red.subtlest."
      },
      "value": "#FFB8B2"
    },
    "Light/color.background.accent.red.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for red backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#FFD5D2"
    },
    "Light/color.background.accent.red.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.red.subtler."
      },
      "value": "#FFB8B2"
    },
    "Light/color.background.accent.red.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.red.subtler."
      },
      "value": "#FD9891"
    },
    "Light/color.background.accent.red.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#F87168"
    },
    "Light/color.background.accent.red.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.red.subtle."
      },
      "value": "#FD9891"
    },
    "Light/color.background.accent.red.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.red.subtle."
      },
      "value": "#FFB8B2"
    },
    "Light/color.background.accent.red.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#C9372C"
    },
    "Light/color.background.accent.red.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.red.bolder."
      },
      "value": "#AE2E24"
    },
    "Light/color.background.accent.red.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.red.bolder."
      },
      "value": "#872821"
    },
    "Light/color.background.accent.orange.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#FFF5DB"
    },
    "Light/color.background.accent.orange.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.orange.subtlest."
      },
      "value": "#FCE4A6"
    },
    "Light/color.background.accent.orange.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.orange.subtlest."
      },
      "value": "#FBD779"
    },
    "Light/color.background.accent.orange.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for orange backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#FCE4A6"
    },
    "Light/color.background.accent.orange.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.orange.subtler."
      },
      "value": "#FBD779"
    },
    "Light/color.background.accent.orange.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.orange.subtler."
      },
      "value": "#FBC828"
    },
    "Light/color.background.accent.orange.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#FCA700"
    },
    "Light/color.background.accent.orange.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.orange.subtle."
      },
      "value": "#FBC828"
    },
    "Light/color.background.accent.orange.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.orange.subtle."
      },
      "value": "#FBD779"
    },
    "Light/color.background.accent.orange.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#BD5B00"
    },
    "Light/color.background.accent.orange.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.orange.bolder."
      },
      "value": "#9E4C00"
    },
    "Light/color.background.accent.orange.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.orange.bolder."
      },
      "value": "#7A3B00"
    },
    "Light/color.background.accent.yellow.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#FEF7C8"
    },
    "Light/color.background.accent.yellow.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.yellow.subtlest."
      },
      "value": "#F5E989"
    },
    "Light/color.background.accent.yellow.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.yellow.subtlest."
      },
      "value": "#EFDD4E"
    },
    "Light/color.background.accent.yellow.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#F5E989"
    },
    "Light/color.background.accent.yellow.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.yellow.subtler."
      },
      "value": "#EFDD4E"
    },
    "Light/color.background.accent.yellow.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.yellow.subtler."
      },
      "value": "#EED12B"
    },
    "Light/color.background.accent.yellow.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#EED12B"
    },
    "Light/color.background.accent.yellow.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.yellow.subtle."
      },
      "value": "#DDB30E"
    },
    "Light/color.background.accent.yellow.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.yellow.subtle."
      },
      "value": "#EFDD4E"
    },
    "Light/color.background.accent.yellow.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#946F00"
    },
    "Light/color.background.accent.yellow.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.yellow.bolder."
      },
      "value": "#7F5F01"
    },
    "Light/color.background.accent.yellow.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.yellow.bolder."
      },
      "value": "#614A05"
    },
    "Light/color.background.accent.green.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#DCFFF1"
    },
    "Light/color.background.accent.green.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.green.subtlest."
      },
      "value": "#BAF3DB"
    },
    "Light/color.background.accent.green.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.green.subtlest."
      },
      "value": "#97EDC9"
    },
    "Light/color.background.accent.green.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for green backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#BAF3DB"
    },
    "Light/color.background.accent.green.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.green.subtler."
      },
      "value": "#97EDC9"
    },
    "Light/color.background.accent.green.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.green.subtler."
      },
      "value": "#7EE2B8"
    },
    "Light/color.background.accent.green.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#4BCE97"
    },
    "Light/color.background.accent.green.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.green.subtle."
      },
      "value": "#7EE2B8"
    },
    "Light/color.background.accent.green.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.green.subtle."
      },
      "value": "#97EDC9"
    },
    "Light/color.background.accent.green.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#1F845A"
    },
    "Light/color.background.accent.green.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.green.bolder."
      },
      "value": "#216E4E"
    },
    "Light/color.background.accent.green.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.green.bolder."
      },
      "value": "#19573D"
    },
    "Light/color.background.accent.teal.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#E7F9FF"
    },
    "Light/color.background.accent.teal.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.teal.subtlest."
      },
      "value": "#C6EDFB"
    },
    "Light/color.background.accent.teal.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.teal.subtlest."
      },
      "value": "#B1E4F7"
    },
    "Light/color.background.accent.teal.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for teal backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#C6EDFB"
    },
    "Light/color.background.accent.teal.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.teal.subtler."
      },
      "value": "#B1E4F7"
    },
    "Light/color.background.accent.teal.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.teal.subtler."
      },
      "value": "#9DD9EE"
    },
    "Light/color.background.accent.teal.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#6CC3E0"
    },
    "Light/color.background.accent.teal.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.teal.subtle."
      },
      "value": "#9DD9EE"
    },
    "Light/color.background.accent.teal.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.teal.subtle."
      },
      "value": "#B1E4F7"
    },
    "Light/color.background.accent.teal.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#227D9B"
    },
    "Light/color.background.accent.teal.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.teal.bolder."
      },
      "value": "#206A83"
    },
    "Light/color.background.accent.teal.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.teal.bolder."
      },
      "value": "#1A5265"
    },
    "Light/color.background.accent.blue.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#E9F2FE"
    },
    "Light/color.background.accent.blue.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.blue.subtlest."
      },
      "value": "#CFE1FD"
    },
    "Light/color.background.accent.blue.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.blue.subtlest."
      },
      "value": "#ADCBFB"
    },
    "Light/color.background.accent.blue.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#CFE1FD"
    },
    "Light/color.background.accent.blue.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.blue.subtler."
      },
      "value": "#ADCBFB"
    },
    "Light/color.background.accent.blue.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.blue.subtler."
      },
      "value": "#8FB8F6"
    },
    "Light/color.background.accent.blue.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#669DF1"
    },
    "Light/color.background.accent.blue.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.blue.subtle."
      },
      "value": "#8FB8F6"
    },
    "Light/color.background.accent.blue.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.blue.subtle."
      },
      "value": "#ADCBFB"
    },
    "Light/color.background.accent.blue.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#1868DB"
    },
    "Light/color.background.accent.blue.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.blue.bolder."
      },
      "value": "#1558BC"
    },
    "Light/color.background.accent.blue.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.blue.bolder."
      },
      "value": "#144794"
    },
    "Light/color.background.accent.purple.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#F8EEFE"
    },
    "Light/color.background.accent.purple.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.purple.subtlest."
      },
      "value": "#EED7FC"
    },
    "Light/color.background.accent.purple.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.purple.subtlest."
      },
      "value": "#E3BDFA"
    },
    "Light/color.background.accent.purple.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for purple backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#EED7FC"
    },
    "Light/color.background.accent.purple.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.purple.subtler."
      },
      "value": "#E3BDFA"
    },
    "Light/color.background.accent.purple.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.purple.subtler."
      },
      "value": "#D8A0F7"
    },
    "Light/color.background.accent.purple.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#C97CF4"
    },
    "Light/color.background.accent.purple.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.purple.subtle."
      },
      "value": "#D8A0F7"
    },
    "Light/color.background.accent.purple.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.purple.subtle."
      },
      "value": "#E3BDFA"
    },
    "Light/color.background.accent.purple.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#964AC0"
    },
    "Light/color.background.accent.purple.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.purple.bolder."
      },
      "value": "#803FA5"
    },
    "Light/color.background.accent.purple.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.purple.bolder."
      },
      "value": "#673286"
    },
    "Light/color.background.accent.magenta.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#FFECF8"
    },
    "Light/color.background.accent.magenta.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.magenta.subtlest."
      },
      "value": "#FDD0EC"
    },
    "Light/color.background.accent.magenta.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.magenta.subtlest."
      },
      "value": "#FCB6E1"
    },
    "Light/color.background.accent.magenta.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#FDD0EC"
    },
    "Light/color.background.accent.magenta.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.magenta.subtler."
      },
      "value": "#FCB6E1"
    },
    "Light/color.background.accent.magenta.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.magenta.subtler."
      },
      "value": "#F797D2"
    },
    "Light/color.background.accent.magenta.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#E774BB"
    },
    "Light/color.background.accent.magenta.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.magenta.subtle."
      },
      "value": "#F797D2"
    },
    "Light/color.background.accent.magenta.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.magenta.subtle."
      },
      "value": "#FCB6E1"
    },
    "Light/color.background.accent.magenta.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#AE4787"
    },
    "Light/color.background.accent.magenta.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.magenta.bolder."
      },
      "value": "#943D73"
    },
    "Light/color.background.accent.magenta.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.magenta.bolder."
      },
      "value": "#77325B"
    },
    "Light/color.background.accent.gray.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."
      },
      "value": "#F0F1F2"
    },
    "Light/color.background.accent.gray.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.gray.subtlest."
      },
      "value": "#DDDEE1"
    },
    "Light/color.background.accent.gray.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.gray.subtlest."
      },
      "value": "#B7B9BE"
    },
    "Light/color.background.accent.gray.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#DDDEE1"
    },
    "Light/color.background.accent.gray.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.gray.subtler."
      },
      "value": "#B7B9BE"
    },
    "Light/color.background.accent.gray.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.gray.subtler."
      },
      "value": "#8C8F97"
    },
    "Light/color.background.accent.gray.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
      },
      "value": "#8C8F97"
    },
    "Light/color.background.accent.gray.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.gray.subtle."
      },
      "value": "#B7B9BE"
    },
    "Light/color.background.accent.gray.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.gray.subtle."
      },
      "value": "#DDDEE1"
    },
    "Light/color.background.accent.gray.bolder": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.7.0",
        "description": "Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."
      },
      "value": "#6B6E76"
    },
    "Light/color.background.accent.gray.bolder.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Hovered state of color.background.accent.gray.bolder."
      },
      "value": "#505258"
    },
    "Light/color.background.accent.gray.bolder.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.19.0",
        "description": "Pressed state of color.background.accent.gray.subtlest."
      },
      "value": "#3B3D42"
    },
    "Light/color.background.disabled": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.0.15",
        "description": "Use for backgrounds of elements in a disabled state."
      },
      "value": "#0515240F"
    },
    "Light/color.background.input": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."
      },
      "value": "#FFFFFF"
    },
    "Light/color.background.input.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state for color.background.input"
      },
      "value": "#F8F8F8"
    },
    "Light/color.background.input.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state for color.background.input"
      },
      "value": "#FFFFFF"
    },
    "Light/color.background.inverse.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.8.3",
        "description": "Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards."
      },
      "value": "#00000029"
    },
    "Light/color.background.inverse.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.8.3",
        "description": "Use for the hovered state of color.background.inverse.subtle"
      },
      "value": "#0000003D"
    },
    "Light/color.background.inverse.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.8.3",
        "description": "Use for the pressed state of color.background.inverse.subtle"
      },
      "value": "#00000052"
    },
    "Light/color.background.neutral": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "The default background for neutral elements, such as default buttons."
      },
      "value": "#0515240F"
    },
    "Light/color.background.neutral.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state for color.background.neutral"
      },
      "value": "#0B120E24"
    },
    "Light/color.background.neutral.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state for color.background.neutral"
      },
      "value": "#080F214A"
    },
    "Light/color.background.neutral.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items."
      },
      "value": "#00000000"
    },
    "Light/color.background.neutral.subtle.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state for color.background.neutral.subtle"
      },
      "value": "#0515240F"
    },
    "Light/color.background.neutral.subtle.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state for color.background.neutral.subtle"
      },
      "value": "#0B120E24"
    },
    "Light/color.background.neutral.bold": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "A vibrant background option for neutral UI elements, such as announcement banners."
      },
      "value": "#292A2E"
    },
    "Light/color.background.neutral.bold.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state of color.background.neutral.bold"
      },
      "value": "#3B3D42"
    },
    "Light/color.background.neutral.bold.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state of color.background.neutral.bold"
      },
      "value": "#505258"
    },
    "Light/color.background.selected": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.2",
        "description": "Use for the background of elements in a selected state, such as in opened dropdown buttons."
      },
      "value": "#E9F2FE"
    },
    "Light/color.background.selected.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.2",
        "description": "Hovered state for color.background.selected"
      },
      "value": "#CFE1FD"
    },
    "Light/color.background.selected.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.2",
        "description": "Pressed state for color.background.selected"
      },
      "value": "#8FB8F6"
    },
    "Light/color.background.selected.bold": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.2",
        "description": "Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons."
      },
      "value": "#1868DB"
    },
    "Light/color.background.selected.bold.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.2",
        "description": "Hovered state of color.background.selected.bold"
      },
      "value": "#1558BC"
    },
    "Light/color.background.selected.bold.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.2",
        "description": "Pressed state of color.background.selected.bold"
      },
      "value": "#123263"
    },
    "Light/color.background.brand.subtlest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.13.0",
        "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
      },
      "value": "#E9F2FE"
    },
    "Light/color.background.brand.subtlest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.13.0",
        "description": "Hovered state of color.background.brand.subtlest."
      },
      "value": "#CFE1FD"
    },
    "Light/color.background.brand.subtlest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.13.0",
        "description": "Pressed state of color.background.brand.subtlest"
      },
      "value": "#ADCBFB"
    },
    "Light/color.background.brand.bold": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Use for the background of elements used to reinforce our brand, but with more emphasis."
      },
      "value": "#1868DB"
    },
    "Light/color.background.brand.bold.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state of color.background.brand.bold."
      },
      "value": "#1558BC"
    },
    "Light/color.background.brand.bold.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state of color.background.brand.bold."
      },
      "value": "#144794"
    },
    "Light/color.background.brand.boldest": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.13.0",
        "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
      },
      "value": "#1C2B42"
    },
    "Light/color.background.brand.boldest.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.13.0",
        "description": "Hovered state of color.background.brand.boldest."
      },
      "value": "#123263"
    },
    "Light/color.background.brand.boldest.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "1.13.0",
        "description": "Pressed state of color.background.brand.boldest."
      },
      "value": "#144794"
    },
    "Light/color.background.danger": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Use for backgrounds communicating critical information, such in error section messages."
      },
      "value": "#FFECEB"
    },
    "Light/color.background.danger.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state for color.background.danger"
      },
      "value": "#FFD5D2"
    },
    "Light/color.background.danger.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state for color.background.danger"
      },
      "value": "#FFB8B2"
    },
    "Light/color.background.danger.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "8.1.0",
        "description": "Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance."
      },
      "value": "#FFD5D2"
    },
    "Light/color.background.danger.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "8.1.0",
        "description": "Hovered state of color.background.danger.subtler"
      },
      "value": "#FFB8B2"
    },
    "Light/color.background.danger.subtler.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "8.1.0",
        "description": "Pressed state of color.background.danger.subtler"
      },
      "value": "#FD9891"
    },
    "Light/color.background.danger.subtle": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "13.2.0",
        "description": "Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states."
      },
      "value": "#FD9891"
    },
    "Light/color.background.danger.bold": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "A vibrant background option for communicating critical information, such as in danger buttons and error banners."
      },
      "value": "#C9372C"
    },
    "Light/color.background.danger.bold.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state of color.background.danger.bold"
      },
      "value": "#AE2E24"
    },
    "Light/color.background.danger.bold.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state of color.background.danger.bold"
      },
      "value": "#872821"
    },
    "Light/color.background.warning": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Use for backgrounds communicating caution, such as in warning section messages."
      },
      "value": "#FFF5DB"
    },
    "Light/color.background.warning.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Hovered state for color.background.warning"
      },
      "value": "#FCE4A6"
    },
    "Light/color.background.warning.pressed": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "0.6.0",
        "description": "Pressed state for color.background.warning"
      },
      "value": "#FBD779"
    },
    "Light/color.background.warning.subtler": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "8.1.0",
        "description": "Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance."
      },
      "value": "#FCE4A6"
    },
    "Light/color.background.warning.subtler.hovered": {
      "attributes": {
        "group": "paint",
        "state": "active",
        "introduced": "8.1.0",
        "description": "Hovered state of color.background.warning.subtler"
      },
      "value": "#FBD779"
    },
    "Light/color.background.warning.subtler.pressed"