Tokens.json

{
  "color": {
    "white": { "value": "#FFFFFF" },
    "black": { "value": "#000000" },
    "orange": {
      "41": { "value": "#D24B00" },
      "45": { "value": "#E85200" },
      "74": { "value": "#EEAC8D" },
      "98": { "value": "#FBE5D9" }
    },
    "neutral": {
      "05": { "value": "#0D0D0D" },
      "15": { "value": "#262626" },
      "25": { "value": "#404040" },
      "42": { "value": "#6B6B6B" },
      "55": { "value": "#8C8C8C" },
      "70": { "value": "#B3B1B1" },
      "80": { "value": "#CCCACA" },
      "90": { "value": "#E6E3E3" },
      "95": { "value": "#F3F1F1" }
    },
    "teal": {
      "19": { "value": "#005663" },
      "22": { "value": "#006170" },
      "28": { "value": "#007A8D" },
      "45": { "value": "#43AAB5" },
      "66": { "value": "#81C8D0" },
      "80": { "value": "#B4DFE3" },
      "94": { "value": "#D6ECEF" }
    },
    "red": {
      "36": { "value": "#B90000" },
      "64": { "value": "#FF464B" },
      "90": { "value": "#EEDFDF" }
    },
    "green": {
      "54": { "value": "#1E8915" },
      "68": { "value": "#26AD1B" },
      "95": { "value": "#E9F3E8" }
    },
    "yellow": {
      "88": { "value": "#E1B800" },
      "98": { "value": "#F9F0D3" }
    },
    "brand": { "value": "{color.orange.45.value}" },
    "background": {
      "light": {
        "primary": { "value": "{color.white.value}" },
        "secondary": { "value": "{color.neutral.95.value}" }
      },
      "dark": {
        "primary": { "value": "{color.neutral.15.value}" },
        "secondary": { "value": "{color.neutral.05.value}" }
      }
    },
    "text": {
      "primary": {
        "on-light": { "value": "{color.neutral.05.value}" },
        "on-dark": { "value": "{color.white.value}" }
      },
      "secondary": {
        "on-light": { "value": "{color.neutral.42.value}" },
        "on-dark": { "value": "{color.neutral.55.value}" }
      },
      "link": {
        "on-light": { "value": "{color.teal.19.value}" },
        "on-dark": { "value": "{color.teal.45.value}" }
      },
      "error": {
        "on-light": { "value": "{color.red.36.value}" },
        "on-dark": { "value": "{color.red.64.value}" }
      },
      "disabled": {
        "on-light": { "value": "{color.neutral.70.value}" },
        "on-dark": { "value": "{color.neutral.42.value}" }
      }
    },
    "icon": {
      "secondary": {
        "on-light": { "value": "{color.neutral.42.value}" },
        "on-dark": { "value": "{color.neutral.55.value}" }
      }
    },
    "action": {
      "default": {
        "on-light": { "value": "{color.teal.28.value}" },
        "on-dark": { "value": "{color.teal.45.value}" }
      },
      "hover": {
        "on-light": { "value": "{color.teal.22.value}" },
        "on-dark": { "value": "{color.teal.66.value}" }
      },
      "focus": {
        "on-light": { "value": "{color.teal.28.value}" },
        "on-dark": { "value": "{color.teal.45.value}" }
      },
      "selected": {
        "on-light": { "value": "{color.teal.28.value}" },
        "on-dark": { "value": "{color.teal.45.value}" }
      },
      "active": {
        "on-light": { "value": "{color.teal.19.value}" },
        "on-dark": { "value": "{color.teal.80.value}" }
      },
      "pressed": {
        "on-light": { "value": "{color.teal.19.value}" },
        "on-dark": { "value": "{color.teal.80.value}" }
      },
      "disabled": {
        "on-light": { "value": "{color.neutral.80.value}" },
        "on-dark": { "value": "{color.neutral.25.value}" }
      }
    },
    "navigation": {
      "selected": {
        "on-light": { "value": "{color.orange.45.value}" },
        "on-dark": { "value": "{color.orange.45.value}" }
      }
    },
    "border": {
      "control": {
        "default": {
          "on-light": { "value": "{color.neutral.70.value}" },
          "on-dark": { "value": "{color.neutral.70.value}" }
        },
        "focus": {
          "on-light": { "value": "{color.teal.19.value}" },
          "on-dark": { "value": "{color.teal.45.value}" }
        },
        "error": {
          "on-light": { "value": "{color.red.36.value}" },
          "on-dark": { "value": "{color.red.64.value}" }
        }
      }
    },
    "alert": {
      "error": {
        "on-light": { "value": "{color.red.36.value}" },
        "on-dark": { "value": "{color.red.64.value}" },
        "fill": { "value": "{color.red.90.value}" }
      },
      "success": {
        "on-light": { "value": "{color.green.54.value}" },
        "on-dark": { "value": "{color.green.68.value}" },
        "fill": { "value": "{color.green.95.value}" }
      },
      "warning": {
        "on-light": { "value": "{color.yellow.88.value}" },
        "fill": { "value": "{color.yellow.98.value}" }
      },
      "info": {
        "on-light": { "value": "{color.teal.28.value}" },
        "fill": { "value": "{color.teal.94.value}" }
      },
      "new": {
        "on-light": { "value": "{color.orange.45.value}" },
        "fill": { "value": "{color.orange.98.value}" }
      }
    }
  },

  "font": {
    "family": {
      "sans-serif": { "value": "Barlow Semi Condensed, sans-serif" },
      "monospace": { "value": "Roboto Mono, monospace" }
    },
    "size": {
      "heading-level-1": {
        "default": { "value": "36px" },
        "at-480": { "value": "40px" },
        "at-768": { "value": "48px" },
        "at-1000": { "value": "64px" }
      },
      "heading-level-2": {
        "default": { "value": "27.64px" },
        "at-480": { "value": "31.248px" },
        "at-768": { "value": "37.904px" },
        "at-1000": { "value": "45px" }
      },
      "heading-level-3": {
        "default": { "value": "23.04px" },
        "at-480": { "value": "25.008px" },
        "at-768": { "value": "28.432px" },
        "at-1000": { "value": "32px" }
      },
      "heading-level-4": {
        "default": { "value": "19.2px" },
        "at-480": { "value": "20px" },
        "at-768": { "value": "21.328px" },
        "at-1000": { "value": "24px" }
      },
      "heading-level-5": {
        "default": { "value": "15.36px" },
        "at-480": { "value": "16px" },
        "at-768": { "value": "17px" },
        "at-1000": { "value": "19.2px" }
      },
      "heading-eyebrow-m": {
        "default": { "value": "13px" },
        "at-480": { "value": "14px" },
        "at-768": { "value": "15px" },
        "at-1000": { "value": "15px" }
      },
      "heading-eyebrow-s": {
        "default": { "value": "11px" },
        "at-480": { "value": "12px" },
        "at-768": { "value": "13px" },
        "at-1000": { "value": "13px" }
      },
      "heading-eyebrow-xs": {
        "default": { "value": "9px" },
        "at-480": { "value": "10px" },
        "at-768": { "value": "11px" },
        "at-1000": { "value": "11px" }
      },
      "body-lead": {
        "default": { "value": "20.8px" },
        "at-480": { "value": "22.4px" },
        "at-768": { "value": "25.6px" },
        "at-1000": { "value": "28.8px" }
      },
      "body-l": {
        "default": { "value": "19.2px" },
        "at-480": { "value": "20px" },
        "at-768": { "value": "21.28px" },
        "at-1000": { "value": "22.624px" }
      },
      "body-m": {
        "default": { "value": "16px" },
        "at-480": { "value": "16px" },
        "at-768": { "value": "19.2px" },
        "at-1000": { "value": "19.2px" }
      },
      "body-s": {
        "default": { "value": "13.3px" },
        "at-480": { "value": "13.3px" },
        "at-768": { "value": "16px" },
        "at-1000": { "value": "16px" }
      },
      "body-xs": {
        "default": { "value": "11px" },
        "at-480": { "value": "11px" },
        "at-768": { "value": "13px" },
        "at-1000": { "value": "13px" }
      }
    },
    "line-height": {
      "normal": { "value": "1.3" },
      "headings": { "value": "1.2" },
      "tight": { "value": "1.2" }
    },
    "weight": {
      "regular": { "value": "300" },
      "semi-bold": { "value": "500" }
    },
    "line-length": {
      "long-form": { "value": "800px" }
    }
  },
  "border": {
    "control": {
      "default": {
        "on-light": { "value": "solid 1px {color.border.control.default.on-light.value}" },
        "on-dark": { "value": "solid 1px {color.border.control.default.on-dark.value}" }
      },
      "focus": {
        "on-light": { "value": "solid 1px {color.border.control.focus.on-light.value}" },
        "on-dark": { "value": "solid 1px {color.border.control.focus.on-dark.value}" }
      },
      "error": {
        "on-light": { "value": "solid 1px {color.border.control.error.on-light.value}" },
        "on-dark": { "value": "solid 1px {color.border.control.error.on-dark.value}" }
      }
    },
    "radius": {
      "control": { "value": "4px" },
      "default": { "value": "8px" }
    }
  },
  "space": {
    "16-x": { "value": "256px" },
    "8-x": { "value": "128px" },
    "4-x": { "value": "64px" },
    "3-x": { "value": "48px" },
    "2-x": { "value": "32px" },
    "1-and-half-x": { "value": "24px" },
    "1-x": { "value": "16px" },
    "three-quarter-x": { "value": "12px" },
    "half-x": { "value": "8px" },
    "quarter-x": { "value": "4px" },
    "eighth-x": { "value": "2px" },
    "inset": {
      "8-x": { "value": "128px" },
      "4-x": { "value": "64px" },
      "2-x": { "value": "32px" },
      "1-and-half-x": { "value": "24px" },
      "1-x": { "value": "16px" },
      "half-x": { "value": "8px" },
      "quarter-x": { "value": "4px" },
      "eighth-x": { "value": "2px" }
    },
    "inset-squish": {
      "4-x": { "value": "32px 64px" },
      "2-x": { "value": "16px 32px" },
      "1-and-half-x": { "value": "12px 24px" },
      "1-x": { "value": "8px 12px" },
      "half-x": { "value": "6px 8px" },
      "quarter-x": { "value": "2px 4px" }
    },
    "stack": {
      "4-x": { "value": "0 0 64px" },
      "3-x": { "value": "0 0 48px" },
      "2-x": { "value": "0 0 32px" },
      "1-and-half-x": { "value": "0 0  24px" },
      "1-x": { "value": "0 0 16px" },
      "three-quarter-x": { "value": "0 0 12px" },
      "half-x": { "value": "0 0 8px" },
      "quarter-x": { "value": "0 0 4px" },
      "eighth-x": { "value": "0 0 2px" }
    }
  },
  "size": {
    "icon": {
      "s": { "value": "16px" },
      "m": { "value": "20px" },
      "l": { "value": "24px" }
    }
  },
  "transition": {
    "nteractive-hover-speed": { "value": ".2s" }
  },
  "breakpoints": {
    "width-500": { "value": "500px" },
    "width-768": { "value": "768px" },
    "width-1000": { "value": "1000px" },
    "idth-1200": { "value": "1200px" }
  }
}