@twilio-paste/design-tokens/dist/themes/evergreen/tokens.ios.json

Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.

{
  "properties": [
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(231, 228, 249)",
      "comment": "User avatar background color.",
      "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(220, 242, 234)",
      "comment": "Trial account background color.",
      "name": "colorBackgroundTrial"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(255, 239, 210)",
      "comment": "Subaccount background color.",
      "name": "colorBackgroundSubaccount"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(31, 61, 153)",
      "comment": "Stronger background for primary actions or highlights.",
      "name": "colorBackgroundPrimaryStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(125, 40, 40)",
      "comment": "Stronger background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(235, 240, 255)",
      "comment": "Weaker background for primary actions or highlights.",
      "name": "colorBackgroundPrimaryWeaker"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(249, 218, 218)",
      "comment": "Weaker background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveWeaker"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(103, 114, 142)",
      "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(222, 117, 72)",
      "comment": "Warning background color",
      "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(253, 247, 244)",
      "comment": "Weakest warning background color.",
      "name": "colorBackgroundWarningWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(64, 79, 110)",
      "comment": "Strong inverse background color for any container. Must be used on color-background-body-inverse.",
      "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(231, 228, 249)",
      "comment": "Background color for indicating a new status.",
      "name": "colorBackgroundNew"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(24, 37, 60)",
      "comment": "Elevation token for color-background-inverse elements.",
      "name": "colorBackgroundInverseElevation"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(230, 232, 240)",
      "comment": "Strong default background color.",
      "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(209, 67, 67)",
      "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(51, 102, 255)",
      "comment": "Background for primary actions or highlights.",
      "name": "colorBackgroundPrimary"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(243, 246, 255)",
      "comment": "Weakest background for primary actions or highlights.",
      "name": "colorBackgroundPrimaryWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(222, 117, 72)",
      "comment": "Background color used to represent an entity or person as \"busy\".",
      "name": "colorBackgroundBusy"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(82, 189, 148)",
      "comment": "Success background color.",
      "name": "colorBackgroundSuccess"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(253, 244, 244)",
      "comment": "Weakest background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(193, 196, 214)",
      "comment": "Color used to represent an entity or person as \"offline\".",
      "name": "colorBackgroundOffline"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(250, 251, 255)",
      "comment": "Background color for alternative striped rows.",
      "name": "colorBackgroundRowStriped"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(12, 30, 86)",
      "comment": "Strongest background for primary actions or highlights.",
      "name": "colorBackgroundPrimaryStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(238, 248, 244)",
      "comment": "Weakest success background color.",
      "name": "colorBackgroundSuccessWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(79, 21, 21)",
      "comment": "Strongest background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(167, 54, 54)",
      "comment": "Strong error background color.",
      "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(71, 77, 102)",
      "comment": "Primary brand background, accessible with inverse text.",
      "name": "colorBackgroundBrand"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(209, 67, 67)",
      "comment": "Error background color.",
      "name": "colorBackgroundError"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 246, 250)",
      "comment": "Weakest neutral background color.",
      "name": "colorBackgroundNeutralWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(82, 189, 148)",
      "comment": "Background color used to represent an entity or person as \"available\".",
      "name": "colorBackgroundAvailable"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(253, 244, 244)",
      "comment": "Weakest error background color.",
      "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(248, 247, 253)",
      "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(96, 107, 133)",
      "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(238, 248, 244)",
      "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(41, 82, 204)",
      "comment": "Strong background for primary actions or highlights.",
      "name": "colorBackgroundPrimaryStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(243, 246, 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(167, 54, 54)",
      "comment": "Strong background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveStrong"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 182, 182)",
      "comment": "Weak background color used for destructive actions or highlights.",
      "name": "colorBackgroundDestructiveWeak"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(244, 246, 250)",
      "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, 246, 250)",
      "comment": "Default background color for any container.",
      "name": "colorBackground"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(214, 224, 255)",
      "comment": "Weak background 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(202, 205, 216)",
      "comment": "Stronger default background color.",
      "name": "colorBackgroundStronger"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(75, 86, 113)",
      "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(82, 189, 148)",
      "comment": "Highlight brand background, accessible with black text.",
      "name": "colorBackgroundBrandHighlight"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(220, 242, 234)",
      "comment": "Weakest background color used for brand highlights.",
      "name": "colorBackgroundBrandHighlightWeakest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(105, 111, 140)",
      "comment": "Strongest default background color.",
      "name": "colorBackgroundStrongest"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(24, 37, 60)",
      "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(18, 28, 45)",
      "comment": "Inverse background color for any container. Must be used on color-background-body-inverse.",
      "name": "colorBackgroundInverse"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgba(71, 77, 102, 0.64)",
      "comment": "Default background for overlays.",
      "name": "colorBackgroundOverlay"
    },
    {
      "type": "color",
      "category": "background-color",
      "value": "rgb(209, 67, 67)",
      "comment": "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(125, 40, 40)",
      "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(125, 40, 40)",
      "comment": "Stronger error border color",
      "name": "colorBorderErrorStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(235, 172, 145)",
      "comment": "Weak warning border color",
      "name": "colorBorderWarningWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(231, 228, 249)",
      "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(244, 182, 182)",
      "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(214, 224, 255)",
      "comment": "Weaker neutral border color",
      "name": "colorBorderNeutralWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(222, 117, 72)",
      "comment": "Warning border color",
      "name": "colorBorderWarning"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(220, 242, 234)",
      "comment": "Weaker success border color",
      "name": "colorBorderSuccessWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(31, 61, 153)",
      "comment": "Stronger primary border color",
      "name": "colorBorderPrimaryStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(125, 40, 40)",
      "comment": "Stronger destructive hover border color",
      "name": "colorBorderDestructiveStronger"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(248, 227, 218)",
      "comment": "Weakest warning border color",
      "name": "colorBorderWarningWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(214, 224, 255)",
      "comment": "Weaker primary border color",
      "name": "colorBorderPrimaryWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(249, 218, 218)",
      "comment": "Destructive focus border color",
      "name": "colorBorderDestructiveWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(231, 228, 249)",
      "comment": "Weaker border color for something designated as new",
      "name": "colorBorderNewWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(209, 67, 67)",
      "comment": "Destructive border color",
      "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(51, 102, 255)",
      "comment": "Primary border color",
      "name": "colorBorderPrimary"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(235, 240, 255)",
      "comment": "Weakest primary border color",
      "name": "colorBorderPrimaryWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(82, 189, 148)",
      "comment": "Success border color",
      "name": "colorBorderSuccess"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(253, 244, 244)",
      "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(12, 30, 86)",
      "comment": "Strongest primary border color",
      "name": "colorBorderPrimaryStrongest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(238, 248, 244)",
      "comment": "Weakest success border color",
      "name": "colorBorderSuccessWeakest"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(242, 200, 182)",
      "comment": "Weaker warning border color",
      "name": "colorBorderWarningWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(143, 149, 178)",
      "comment": "Strong border color",
      "name": "colorBorderStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(230, 232, 240)",
      "comment": "Weak border color",
      "name": "colorBorderWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(51, 102, 255)",
      "comment": "Neutral border color",
      "name": "colorBorderNeutral"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(209, 67, 67)",
      "comment": "Error border color",
      "name": "colorBorderError"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(249, 218, 218)",
      "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(167, 54, 54)",
      "comment": "Strong error border color",
      "name": "colorBorderErrorStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(238, 145, 145)",
      "comment": "Weak error border color",
      "name": "colorBorderErrorWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(157, 181, 255)",
      "comment": "Weak neutral border color",
      "name": "colorBorderNeutralWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(216, 218, 229)",
      "comment": "Default border color",
      "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(163, 230, 205)",
      "comment": "Weak success border color",
      "name": "colorBorderSuccessWeak"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(41, 82, 204)",
      "comment": "Strong primary border color",
      "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(167, 54, 54)",
      "comment": "Destructive focus border color",
      "name": "colorBorderDestructiveStrong"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(157, 181, 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(244, 182, 182)",
      "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(237, 239, 245)",
      "comment": "Weaker border color",
      "name": "colorBorderWeaker"
    },
    {
      "type": "color",
      "category": "border-color",
      "value": "rgb(216, 218, 229)",
      "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(214, 224, 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(238, 248, 244)",
      "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 #D0CAF4",
      "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 #7D2828",
      "comment": "Stronger 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 #1F3D99",
      "comment": "Stronger shadow border for inputs active.",
      "name": "shadowBorderPrimaryStronger"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #F2C8B6",
      "comment": "Weaker bottom shadow border warning warning status",
      "name": "shadowBorderBottomWarningWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #F9DADA",
      "comment": "Weaker shadow border for destructive interactions.",
      "name": "shadowBorderDestructiveWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #D6E0FF",
      "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 #8F95B2",
      "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 #E6E8F0",
      "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 #3366FF",
      "comment": "Default shadow border for primary interactions.",
      "name": "shadowBorderPrimary"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #D14343",
      "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 #A73636",
      "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 #0C1E56",
      "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 #F4B6B6",
      "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 #D14343",
      "comment": "Shadow border for error inputs.",
      "name": "shadowBorderError"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #D8DAE5",
      "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 #D6E0FF",
      "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 #A73636",
      "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 #3366FF",
      "comment": "Top shadow border for selected status of horizontal tabs",
      "name": "shadowBorderTopPrimary"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 1px 0 #DCF2EA",
      "comment": "Weaker bottom shadow border for decorative 30",
      "name": "shadowBorderBottomDecorative30Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #2952CC",
      "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 #9DB5FF",
      "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 #D0CAF4",
      "comment": "Weaker bottom shadow border for decorative 40",
      "name": "shadowBorderBottomDecorative40Weaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #F4B6B6",
      "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 #F4B6B6",
      "comment": "Weaker bottom shadow border for error status",
      "name": "shadowBorderBottomErrorWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #EDEFF5",
      "comment": "Weaker shadow border for disabled inputs.",
      "name": "shadowBorderWeaker"
    },
    {
      "type": "shadow",
      "category": "box-shadow",
      "value": "0 0 0 1px #D8DAE5",
      "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 #9DB5FF",
      "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 #DCF2EA",
      "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 #7D2828",
      "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