{
  "properties": [
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(200, 175, 240)",
      "comment": "Background color used for user avatars.",
      "name": "colorBackgroundUser"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Background color used for notifications.",
      "name": "colorBackgroundNotification"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(209, 250, 224)",
      "comment": "Background color used for trial accounts.",
      "name": "colorBackgroundTrial"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(255, 251, 234)",
      "comment": "Background color used for subaccounts.",
      "name": "colorBackgroundSubaccount"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(3, 11, 93)",
      "comment": "Stronger background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimaryStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(204, 228, 255)",
      "comment": "Weaker background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimaryWeaker"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(252, 207, 207)",
      "comment": "Weaker background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveWeaker"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(64, 79, 110)",
      "comment": "Elevation token for color-background-inverse-stronger elements.",
      "name": "colorBackgroundInverseStrongerElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(249, 249, 250)",
      "comment": "Elevation token for color-background-body elements.",
      "name": "colorBackgroundBodyElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 124, 34)",
      "comment": "Background color used for warning alerts and toasts.",
      "name": "colorBackgroundWarning"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(237, 238, 242)",
      "comment": "Elevation token for color-background elements.",
      "name": "colorBackgroundElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(254, 245, 238)",
      "comment": "Weakest background color used for warning alerts and toasts.",
      "name": "colorBackgroundWarningWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(57, 71, 98)",
      "comment": "Strong inverse background color used for containers.",
      "name": "colorBackgroundInverseStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(249, 249, 250)",
      "comment": "Elevation token for color-background-weak elements.",
      "name": "colorBackgroundWeakerElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(245, 240, 252)",
      "comment": "Background color used to represent a new status.",
      "name": "colorBackgroundNew"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(37, 57, 91)",
      "comment": "Elevation token for color-background-inverse elements.",
      "name": "colorBackgroundInverseElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(225, 227, 234)",
      "comment": "Strong background color used for containers.",
      "name": "colorBackgroundStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(250, 247, 253)",
      "comment": "Weakest background color for indicating a new status.",
      "name": "colorBackgroundNewWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructive"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(249, 249, 250)",
      "comment": "Weak background color used for containers.",
      "name": "colorBackgroundWeak"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(2, 99, 224)",
      "comment": "Background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimary"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(235, 244, 255)",
      "comment": "Weakest background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimaryWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 124, 34)",
      "comment": "Background color used to represent an entity or person as \"busy\".",
      "name": "colorBackgroundBusy"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(20, 176, 83)",
      "comment": "Background color used for success alerts and toasts.",
      "name": "colorBackgroundSuccess"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(254, 245, 245)",
      "comment": "Weakest background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(139, 147, 170)",
      "comment": "Background color used to represent an entity or person as \"offline\".",
      "name": "colorBackgroundOffline"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 244, 246)",
      "comment": "Background color used for alternative striped rows.",
      "name": "colorBackgroundRowStriped"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(6, 3, 58)",
      "comment": "Strongest background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimaryStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(237, 253, 243)",
      "comment": "Weakest background color used for success alerts and toasts.",
      "name": "colorBackgroundSuccessWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(117, 12, 12)",
      "comment": "Strongest background color used for error alerts and toasts.",
      "name": "colorBackgroundErrorStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(3, 11, 93)",
      "comment": "Strong primary brand background, accessible with inverse text.",
      "name": "colorBackgroundBrandStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Primary brand background, accessible with inverse text.",
      "name": "colorBackgroundBrand"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Background color used for error alerts and toasts.",
      "name": "colorBackgroundError"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(235, 244, 255)",
      "comment": "Weakest background color used for neutral or default variants.",
      "name": "colorBackgroundNeutralWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(20, 176, 83)",
      "comment": "Background color used to represent an entity or person as \"available\".",
      "name": "colorBackgroundAvailable"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(254, 245, 245)",
      "comment": "Weakest background color used for error alerts and toasts.",
      "name": "colorBackgroundErrorWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(236, 91, 91)",
      "comment": "Background color used to represent required form fields.",
      "name": "colorBackgroundRequired"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest error background color",
      "name": "colorBackgroundErrorStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(245, 240, 252)",
      "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.",
      "name": "colorBackgroundDecorative40Weakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(57, 71, 98)",
      "comment": "Stronger inverse background color for any container. Must be used on color-background-body-inverse.",
      "name": "colorBackgroundInverseStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(237, 253, 243)",
      "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.",
      "name": "colorBackgroundDecorative30Weakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Background color used for the main page body.",
      "name": "colorBackgroundBody"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Strong background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimaryStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(235, 244, 255)",
      "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.",
      "name": "colorBackgroundDecorative20Weakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(117, 12, 12)",
      "comment": "Strong background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(246, 177, 177)",
      "comment": "Weak background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveWeak"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 244, 246)",
      "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.",
      "name": "colorBackgroundDecorative10Weakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 244, 246)",
      "comment": "Default background color for any container.",
      "name": "colorBackground"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(153, 205, 255)",
      "comment": "Weak background color used for primary actions or highlights.",
      "name": "colorBackgroundPrimaryWeak"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(106, 221, 178)",
      "comment": "Brand accent background color representing Segment.",
      "name": "colorBackgroundBrand30"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(255, 255, 255)",
      "comment": "The weakest background color used for containers.",
      "name": "colorBackgroundWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(136, 145, 170)",
      "comment": "Stronger background color used for containers.",
      "name": "colorBackgroundStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(37, 57, 91)",
      "comment": "Elevation token for color-background-inverse-strong elements.",
      "name": "colorBackgroundInverseStrongElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(81, 169, 227)",
      "comment": "Brand accent background color representing Sendgrid.",
      "name": "colorBackgroundBrand20"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(242, 47, 70)",
      "comment": "Highlight brand background, accessible with black text.",
      "name": "colorBackgroundBrandHighlight"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgba(242, 47, 70, 0.1)",
      "comment": "Weakest background color used for brand highlights.",
      "name": "colorBackgroundBrandHighlightWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(75, 86, 113)",
      "comment": "Strongest background color used for containers.",
      "name": "colorBackgroundStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(37, 57, 91)",
      "comment": "Elevation token for color-background-inverse-weak elements.",
      "name": "colorBackgroundInverseWeakElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(242, 190, 90)",
      "comment": "Brand accent background color representing Twilio.",
      "name": "colorBackgroundBrand10"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.",
      "name": "colorBackgroundWeaker"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(18, 28, 45)",
      "comment": "Inverse background color used for the main page body.",
      "name": "colorBackgroundBodyInverse"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(31, 48, 76)",
      "comment": "Inverse background color used for containers.",
      "name": "colorBackgroundInverse"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgba(6, 3, 58, 0.4)",
      "comment": "Background color used for overlays.",
      "name": "colorBackgroundOverlay"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Background color used to represent an entity or person as \"unavailable\".",
      "name": "colorBackgroundUnavailable"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(225, 227, 234)",
      "comment": "Elevation token for color-background-strong elements.",
      "name": "colorBackgroundStrongElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 249, 255)",
      "comment": "Primary elevation token for color-background-body elements.",
      "name": "colorBackgroundBodyElevationPrimary"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Strongest inverse background color used for containers.",
      "name": "colorBackgroundInverseStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(249, 249, 250)",
      "comment": "Elevation token for color-background-weak elements.",
      "name": "colorBackgroundWeakElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger error background color",
      "name": "colorBackgroundErrorStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(6, 3, 58)",
      "comment": "Stronger primary brand background, accessible with inverse text.",
      "name": "colorBackgroundBrandStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger error border color",
      "name": "colorBorderErrorStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(255, 179, 122)",
      "comment": "Weak warning border color",
      "name": "colorBorderWarningWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(231, 220, 250)",
      "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.",
      "name": "colorBorderDecorative40Weaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(252, 207, 207)",
      "comment": "Weaker error border color",
      "name": "colorBorderErrorWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(231, 220, 250)",
      "comment": "User avatar border color.",
      "name": "colorBorderUser"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(204, 228, 255)",
      "comment": "Weaker neutral border color",
      "name": "colorBorderNeutralWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(244, 124, 34)",
      "comment": "Warning border color",
      "name": "colorBorderWarning"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(209, 250, 224)",
      "comment": "Weaker success border color",
      "name": "colorBorderSuccessWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(3, 11, 93)",
      "comment": "Stronger primary border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weak",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weak",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderPrimaryStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger destructive hover border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weak",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weak",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderDestructiveStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(254, 245, 238)",
      "comment": "Weakest warning border color",
      "name": "colorBorderWarningWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(204, 228, 255)",
      "comment": "Weaker primary border color",
      "name": "colorBorderPrimaryWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(252, 207, 207)",
      "comment": "Destructive focus border color",
      "name": "colorBorderDestructiveWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(231, 220, 250)",
      "comment": "Weaker border color for something designated as new",
      "name": "colorBorderNewWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Destructive border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderDestructive"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(225, 227, 234)",
      "comment": "Strong border on inverse backgrounds. Must be used on color-background-body-inverse.",
      "uicontrol_contrast_pairing": [
        "color-background-body-inverse"
      ],
      "name": "colorBorderInverseStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(2, 99, 224)",
      "comment": "Primary border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderPrimary"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(235, 244, 255)",
      "comment": "Weakest primary border color",
      "name": "colorBorderPrimaryWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(20, 176, 83)",
      "comment": "Success border color",
      "name": "colorBorderSuccess"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(254, 236, 236)",
      "comment": "Destructive focus border color",
      "name": "colorBorderDestructiveWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest destructive hover border color",
      "name": "colorBorderDestructiveStrongest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(6, 3, 58)",
      "comment": "Strongest primary border color",
      "name": "colorBorderPrimaryStrongest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(237, 253, 243)",
      "comment": "Weakest success border color",
      "name": "colorBorderSuccessWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(253, 220, 196)",
      "comment": "Weaker warning border color",
      "name": "colorBorderWarningWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(96, 107, 133)",
      "comment": "Strong border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-strong",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(202, 205, 216)",
      "comment": "Weak border color",
      "name": "colorBorderWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(2, 99, 224)",
      "comment": "Neutral border color",
      "name": "colorBorderNeutral"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Error border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderError"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(254, 236, 236)",
      "comment": "Weakest error border color",
      "name": "colorBorderErrorWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest error border color",
      "name": "colorBorderErrorStrongest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(117, 12, 12)",
      "comment": "Strong error border color",
      "name": "colorBorderErrorStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(245, 138, 138)",
      "comment": "Weak error border color",
      "name": "colorBorderErrorWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(102, 179, 255)",
      "comment": "Weak neutral border color",
      "name": "colorBorderNeutralWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(139, 147, 170)",
      "comment": "Default border color",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "name": "colorBorder"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Weakest border color",
      "name": "colorBorderWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(244, 244, 246)",
      "comment": "Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.",
      "uicontrol_contrast_pairing": [
        "color-background-body-inverse"
      ],
      "name": "colorBorderInverseStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(57, 71, 98)",
      "comment": "Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.",
      "name": "colorBorderInverseWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(54, 213, 118)",
      "comment": "Weak success border color",
      "name": "colorBorderSuccessWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Strong primary border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weak",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weak",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderPrimaryStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(136, 145, 170)",
      "comment": "Border on inverse backgrounds. Must be used on color-background-body-inverse.",
      "uicontrol_contrast_pairing": [
        "color-background-body-inverse"
      ],
      "name": "colorBorderInverse"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(117, 12, 12)",
      "comment": "Destructive focus border color",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weak",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weak",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorBorderDestructiveStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(153, 205, 255)",
      "comment": "Weak primary border color",
      "name": "colorBorderPrimaryWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(31, 48, 76)",
      "comment": "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.",
      "name": "colorBorderInverseWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(246, 177, 177)",
      "comment": "Destructive focus border color",
      "name": "colorBorderDestructiveWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.",
      "uicontrol_contrast_pairing": [
        "color-background-body-inverse"
      ],
      "name": "colorBorderInverseStrongest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(166, 127, 227)",
      "comment": "Weak border color for something designated as new",
      "name": "colorBorderNewWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(225, 227, 234)",
      "comment": "Weaker border color",
      "name": "colorBorderWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(225, 227, 234)",
      "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.",
      "name": "colorBorderDecorative10Weaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(204, 228, 255)",
      "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.",
      "name": "colorBorderDecorative20Weaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(209, 250, 224)",
      "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.",
      "name": "colorBorderDecorative30Weaker"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "0.5",
      "comment": "Circular border radius",
      "name": "borderRadiusCircle"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "32px",
      "comment": "Largest border radius",
      "name": "borderRadius90"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "28px",
      "comment": "Extra-large border radius",
      "name": "borderRadius80"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "100px",
      "comment": "Pill border radius",
      "name": "borderRadiusPill"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "24px",
      "comment": "Larger border radius",
      "name": "borderRadius70"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "20px",
      "comment": "Large border radiusr",
      "name": "borderRadius60"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "16px",
      "comment": "Medium-large border radius",
      "name": "borderRadius50"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "12px",
      "comment": "Medium border radius",
      "name": "borderRadius40"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "0",
      "comment": "Border radius reset",
      "name": "borderRadius0"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "8px",
      "comment": "Small-medium border radius",
      "name": "borderRadius30"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "4px",
      "comment": "Small border radius",
      "name": "borderRadius20"
    },
    {
      "type": "size",
      "category": "radius",
      "value": "2px",
      "comment": "Smallest border radius",
      "name": "borderRadius10"
    },
    {
      "type": "size",
      "category": "border-width",
      "value": "0",
      "comment": "Border width reset",
      "name": "borderWidth0"
    },
    {
      "type": "size",
      "category": "border-width",
      "value": "1px",
      "comment": "Constant border width token for border width 10",
      "name": "borderWidth10"
    },
    {
      "type": "size",
      "category": "border-width",
      "value": "2px",
      "comment": "Constant border width token for border width 20",
      "name": "borderWidth20"
    },
    {
      "type": "size",
      "category": "border-width",
      "value": "4px",
      "comment": "Constant border width token for border width 30",
      "name": "borderWidth30"
    },
    {
      "type": "size",
      "category": "border-width",
      "value": "8px",
      "comment": "Constant border width token for border width 40",
      "name": "borderWidth40"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #e7dcfa",
      "comment": "Weaker bottom shadow border for new status",
      "name": "shadowBorderBottomNewWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 4px 16px 0 rgba(18, 28, 45, 0.2)",
      "comment": "Default shadow.",
      "name": "shadow"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "inset 0 -1px 0 0 #394762",
      "comment": "Weaker bottom shadow border for tab container on inverse backgrounds",
      "name": "shadowBorderBottomInverseWeakerInset"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #fff1b3",
      "comment": "Shadow border for subaccount badge.",
      "name": "shadowBorderSubaccount"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #edeef2",
      "comment": "Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations.",
      "name": "shadowElevation05"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #4a0b0b",
      "comment": "Strong shadow border for destructive interactions",
      "name": "shadowBorderDestructiveStronger"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #d1fae0",
      "comment": "Weaker shadow border for success inputs.",
      "name": "shadowBorderSuccessWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #5817bd",
      "comment": "Shadow border for the sidebar beta badge.",
      "name": "shadowBorderInverseNewWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #030b5d",
      "comment": "Stronger shadow border for inputs active.",
      "name": "shadowBorderPrimaryStronger"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #fddcc4",
      "comment": "Weaker bottom shadow border for warning status",
      "name": "shadowBorderBottomWarningWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #fccfcf",
      "comment": "Weaker shadow border for destructive interactions.",
      "name": "shadowBorderDestructiveWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #cce4ff",
      "comment": "Weaker shadow border for primary interactions.",
      "name": "shadowBorderPrimaryWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 -1px 0 #cce4ff",
      "comment": "Top shadow border for for selected status of horizontal tabs on inverse backgrounds",
      "name": "shadowBorderTopInverseStrongest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #cacdd8",
      "comment": "Bottom shadow border for border weak color",
      "name": "shadowBorderBottomWeak"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #e7dcfa",
      "comment": "Weaker shadow border for new status inputs.",
      "name": "shadowBorderNewWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 0 #1f304c",
      "comment": "Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.",
      "name": "shadowElevationBottomInverse05"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
      "comment": "Low elevation default shadow.",
      "name": "shadowLow"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)",
      "comment": "Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.",
      "name": "shadowElevationLeft20"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #e1e3ea",
      "comment": "Strong shadow border on interactive elements on inverse backgrounds.",
      "name": "shadowBorderInverseStrong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #fddcc4",
      "comment": "Weaker shadow border for warning inputs.",
      "name": "shadowBorderWarningWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 0 #edeef2",
      "comment": "Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations.",
      "name": "shadowElevationBottom05"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #606b85",
      "comment": "Strong shadow border for inputs.",
      "name": "shadowBorderStrong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 4px rgba(2, 99, 224, 0.7)",
      "comment": "Shadow for focus ring on interactive elements.",
      "name": "shadowFocus"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #cacdd8",
      "comment": "Weak shadow border for disabled inputs.",
      "name": "shadowBorderWeak"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 4px rgba(255, 255, 255, 0.4)",
      "comment": "Shadow for focus ring on interactive elements on inverse backgrounds.",
      "name": "shadowFocusInverse"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #0263e0",
      "comment": "Default shadow border for primary interactions.",
      "name": "shadowBorderPrimary"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #DB132A",
      "comment": "Shadow border for destructive interactions.",
      "name": "shadowBorderDestructive"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
      "comment": "High elevation default shadow.",
      "name": "shadowHigh"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "-4px 0 8px -4px rgba(18, 28, 45, 0.2)",
      "comment": "Right shadow border for elements.",
      "name": "shadowRight"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "1px 0 0 0 #1f304c",
      "comment": "Accent shadows that subtly define the right edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.",
      "name": "shadowElevationRightInverse05"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #750c0c",
      "comment": "Shadow border for error inputs hover.",
      "name": "shadowBorderErrorStrong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #394762",
      "comment": "Bottom shadow border for inverse border weaker color",
      "name": "shadowBorderBottomInverseWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #06033a",
      "comment": "Strongest shadow border for inputs active.",
      "name": "shadowBorderPrimaryStrongest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #310c0c",
      "comment": "Strongest shadow border for destructive interactions",
      "name": "shadowBorderDestructiveStrongest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #EC5B5B",
      "comment": "Shadow border for inverse error inputs.",
      "name": "shadowBorderErrorWeak"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #855c15",
      "comment": "Strong bottom shadow border for brand 10",
      "name": "shadowBorderBottomBrand10Strong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #043cb5",
      "comment": "Strong bottom shadow border for brand 20",
      "name": "shadowBorderBottomBrand20Strong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "-4px 0 8px -4px rgba(0, 0, 0, 0.4)",
      "comment": "Right shadow border for inverse elements.",
      "name": "shadowRightInverse"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)",
      "comment": "Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.",
      "name": "shadowElevationTop20"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #0e7c3a",
      "comment": "Strong bottom shadow border for brand 30",
      "name": "shadowBorderBottomBrand30Strong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "4px 0 8px -4px rgba(18, 28, 45, 0.2)",
      "comment": "Left shadow border for elements.",
      "name": "shadowLeft"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #DB132A",
      "comment": "Shadow border for error inputs.",
      "name": "shadowBorderError"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #e1e3ea",
      "comment": "Weaker bottom shadow border for decorative 10",
      "name": "shadowBorderBottomDecorative10Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #006dfa",
      "comment": "Bottom shadow border for primary status",
      "name": "shadowBorderBottomPrimary"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #cce4ff",
      "comment": "Weaker bottom shadow border for decorative 20",
      "name": "shadowBorderBottomDecorative20Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #f4f4f6",
      "comment": "Stronger shadow border on interactive elements on inverse backgrounds.",
      "name": "shadowBorderInverseStronger"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "inset 0 -1px 0 0 #cacdd8",
      "comment": "Weak bottom shadow border for tab container",
      "name": "shadowBorderBottomWeakInset"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #310c0c",
      "comment": "Strongest shadow border for error inputs hover.",
      "name": "shadowBorderErrorStrongest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #750c0c",
      "comment": "Strong shadow border for destructive interactions",
      "name": "shadowBorderDestructiveStrong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #394762",
      "comment": "Weaker shadow border on interactive elements on inverse backgrounds.",
      "name": "shadowBorderInverseWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 -1px 0 #006dfa",
      "comment": "Top shadow border for selected status of horizontal tabs",
      "name": "shadowBorderTopPrimary"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #d1fae0",
      "comment": "Weaker bottom shadow border for decorative 30",
      "name": "shadowBorderBottomDecorative30Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #001489",
      "comment": "Strong shadow border for inputs hover.",
      "name": "shadowBorderPrimaryStrong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "mint",
      "comment": "Shadow border for brand 30",
      "name": "shadowBorderBrand30"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #99cdff",
      "comment": "Weaker shadow border for primary interactions.",
      "name": "shadowBorderPrimaryWeak"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa",
      "comment": "Shadow for simultaneous focus and border.",
      "name": "shadowFocusShadowBorder"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #e7dcfa",
      "comment": "Weaker bottom shadow border for decorative 40",
      "name": "shadowBorderBottomDecorative40Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #f6b1b1",
      "comment": "Weak shadow border for destructive interactions.",
      "name": "shadowBorderDestructiveWeak"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "4px 0 8px -4px rgba(0, 0, 0, 0.4)",
      "comment": "Left shadow border for inverse elements.",
      "name": "shadowLeftInverse"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "sky",
      "comment": "Shadow border for brand 20",
      "name": "shadowBorderBrand20"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 -1px 0 #030b5d",
      "comment": "Top shadow border for selected hover status of horizontal tabs",
      "name": "shadowBorderTopPrimaryStrongest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #4a0b0b",
      "comment": "Stronger bottom shadow border for notification.",
      "name": "shadowBorderBottomNotificationStronger"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #fccfcf",
      "comment": "Weaker bottom shadow border for error status",
      "name": "shadowBorderBottomErrorWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #e1e3ea",
      "comment": "Weaker shadow border for disabled inputs.",
      "name": "shadowBorderWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #8B93AA",
      "comment": "Shadow border for inputs.",
      "name": "shadowBorder"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)",
      "comment": "Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.",
      "name": "shadowElevationInverse10"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "1px 0 #e1e3ea",
      "comment": "Right shadow border for hover status of vertical tabs on inverse backgrounds",
      "name": "shadowBorderRightInverseStrong"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #cce4ff",
      "comment": "Weaker bottom shadow border for neutral status",
      "name": "shadowBorderBottomNeutralWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "saffron",
      "comment": "Shadow border for brand 10",
      "name": "shadowBorderBrand10"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #e1e3ea",
      "comment": "Weaker shadow border for decorative 10",
      "name": "shadowBorderDecorative10Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 -1px 0 0 #edeef2",
      "comment": "Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations.",
      "name": "shadowElevationTop05"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #cce4ff",
      "comment": "Weaker shadow border for decorative 20",
      "name": "shadowBorderDecorative20Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #ffdd35",
      "comment": "Bottom shadow border for subaccount badge",
      "name": "shadowBorderBottomSubaccount"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "inset 0 0 0 2px rgba(2, 99, 224, 0.7)",
      "comment": "Shadow for inset focus on elements, such as DataGrid cells.",
      "name": "shadowFocusInset"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)",
      "comment": "Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them.",
      "name": "shadowElevation20"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #8891aa",
      "comment": "Shadow border on interactive elements on inverse backgrounds.",
      "name": "shadowBorderInverse"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)",
      "comment": "Use on elements that overlay other UI components but remain visually connected to the elements behind them.",
      "name": "shadowElevation10"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #d1fae0",
      "comment": "Weaker shadow border for decorative 30",
      "name": "shadowBorderDecorative30Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #1f304c",
      "comment": "Weakest shadow border on interactive elements on inverse backgrounds.",
      "name": "shadowBorderInverseWeakest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #5817bd",
      "comment": "Bottom shadow border for the sidebar beta badge",
      "name": "shadowBorderBottomInverseNewWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #d1fae0",
      "comment": "Weaker bottom shadow border for success status",
      "name": "shadowBorderBottomSuccessWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #e7dcfa",
      "comment": "Weaker shadow border for decorative 40",
      "name": "shadowBorderDecorative40Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #4a0b0b",
      "comment": "Shadow border for error inputs hover.",
      "name": "shadowBorderErrorStronger"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
      "comment": "Shadow for cards.",
      "name": "shadowCard"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #fccfcf",
      "comment": "Weaker shadow border for error inputs.",
      "name": "shadowBorderErrorWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #ffffff",
      "comment": "Strongest shadow border on interactive elements on inverse backgrounds.",
      "name": "shadowBorderInverseStrongest"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "inset 0 0 0 2px rgba(255, 255, 255, 0.4)",
      "comment": "Shadow for inset focus ring on interactive elements on inverse backgrounds.",
      "name": "shadowFocusInverseInset"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #DB132A",
      "comment": "Shadow border for notification.",
      "name": "shadowBorderNotification"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 0 #8B93AA",
      "comment": "Bottom shadow border for elements.",
      "name": "shadowBorderBottom"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #1f304c",
      "comment": "Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations.",
      "name": "shadowElevationInverse05"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #8c5bd8",
      "comment": "Shadow border for user.",
      "name": "shadowBorderUser"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #cce4ff",
      "comment": "Weaker shadow border for neutral inputs.",
      "name": "shadowBorderNeutralWeaker"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(236, 91, 91)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-9",
        "color-data-visualization-1"
      ],
      "name": "colorDataVisualization10"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(0, 20, 137)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-10",
        "color-data-visualization-2"
      ],
      "name": "colorDataVisualization1"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(14, 124, 58)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-1",
        "color-data-visualization-3"
      ],
      "name": "colorDataVisualization2"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(13, 58, 31)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-2",
        "color-data-visualization-4"
      ],
      "name": "colorDataVisualization3"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(0, 140, 255)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-3",
        "color-data-visualization-5"
      ],
      "name": "colorDataVisualization4"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(57, 71, 98)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-4",
        "color-data-visualization-6"
      ],
      "name": "colorDataVisualization5"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(166, 127, 227)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-5",
        "color-data-visualization-7"
      ],
      "name": "colorDataVisualization6"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(109, 46, 209)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-6",
        "color-data-visualization-8"
      ],
      "name": "colorDataVisualization7"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(136, 145, 170)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-7",
        "color-data-visualization-9"
      ],
      "name": "colorDataVisualization8"
    },
    {
      "type": "color",
      "category": "data-visualization",
      "value": "rgb(117, 12, 12)",
      "comment": "Color used for data visualizations. Must be used in a sequence.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "data_visualization_contrast_pairing": [
        "color-data-visualization-8",
        "color-data-visualization-10"
      ],
      "name": "colorDataVisualization9"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
      "name": "fontFamilyText"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'TwilioSansMono', Courier, monospace",
      "name": "fontFamilyCode"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif",
      "name": "fontFamilyTextJapanese"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif",
      "name": "fontFamilyTextKorean"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif",
      "name": "fontFamilyTextChineseTraditional"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif",
      "name": "fontFamilyTextChineseSimplified"
    },
    {
      "category": "font",
      "type": "font",
      "value": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
      "name": "fontFamilyDisplay"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "48",
      "comment": "Constant typography token for font size 110",
      "name": "fontSize110"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "40",
      "comment": "Constant typography token for font size 100",
      "name": "fontSize100"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "32",
      "comment": "Constant typography token for font size 90",
      "name": "fontSize90"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "28",
      "comment": "Constant typography token for font size 80",
      "name": "fontSize80"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "24",
      "comment": "Constant typography token for font size 70",
      "name": "fontSize70"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "20",
      "comment": "Constant typography token for font size 60",
      "name": "fontSize60"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "18",
      "comment": "Constant typography token for font size 50",
      "name": "fontSize50"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "16",
      "comment": "Constant typography token for font size 40",
      "name": "fontSize40"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "14",
      "comment": "Constant typography token for font size 30",
      "name": "fontSize30"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "12",
      "comment": "Constant typography token for font size 20",
      "name": "fontSize20"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "10",
      "comment": "Constant typography token for font size 10",
      "name": "fontSize10"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "64",
      "comment": "Constant typography token for font size display 30",
      "name": "fontSizeDisplay30"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "48",
      "comment": "Constant typography token for font size display 20",
      "name": "fontSizeDisplay20"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "32",
      "comment": "Constant typography token for font size display 10",
      "name": "fontSizeDisplay10"
    },
    {
      "category": "font-size",
      "type": "font-size",
      "value": "1",
      "comment": "Base font size applied to the html element, used for rem calculations",
      "name": "fontSizeBase"
    },
    {
      "category": "font-weight",
      "type": "font-weight",
      "value": "400",
      "comment": "Font weight for light weight",
      "name": "fontWeightLight"
    },
    {
      "category": "font-weight",
      "type": "font-weight",
      "value": "400",
      "comment": "Font weight for normal weight",
      "name": "fontWeightNormal"
    },
    {
      "category": "font-weight",
      "type": "font-weight",
      "value": "500",
      "comment": "Font weight for medium weight",
      "name": "fontWeightMedium"
    },
    {
      "category": "font-weight",
      "type": "font-weight",
      "value": "600",
      "comment": "Font weight for semibold weight",
      "name": "fontWeightSemibold"
    },
    {
      "category": "font-weight",
      "type": "font-weight",
      "value": "700",
      "comment": "Font weight for bold weight",
      "name": "fontWeightBold"
    },
    {
      "category": "font-weight",
      "type": "font-weight",
      "value": "800",
      "comment": "Font weight for extrabold weight",
      "name": "fontWeightExtrabold"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "0",
      "comment": "Constant line-height token for line-height 0",
      "name": "lineHeight0"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "64",
      "comment": "Constant line-height token for line-height 110",
      "name": "lineHeight110"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "40",
      "comment": "Constant line-height token for line-height 90",
      "name": "lineHeight90"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "52",
      "comment": "Constant line-height token for line-height 100",
      "name": "lineHeight100"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "40",
      "comment": "Constant line-height token for line-height 80",
      "name": "lineHeight80"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "32",
      "comment": "Constant line-height token for line-height 70",
      "name": "lineHeight70"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "28",
      "comment": "Constant line-height token for line-height 60",
      "name": "lineHeight60"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "28",
      "comment": "Constant line-height token for line-height 50",
      "name": "lineHeight50"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "24",
      "comment": "Constant line-height token for line-height 40",
      "name": "lineHeight40"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "20",
      "comment": "Constant line-height token for line-height 30",
      "name": "lineHeight30"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "20",
      "comment": "Constant line-height token for line-height 20",
      "name": "lineHeight20"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "16",
      "comment": "Constant line-height token for line-height 10",
      "name": "lineHeight10"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "12",
      "comment": "Constant line-height token for line-height 05",
      "name": "lineHeight05"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "80",
      "comment": "Constant line-height token for line-height-display 30",
      "name": "lineHeightDisplay30"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "60",
      "comment": "Constant line-height token for line-height-display 20",
      "name": "lineHeightDisplay20"
    },
    {
      "category": "line-height",
      "type": "number",
      "value": "40",
      "comment": "Constant line-height token for line-height-display 10",
      "name": "lineHeightDisplay10"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(242, 47, 70)",
      "comment": "Twilio brand red",
      "name": "colorBrandHighlight"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(255, 255, 255)",
      "comment": "Gray Color 0",
      "name": "colorGray0"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(18, 28, 45)",
      "comment": "Gray Color 10",
      "name": "colorGray100"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(31, 48, 76)",
      "comment": "Gray Color 9",
      "name": "colorGray90"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(57, 71, 98)",
      "comment": "Gray Color 8",
      "name": "colorGray80"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(75, 86, 113)",
      "comment": "Gray Color 7",
      "name": "colorGray70"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(96, 107, 133)",
      "comment": "Gray Color 6",
      "name": "colorGray60"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(136, 145, 170)",
      "comment": "Gray Color 5",
      "name": "colorGray50"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(139, 147, 170)",
      "comment": "Gray Color 4",
      "name": "colorGray40"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(0, 20, 137)",
      "comment": "Default branding color",
      "name": "colorBrand"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(202, 205, 216)",
      "comment": "Gray Color 3",
      "name": "colorGray30"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(225, 227, 234)",
      "comment": "Gray Color 2",
      "name": "colorGray20"
    },
    {
      "type": "color",
      "category": "color",
      "value": "rgb(244, 244, 246)",
      "comment": "Gray Color 1",
      "name": "colorGray10"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "12",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare40"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "40",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon80"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "0",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase0"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "8",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare30"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "32",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon70"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "4",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare20"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "28",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon60"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "920",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size90"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "2",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare10"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "1232",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size120"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "28",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon50"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "816",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size80"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "0",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size0"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "1128",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size110"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "24",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon40"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "72",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare190"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "712",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size70"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "1024",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size100"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "20",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon30"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "68",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare180"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "608",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size60"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "20",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon20"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "64",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare170"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "76",
      "comment": "Sizing token for the compact sidebar width.",
      "name": "sizeSidebarCompact"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "36",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase90"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "16",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon10"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "6",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare25"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "60",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare160"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "504",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size50"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "32",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase80"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "64",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon110"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "56",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare150"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "400",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size40"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "28",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase70"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "52",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon100"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "52",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare140"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "296",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size30"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "24",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase60"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "76",
      "comment": "Sizing token for the minimum topbar height.",
      "name": "sizeTopbar"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "48",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare130"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "192",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size20"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "20",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase50"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "44",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare120"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "88",
      "comment": "Generic sizing token for layouts and containers.",
      "name": "size10"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "16",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase40"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "40",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare110"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "0",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare0"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "12",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase30"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "12",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon05"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "36",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare100"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "8",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase20"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "76",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare200"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "4",
      "comment": "Generic sizing token for UI components",
      "name": "sizeBase10"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "240",
      "comment": "Sizing token for sidebar width.",
      "name": "sizeSidebar"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "32",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare90"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "28",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare80"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "24",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare70"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "20",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare60"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "16",
      "comment": "Generic square sizing token scale for UI components.",
      "name": "sizeSquare50"
    },
    {
      "type": "size",
      "category": "sizing",
      "value": "40",
      "comment": "Maps to line-height tokens 1:1",
      "name": "sizeIcon90"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "24",
      "name": "space70"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-36",
      "name": "spaceNegative100"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "20",
      "name": "space60"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-76",
      "name": "spaceNegative200"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "72",
      "name": "space190"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "16",
      "name": "space50"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "112",
      "name": "space290"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "68",
      "name": "space180"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "12",
      "name": "space40"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "108",
      "name": "space280"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "64",
      "name": "space170"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "8",
      "name": "space30"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "104",
      "name": "space270"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "60",
      "name": "space160"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "4",
      "name": "space20"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "100",
      "name": "space260"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "56",
      "name": "space150"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "2",
      "name": "space10"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "96",
      "name": "space250"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "52",
      "name": "space140"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "92",
      "name": "space240"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "48",
      "name": "space130"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "88",
      "name": "space230"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "44",
      "name": "space120"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-32",
      "name": "spaceNegative90"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "84",
      "name": "space220"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "40",
      "name": "space110"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "0",
      "name": "space0"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-28",
      "name": "spaceNegative80"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "80",
      "name": "space210"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "36",
      "name": "space100"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-24",
      "name": "spaceNegative70"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "120",
      "name": "space310"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "76",
      "name": "space200"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-20",
      "name": "spaceNegative60"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "116",
      "name": "space300"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-16",
      "name": "spaceNegative50"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-12",
      "name": "spaceNegative40"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-8",
      "name": "spaceNegative30"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-4",
      "name": "spaceNegative20"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-2",
      "name": "spaceNegative10"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-72",
      "name": "spaceNegative190"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-68",
      "name": "spaceNegative180"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-64",
      "name": "spaceNegative170"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-60",
      "name": "spaceNegative160"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-56",
      "name": "spaceNegative150"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-52",
      "name": "spaceNegative140"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-48",
      "name": "spaceNegative130"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "32",
      "name": "space90"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-44",
      "name": "spaceNegative120"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "28",
      "name": "space80"
    },
    {
      "category": "spacing",
      "type": "size",
      "value": "-40",
      "name": "spaceNegative110"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(246, 177, 177)",
      "comment": "Weak shade of destructive link text to be used in interactions",
      "name": "colorTextLinkDestructiveWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(3, 11, 93)",
      "comment": "Stronger shade of link text to be used in interactions",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkStronger"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(18, 28, 45)",
      "comment": "Text color for user avatar.",
      "name": "colorTextUser"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(109, 46, 209)",
      "comment": "Icon color for indicating a new status.",
      "name": "colorTextIconNew"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(84, 51, 8)",
      "comment": "Text color for the subaccount badge",
      "name": "colorTextSubaccount"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger shade of destructive text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextDestructiveStronger"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(96, 107, 133)",
      "comment": "Icon color for indicating a offline status",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconOffline"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Destructive link text",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-warning-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkDestructive"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(3, 11, 93)",
      "comment": "Stronger primary text.",
      "name": "colorTextPrimaryStronger"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(14, 124, 58)",
      "comment": "Icon color for indicating success.",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-success-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconSuccess"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(141, 49, 24)",
      "comment": "Color for warning text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextWarning"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest shade of destructive link text to be used in interactions",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkDestructiveStrongest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Icon color for being neutral.",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconNeutral"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(236, 91, 91)",
      "comment": "Icon color for notification elements.",
      "name": "colorTextIconNotification"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(109, 46, 209)",
      "comment": "Color for text indicating a new status.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextNew"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Icon color for indicating an error.",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-error-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconError"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(202, 205, 216)",
      "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
      "text_contrast_pairing": [
        "color-background-body-inverse",
        "color-background-brand"
      ],
      "name": "colorTextInverseWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(14, 124, 58)",
      "comment": "Icon color for indicating a available status",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconAvailable"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger shade of destructive link text to be used in interactions",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkDestructiveStronger"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Twilio brand icon color used for the Twilio logo on inverse backgrounds.",
      "text_contrast_pairing": [
        "color-background-body-inverse"
      ],
      "name": "colorTextIconBrandInverse"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Destructive text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-warning-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextDestructive"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(2, 99, 224)",
      "comment": "Primary text.",
      "name": "colorTextPrimary"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(14, 124, 58)",
      "comment": "Text color for success text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-success-weakest",
        "color-background-row-striped"
      ],
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-success-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextSuccess"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(200, 175, 240)",
      "comment": "Inverse color for indicating a new status.",
      "text_contrast_pairing": [
        "color-background-inverse-strong"
      ],
      "name": "colorTextInverseNew"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest shade of destructive text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextDestructiveStrongest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(96, 107, 133)",
      "comment": "Weak body text for visual hierarchy.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(6, 3, 58)",
      "comment": "Strongest primary text.",
      "name": "colorTextPrimaryStrongest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(96, 107, 133)",
      "comment": "Default icon color.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-strong",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextIcon"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(2, 99, 224)",
      "comment": "Link text",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-strong",
        "color-background-body",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLink"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(242, 47, 70)",
      "comment": "Twilio brand red icon color used for the Twilio logo.",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body"
      ],
      "name": "colorTextIconBrandHighlight"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Color for text indicating a neutral status.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextNeutral"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(18, 28, 45)",
      "comment": "Text color to be used on top of brand accent background colors such as color-background-brand-10 only.",
      "text_contrast_pairing": [
        "color-background-brand-10",
        "color-background-brand-20",
        "color-background-brand-30"
      ],
      "name": "colorTextBrand"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(6, 3, 58)",
      "comment": "Strongest shade of link text to be used in interactions",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkStrongest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Error text for inputs and error misc",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-neutral-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextError"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(136, 145, 170)",
      "comment": "Default icon color for inverse backgrounds.",
      "text_contrast_pairing": [
        "color-background-body-inverse"
      ],
      "name": "colorTextIconInverse"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(173, 17, 17)",
      "comment": "Strong error text for inputs and error misc",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextErrorStrong"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(219, 19, 42)",
      "comment": "Icon color for indicating a unavailable status",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconUnavailable"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(236, 91, 91)",
      "comment": "Weak error text for inputs and error misc",
      "name": "colorTextErrorWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(109, 46, 209)",
      "comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-decorative-40-weakest"
      ],
      "name": "colorTextDecorative40"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Strong shade of link text to be used in interactions",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkStrong"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Text color used on any brand color",
      "text_contrast_pairing": [
        "color-background-body-inverse",
        "color-background-brand"
      ],
      "name": "colorTextBrandInverse"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(49, 12, 12)",
      "comment": "Strongest error text for inputs and error misc.",
      "name": "colorTextErrorStrongest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(14, 124, 58)",
      "comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-decorative-30-weakest"
      ],
      "name": "colorTextDecorative30"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(153, 205, 255)",
      "comment": "Weak shade of link text to be used in interactions",
      "name": "colorTextLinkWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-decorative-20-weakest"
      ],
      "name": "colorTextDecorative20"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(96, 107, 133)",
      "comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-decorative-10-weakest"
      ],
      "name": "colorTextDecorative10"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(18, 28, 45)",
      "comment": "Body text color",
      "text_contrast_pairing": [
        "color-background",
        "color-background-strong",
        "color-background-stronger",
        "color-background-body",
        "color-background-user",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-new",
        "color-background-row-striped",
        "color-background-primary-weak",
        "color-background-primary-weaker",
        "color-background-primary-weakest",
        "color-background-destructive-weak",
        "color-background-destructive-weaker",
        "color-background-destructive-weakest"
      ],
      "name": "colorText"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(227, 106, 25)",
      "comment": "Icon color for indicating a busy status",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconBusy"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.",
      "text_contrast_pairing": [
        "color-background-primary-strong",
        "color-background-primary-stronger",
        "color-background-primary-strongest",
        "color-background-destructive-strong",
        "color-background-destructive-stronger",
        "color-background-destructive-strongest"
      ],
      "name": "colorTextWeakest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(242, 47, 70)",
      "comment": "Twilio brand red, accessible on large text only.",
      "uicontrol_contrast_pairing": [
        "color-background-body"
      ],
      "name": "colorTextBrandHighlight"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(173, 17, 17)",
      "comment": "Strong shade of destructive text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextDestructiveStrong"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(136, 145, 170)",
      "comment": "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
      "name": "colorTextInverseWeaker"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(0, 20, 137)",
      "comment": "Strong primary text.",
      "name": "colorTextPrimaryStrong"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(153, 205, 255)",
      "comment": "Weak primary text.",
      "name": "colorTextPrimaryWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(246, 177, 177)",
      "comment": "Weak shade of destructive text.",
      "name": "colorTextDestructiveWeak"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(255, 255, 255)",
      "comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
      "text_contrast_pairing": [
        "color-background-body-inverse",
        "color-background-brand",
        "color-background-error",
        "color-background-primary",
        "color-background-destructive"
      ],
      "name": "colorTextInverse"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(75, 86, 113)",
      "comment": "Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
      "name": "colorTextInverseWeakest"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(139, 147, 170)",
      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
      "name": "colorTextWeaker"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(141, 49, 24)",
      "comment": "Color for dark warning text.",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-row-striped",
        "color-background-warning-weakest"
      ],
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-row-striped",
        "color-background-warning-weakest"
      ],
      "name": "colorTextWarningStrong"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(227, 106, 25)",
      "comment": "Icon color for indicating a warning.",
      "uicontrol_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-warning-weakest",
        "color-background-row-striped"
      ],
      "name": "colorTextIconWarning"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(74, 11, 11)",
      "comment": "Stronger error text for inputs and error misc",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextErrorStronger"
    },
    {
      "type": "color",
      "category": "text-color",
      "value": "rgb(173, 17, 17)",
      "comment": "Strong shade of destructive link text to be used in interactions",
      "text_contrast_pairing": [
        "color-background",
        "color-background-body",
        "color-background-subaccount",
        "color-background-trial",
        "color-background-neutral-weakest",
        "color-background-success-weakest",
        "color-background-warning-weakest",
        "color-background-error-weakest",
        "color-background-row-striped",
        "color-background-primary-weakest",
        "color-background-destructive-weakest"
      ],
      "name": "colorTextLinkDestructiveStrong"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "0",
      "name": "zIndex0"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "90",
      "name": "zIndex90"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "80",
      "name": "zIndex80"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "70",
      "name": "zIndex70"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "60",
      "name": "zIndex60"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "50",
      "name": "zIndex50"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "40",
      "name": "zIndex40"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "30",
      "name": "zIndex30"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "20",
      "name": "zIndex20"
    },
    {
      "type": "z-index",
      "category": "z-index",
      "value": "10",
      "name": "zIndex10"
    },
    {
      "type": "string",
      "category": "color-scheme",
      "value": "light",
      "name": "colorScheme"
    }
  ]
}