@twilio-paste/design-tokens/dist/themes/evergreen/tokens.generic.d.ts

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

declare const Tokens: {
"tokens":{"background-colors": [
    {
   type: "color";
   category: "background-color";
   value: "rgb(244, 246, 250)";
   comment: "Default background color for any container.";
   name: "color-background";
   altValue: "#F4F6FA";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(82, 189, 148)";
   comment: "Background color used to represent an entity or person as \"available\".";
   name: "color-background-available";
   altValue: "#52BD94";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(255, 255, 255)";
   comment: "Background color used for the main page body.";
   name: "color-background-body";
   altValue: "#FFFFFF";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(16, 24, 64)";
   comment: "Inverse background color used for the main page body.";
   name: "color-background-body-inverse";
   altValue: "#101840";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(71, 77, 102)";
   comment: "Primary brand background, accessible with inverse text.";
   name: "color-background-brand";
   altValue: "#474D66";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(82, 189, 148)";
   comment: "Highlight brand background, accessible with black text.";
   name: "color-background-brand-highlight";
   altValue: "#52BD94";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(220, 242, 234)";
   comment: "Weakest background color used for brand highlights.";
   name: "color-background-brand-highlight-weakest";
   altValue: "#DCF2EA";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(3, 11, 93)";
   comment: "Strong primary brand background, accessible with inverse text.";
   name: "color-background-brand-strong";
   altValue: "#030B5D";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(6, 3, 58)";
   comment: "Stronger primary brand background, accessible with inverse text.";
   name: "color-background-brand-stronger";
   altValue: "#06033A";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(222, 117, 72)";
   comment: "Background color used to represent an entity or person as \"busy\".";
   name: "color-background-busy";
   altValue: "#DE7548";
},
{
   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: "color-background-decorative-10-weakest";
   altValue: "#F4F6FA";
},
{
   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: "color-background-decorative-20-weakest";
   altValue: "#F3F6FF";
},
{
   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: "color-background-decorative-30-weakest";
   altValue: "#EEF8F4";
},
{
   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: "color-background-decorative-40-weakest";
   altValue: "#F8F7FD";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(209, 67, 67)";
   comment: "Background color used for destructive actions or highlights.";
   name: "color-background-destructive";
   altValue: "#D14343";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(167, 54, 54)";
   comment: "Strong background color used for destructive actions or highlights.";
   name: "color-background-destructive-strong";
   altValue: "#A73636";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(125, 40, 40)";
   comment: "Stronger background color used for destructive actions or highlights.";
   name: "color-background-destructive-stronger";
   altValue: "#7D2828";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(79, 21, 21)";
   comment: "Strongest background color used for destructive actions or highlights.";
   name: "color-background-destructive-strongest";
   altValue: "#4F1515";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(244, 182, 182)";
   comment: "Weak background color used for destructive actions or highlights.";
   name: "color-background-destructive-weak";
   altValue: "#F4B6B6";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(249, 218, 218)";
   comment: "Weaker background color used for destructive actions or highlights.";
   name: "color-background-destructive-weaker";
   altValue: "#F9DADA";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(253, 244, 244)";
   comment: "Weakest background color used for destructive actions or highlights.";
   name: "color-background-destructive-weakest";
   altValue: "#FDF4F4";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(209, 67, 67)";
   comment: "Error background color.";
   name: "color-background-error";
   altValue: "#D14343";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(167, 54, 54)";
   comment: "Strong error background color.";
   name: "color-background-error-strong";
   altValue: "#A73636";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(125, 40, 40)";
   comment: "Stronger error background color.";
   name: "color-background-error-stronger";
   altValue: "#7D2828";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(49, 12, 12)";
   comment: "Strongest error background color.";
   name: "color-background-error-strongest";
   altValue: "#310C0C";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(253, 244, 244)";
   comment: "Weakest error background color.";
   name: "color-background-error-weakest";
   altValue: "#FDF4F4";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(16, 24, 64)";
   comment: "Inverse background color for any container. Must be used on color-background-body-inverse.";
   name: "color-background-inverse";
   altValue: "#101840";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(71, 77, 102)";
   comment: "Strong inverse background color for any container. Must be used on color-background-body-inverse.";
   name: "color-background-inverse-strong";
   altValue: "#474D66";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(105, 111, 140)";
   comment: "Stronger inverse background color for any container. Must be used on color-background-body-inverse.";
   name: "color-background-inverse-stronger";
   altValue: "#696F8C";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(244, 246, 250)";
   comment: "Weakest neutral background color.";
   name: "color-background-neutral-weakest";
   altValue: "#F4F6FA";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(231, 228, 249)";
   comment: "Background color for indicating a new status.";
   name: "color-background-new";
   altValue: "#E7E4F9";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(250, 247, 253)";
   comment: "Weakest background color for indicating a new status.";
   name: "color-background-new-weakest";
   altValue: "#FAF7FD";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(193, 196, 214)";
   comment: "Color used to represent an entity or person as \"offline\".";
   name: "color-background-offline";
   altValue: "#C1C4D6";
},
{
   type: "color";
   category: "background-color";
   value: "rgba(71, 77, 102, 0.64)";
   comment: "Default background for overlays.";
   name: "color-background-overlay";
   altValue: "#474D66A3";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(51, 102, 255)";
   comment: "Background for primary actions or highlights.";
   name: "color-background-primary";
   altValue: "#3366FF";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(41, 82, 204)";
   comment: "Strong background for primary actions or highlights.";
   name: "color-background-primary-strong";
   altValue: "#2952CC";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(31, 61, 153)";
   comment: "Stronger background for primary actions or highlights.";
   name: "color-background-primary-stronger";
   altValue: "#1F3D99";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(12, 30, 86)";
   comment: "Strongest background for primary actions or highlights.";
   name: "color-background-primary-strongest";
   altValue: "#0C1E56";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(214, 224, 255)";
   comment: "Weak background for primary actions or highlights.";
   name: "color-background-primary-weak";
   altValue: "#D6E0FF";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(235, 240, 255)";
   comment: "Weaker background for primary actions or highlights.";
   name: "color-background-primary-weaker";
   altValue: "#EBF0FF";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(243, 246, 255)";
   comment: "Weakest background for primary actions or highlights.";
   name: "color-background-primary-weakest";
   altValue: "#F3F6FF";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(235, 86, 86)";
   comment: "Background color used to represent required form fields.";
   name: "color-background-required";
   altValue: "#EB5656";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(250, 251, 255)";
   comment: "Background color for alternative striped rows.";
   name: "color-background-row-striped";
   altValue: "#FAFBFF";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(230, 232, 240)";
   comment: "Strong default background color.";
   name: "color-background-strong";
   altValue: "#E6E8F0";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(193, 196, 214)";
   comment: "Stronger default background color.";
   name: "color-background-stronger";
   altValue: "#C1C4D6";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(105, 111, 140)";
   comment: "Strongest default background color.";
   name: "color-background-strongest";
   altValue: "#696F8C";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(255, 239, 210)";
   comment: "Subaccount background color.";
   name: "color-background-subaccount";
   altValue: "#FFEFD2";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(82, 189, 148)";
   comment: "Success background color.";
   name: "color-background-success";
   altValue: "#52BD94";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(238, 248, 244)";
   comment: "Weakest success background color.";
   name: "color-background-success-weakest";
   altValue: "#EEF8F4";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(220, 242, 234)";
   comment: "Trial account background color.";
   name: "color-background-trial";
   altValue: "#DCF2EA";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(209, 67, 67)";
   comment: "Color used to represent an entity or person as \"unavailable\".";
   name: "color-background-unavailable";
   altValue: "#D14343";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(231, 228, 249)";
   comment: "User avatar background color.";
   name: "color-background-user";
   altValue: "#E7E4F9";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(222, 117, 72)";
   comment: "Warning background color";
   name: "color-background-warning";
   altValue: "#DE7548";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(253, 247, 244)";
   comment: "Weakest warning background color.";
   name: "color-background-warning-weakest";
   altValue: "#FDF7F4";
},
{
   type: "color";
   category: "background-color";
   value: "rgb(249, 250, 252)";
   comment: "Weak default background color.";
   name: "color-background-weak";
   altValue: "#F9FAFC";
}
]
"border-colors": [
    {
   type: "color";
   category: "border-color";
   value: "rgb(216, 218, 229)";
   comment: "Default border color";
   name: "color-border";
   altValue: "#D8DAE5";
},
{
   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: "color-border-decorative-10-weaker";
   altValue: "#D8DAE5";
},
{
   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: "color-border-decorative-20-weaker";
   altValue: "#D6E0FF";
},
{
   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: "color-border-decorative-30-weaker";
   altValue: "#EEF8F4";
},
{
   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: "color-border-decorative-40-weaker";
   altValue: "#E7E4F9";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(209, 67, 67)";
   comment: "Destructive border color";
   name: "color-border-destructive";
   altValue: "#D14343";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(167, 54, 54)";
   comment: "Destructive focus border color";
   name: "color-border-destructive-strong";
   altValue: "#A73636";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(125, 40, 40)";
   comment: "Stronger destructive hover border color";
   name: "color-border-destructive-stronger";
   altValue: "#7D2828";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(49, 12, 12)";
   comment: "Strongest destructive hover border color";
   name: "color-border-destructive-strongest";
   altValue: "#310C0C";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(244, 182, 182)";
   comment: "Destructive focus border color";
   name: "color-border-destructive-weak";
   altValue: "#F4B6B6";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(249, 218, 218)";
   comment: "Destructive focus border color";
   name: "color-border-destructive-weaker";
   altValue: "#F9DADA";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(253, 244, 244)";
   comment: "Destructive focus border color";
   name: "color-border-destructive-weakest";
   altValue: "#FDF4F4";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(209, 67, 67)";
   comment: "Error border color";
   name: "color-border-error";
   altValue: "#D14343";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(167, 54, 54)";
   comment: "Strong error border color";
   name: "color-border-error-strong";
   altValue: "#A73636";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(125, 40, 40)";
   comment: "Stronger error border color";
   name: "color-border-error-stronger";
   altValue: "#7D2828";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(49, 12, 12)";
   comment: "Strongest error border color";
   name: "color-border-error-strongest";
   altValue: "#310C0C";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(238, 145, 145)";
   comment: "Weak error border color";
   name: "color-border-error-weak";
   altValue: "#EE9191";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(244, 182, 182)";
   comment: "Weaker error border color";
   name: "color-border-error-weaker";
   altValue: "#F4B6B6";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(249, 218, 218)";
   comment: "Weakest error border color";
   name: "color-border-error-weakest";
   altValue: "#F9DADA";
},
{
   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: "color-border-inverse";
   altValue: "#8891AA";
},
{
   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: "color-border-inverse-strong";
   altValue: "#E1E3EA";
},
{
   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: "color-border-inverse-stronger";
   altValue: "#F4F4F6";
},
{
   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: "color-border-inverse-strongest";
   altValue: "#FFFFFF";
},
{
   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: "color-border-inverse-weaker";
   altValue: "#394762";
},
{
   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: "color-border-inverse-weakest";
   altValue: "#1F304C";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(51, 102, 255)";
   comment: "Neutral border color";
   name: "color-border-neutral";
   altValue: "#3366FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(157, 181, 255)";
   comment: "Weak neutral border color";
   name: "color-border-neutral-weak";
   altValue: "#9DB5FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(214, 224, 255)";
   comment: "Weaker neutral border color";
   name: "color-border-neutral-weaker";
   altValue: "#D6E0FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(231, 228, 249)";
   comment: "Weaker border color for something designated as new";
   name: "color-border-new-weaker";
   altValue: "#E7E4F9";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(51, 102, 255)";
   comment: "Primary border color";
   name: "color-border-primary";
   altValue: "#3366FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(41, 82, 204)";
   comment: "Strong primary border color";
   name: "color-border-primary-strong";
   altValue: "#2952CC";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(31, 61, 153)";
   comment: "Stronger primary border color";
   name: "color-border-primary-stronger";
   altValue: "#1F3D99";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(12, 30, 86)";
   comment: "Strongest primary border color";
   name: "color-border-primary-strongest";
   altValue: "#0C1E56";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(157, 181, 255)";
   comment: "Weak primary border color";
   name: "color-border-primary-weak";
   altValue: "#9DB5FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(214, 224, 255)";
   comment: "Weaker primary border color";
   name: "color-border-primary-weaker";
   altValue: "#D6E0FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(235, 240, 255)";
   comment: "Weakest primary border color";
   name: "color-border-primary-weakest";
   altValue: "#EBF0FF";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(143, 149, 178)";
   comment: "Strong border color";
   name: "color-border-strong";
   altValue: "#8F95B2";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(82, 189, 148)";
   comment: "Success border color";
   name: "color-border-success";
   altValue: "#52BD94";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(163, 230, 205)";
   comment: "Weak success border color";
   name: "color-border-success-weak";
   altValue: "#A3E6CD";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(220, 242, 234)";
   comment: "Weaker success border color";
   name: "color-border-success-weaker";
   altValue: "#DCF2EA";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(238, 248, 244)";
   comment: "Weakest success border color";
   name: "color-border-success-weakest";
   altValue: "#EEF8F4";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(231, 220, 250)";
   comment: "User avatar border color.";
   name: "color-border-user";
   altValue: "#E7DCFA";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(222, 117, 72)";
   comment: "Warning border color";
   name: "color-border-warning";
   altValue: "#DE7548";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(235, 172, 145)";
   comment: "Weak warning border color";
   name: "color-border-warning-weak";
   altValue: "#EBAC91";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(242, 200, 182)";
   comment: "Weaker warning border color";
   name: "color-border-warning-weaker";
   altValue: "#F2C8B6";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(248, 227, 218)";
   comment: "Weakest warning border color";
   name: "color-border-warning-weakest";
   altValue: "#F8E3DA";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(230, 232, 240)";
   comment: "Weak border color";
   name: "color-border-weak";
   altValue: "#E6E8F0";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(237, 239, 245)";
   comment: "Weaker border color";
   name: "color-border-weaker";
   altValue: "#EDEFF5";
},
{
   type: "color";
   category: "border-color";
   value: "rgb(255, 255, 255)";
   comment: "Weakest border color";
   name: "color-border-weakest";
   altValue: "#FFFFFF";
}
]
"border-widths": [
    {
   type: "size";
   category: "border-width";
   value: 0;
   comment: "Border width reset";
   name: "border-width-0";
   altValue: null;
},
{
   type: "size";
   category: "border-width";
   value: "1px";
   comment: "Constant border width token for border width 10";
   name: "border-width-10";
   altValue: null;
},
{
   type: "size";
   category: "border-width";
   value: "2px";
   comment: "Constant border width token for border width 20";
   name: "border-width-20";
   altValue: null;
},
{
   type: "size";
   category: "border-width";
   value: "4px";
   comment: "Constant border width token for border width 30";
   name: "border-width-30";
   altValue: null;
},
{
   type: "size";
   category: "border-width";
   value: "8px";
   comment: "Constant border width token for border width 40";
   name: "border-width-40";
   altValue: null;
}
]
"box-shadows": [
    {
   type: "shadow";
   category: "box-shadow";
   value: "0 4px 16px 0 rgba(0, 0, 0, 0.5)";
   comment: "Default shadow.";
   name: "shadow";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #D8DAE5";
   comment: "Shadow border for inputs.";
   name: "shadow-border";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #D8DAE5";
   comment: "Weaker bottom shadow border for decorative 10";
   name: "shadow-border-bottom-decorative-10-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #D6E0FF";
   comment: "Weaker bottom shadow border for decorative 20";
   name: "shadow-border-bottom-decorative-20-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #DCF2EA";
   comment: "Weaker bottom shadow border for decorative 30";
   name: "shadow-border-bottom-decorative-30-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #D0CAF4";
   comment: "Weaker bottom shadow border for decorative 40";
   name: "shadow-border-bottom-decorative-40-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #F4B6B6";
   comment: "Weaker bottom shadow border for error status";
   name: "shadow-border-bottom-error-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #5817bd";
   comment: "Bottom shadow border for the sidebar beta badge";
   name: "shadow-border-bottom-inverse-new-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #9DB5FF";
   comment: "Weaker bottom shadow border for neutral status";
   name: "shadow-border-bottom-neutral-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #D0CAF4";
   comment: "Weaker bottom shadow border for new status";
   name: "shadow-border-bottom-new-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #006dfa";
   comment: "Bottom shadow border for primary status";
   name: "shadow-border-bottom-primary";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #ffdd35";
   comment: "Bottom shadow border for subaccount badge";
   name: "shadow-border-bottom-subaccount";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #DCF2EA";
   comment: "Weaker bottom shadow border for success status";
   name: "shadow-border-bottom-success-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 1px 0 #F2C8B6";
   comment: "Weaker bottom shadow border warning warning status";
   name: "shadow-border-bottom-warning-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #e1e3ea";
   comment: "Weaker shadow border for decorative 10";
   name: "shadow-border-decorative-10-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #cce4ff";
   comment: "Weaker shadow border for decorative 20";
   name: "shadow-border-decorative-20-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #d1fae0";
   comment: "Weaker shadow border for decorative 30";
   name: "shadow-border-decorative-30-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #e7dcfa";
   comment: "Weaker shadow border for decorative 40";
   name: "shadow-border-decorative-40-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #D14343";
   comment: "Shadow border for destructive interactions.";
   name: "shadow-border-destructive";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #A73636";
   comment: "Strong shadow border for destructive interactions";
   name: "shadow-border-destructive-strong";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #7D2828";
   comment: "Stronger shadow border for destructive interactions";
   name: "shadow-border-destructive-stronger";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #310C0C";
   comment: "Strongest shadow border for destructive interactions";
   name: "shadow-border-destructive-strongest";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #F4B6B6";
   comment: "Weak shadow border for destructive interactions.";
   name: "shadow-border-destructive-weak";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #F9DADA";
   comment: "Weaker shadow border for destructive interactions.";
   name: "shadow-border-destructive-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #D14343";
   comment: "Shadow border for error inputs.";
   name: "shadow-border-error";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #A73636";
   comment: "Shadow border for error inputs hover.";
   name: "shadow-border-error-strong";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #7D2828";
   comment: "Shadow border for error inputs hover.";
   name: "shadow-border-error-stronger";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #310c0c";
   comment: "Strongest shadow border for error inputs hover.";
   name: "shadow-border-error-strongest";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #F4B6B6";
   comment: "Shadow border for inverse error inputs.";
   name: "shadow-border-error-weak";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #fccfcf";
   comment: "Weaker shadow border for error inputs.";
   name: "shadow-border-error-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #8891aa";
   comment: "Shadow border on interactive elements on inverse backgrounds.";
   name: "shadow-border-inverse";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #5817bd";
   comment: "Shadow border for the sidebar beta badge.";
   name: "shadow-border-inverse-new-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #e1e3ea";
   comment: "Strong shadow border on interactive elements on inverse backgrounds.";
   name: "shadow-border-inverse-strong";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #f4f4f6";
   comment: "Stronger shadow border on interactive elements on inverse backgrounds.";
   name: "shadow-border-inverse-stronger";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #ffffff";
   comment: "Strongest shadow border on interactive elements on inverse backgrounds.";
   name: "shadow-border-inverse-strongest";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #394762";
   comment: "Weaker shadow border on interactive elements on inverse backgrounds.";
   name: "shadow-border-inverse-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #1f304c";
   comment: "Weakest shadow border on interactive elements on inverse backgrounds.";
   name: "shadow-border-inverse-weakest";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #cce4ff";
   comment: "Weaker shadow border for neutral inputs.";
   name: "shadow-border-neutral-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #e7dcfa";
   comment: "Weaker shadow border for new status inputs.";
   name: "shadow-border-new-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #3366FF";
   comment: "Default shadow border for primary interactions.";
   name: "shadow-border-primary";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #2952CC";
   comment: "Strong shadow border for inputs hover.";
   name: "shadow-border-primary-strong";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #1F3D99";
   comment: "Stronger shadow border for inputs active.";
   name: "shadow-border-primary-stronger";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #0C1E56";
   comment: "Strongest shadow border for inputs active.";
   name: "shadow-border-primary-strongest";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #9DB5FF";
   comment: "Weaker shadow border for primary interactions.";
   name: "shadow-border-primary-weak";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #D6E0FF";
   comment: "Weaker shadow border for primary interactions.";
   name: "shadow-border-primary-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #8F95B2";
   comment: "Strong shadow border for inputs.";
   name: "shadow-border-strong";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #fff1b3";
   comment: "Shadow border for subaccount badge.";
   name: "shadow-border-subaccount";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #d1fae0";
   comment: "Weaker shadow border for success inputs.";
   name: "shadow-border-success-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #8c5bd8";
   comment: "Shadow border for user.";
   name: "shadow-border-user";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #fddcc4";
   comment: "Weaker shadow border for warning inputs.";
   name: "shadow-border-warning-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #E6E8F0";
   comment: "Weak shadow border for disabled inputs.";
   name: "shadow-border-weak";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #EDEFF5";
   comment: "Weaker shadow border for disabled inputs.";
   name: "shadow-border-weaker";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 2px 4px 0 rgba(0, 0, 0, 0.4)";
   comment: "Shadow for cards.";
   name: "shadow-card";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff";
   comment: "Shadow for focus ring on interactive elements.";
   name: "shadow-focus";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "inset 0 0 0 2px #9DB5FF";
   comment: "Shadow for inset focus on elements, such as DataGrid cells.";
   name: "shadow-focus-inset";
   altValue: null;
},
{
   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: "shadow-focus-inverse";
   altValue: null;
},
{
   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: "shadow-focus-inverse-inset";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 0 0 1px #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff";
   comment: "Shadow for simultaneous focus and border";
   name: "shadow-focus-shadow-border";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 16px 24px 4px rgba(0, 0, 0, 0.5)";
   comment: "High elevation default shadow.";
   name: "shadow-high";
   altValue: null;
},
{
   type: "shadow";
   category: "box-shadow";
   value: "0 2px 4px 0 rgba(0, 0, 0, 0.4)";
   comment: "Low elevation default shadow.";
   name: "shadow-low";
   altValue: null;
}
]
"colors": [
    {
   type: "color";
   category: "color";
   value: "rgb(0, 20, 137)";
   comment: "Default branding color";
   name: "color-brand";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(242, 47, 70)";
   comment: "Twilio brand red";
   name: "color-brand-highlight";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(255, 255, 255)";
   comment: "Gray Color 0";
   name: "color-gray-0";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(244, 244, 246)";
   comment: "Gray Color 1";
   name: "color-gray-10";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(225, 227, 234)";
   comment: "Gray Color 2";
   name: "color-gray-20";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(202, 205, 216)";
   comment: "Gray Color 3";
   name: "color-gray-30";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(174, 178, 193)";
   comment: "Gray Color 4";
   name: "color-gray-40";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(136, 145, 170)";
   comment: "Gray Color 5";
   name: "color-gray-50";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(96, 107, 133)";
   comment: "Gray Color 6";
   name: "color-gray-60";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(75, 86, 113)";
   comment: "Gray Color 7";
   name: "color-gray-70";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(57, 71, 98)";
   comment: "Gray Color 8";
   name: "color-gray-80";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(31, 48, 76)";
   comment: "Gray Color 9";
   name: "color-gray-90";
   altValue: null;
},
{
   type: "color";
   category: "color";
   value: "rgb(18, 28, 45)";
   comment: "Gray Color 10";
   name: "color-gray-100";
   altValue: null;
}
]
"color-schemes": [
    {
   type: "string";
   category: "color-scheme";
   value: "light";
   name: "color-scheme";
   altValue: null;
}
]
"data-visualization": [
    {
   type: "color";
   category: "data-visualization";
   value: "rgb(4, 162, 174)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-1";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(209, 129, 0)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-2";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(24, 65, 191)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-3";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(122, 103, 233)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-4";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(17, 167, 110)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-5";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(10, 29, 123)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-6";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(221, 54, 173)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-7";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(206, 32, 28)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-8";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(105, 140, 247)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-9";
   altValue: null;
},
{
   type: "color";
   category: "data-visualization";
   value: "rgb(243, 103, 43)";
   comment: "Color used for data visualizations. Must be used in a sequence.";
   name: "color-data-visualization-10";
   altValue: null;
}
]
"fonts": [
    {
   category: "font";
   type: "font";
   value: "'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace";
   name: "font-family-code";
   altValue: null;
},
{
   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: "font-family-display";
   altValue: null;
},
{
   category: "font";
   type: "font";
   value: "'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
   name: "font-family-text";
   altValue: null;
},
{
   category: "font";
   type: "font";
   value: "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif";
   name: "font-family-text-chinese-simplified";
   altValue: null;
},
{
   category: "font";
   type: "font";
   value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif";
   name: "font-family-text-chinese-traditional";
   altValue: null;
},
{
   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: "font-family-text-japanese";
   altValue: null;
},
{
   category: "font";
   type: "font";
   value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif";
   name: "font-family-text-korean";
   altValue: null;
}
]
"font-sizes": [
    {
   category: "font-size";
   type: "font-size";
   value: "0.75rem";
   name: "font-size-10";
   altValue: "12px";
},
{
   category: "font-size";
   type: "font-size";
   value: "0.75rem";
   name: "font-size-20";
   altValue: "12px";
},
{
   category: "font-size";
   type: "font-size";
   value: "0.875rem";
   name: "font-size-30";
   altValue: "14px";
},
{
   category: "font-size";
   type: "font-size";
   value: "0.875rem";
   name: "font-size-40";
   altValue: "14px";
},
{
   category: "font-size";
   type: "font-size";
   value: "1rem";
   name: "font-size-50";
   altValue: "16px";
},
{
   category: "font-size";
   type: "font-size";
   value: "1.25rem";
   name: "font-size-60";
   altValue: "20px";
},
{
   category: "font-size";
   type: "font-size";
   value: "1.5rem";
   name: "font-size-70";
   altValue: "24px";
},
{
   category: "font-size";
   type: "font-size";
   value: "2rem";
   name: "font-size-80";
   altValue: "32px";
},
{
   category: "font-size";
   type: "font-size";
   value: "2rem";
   name: "font-size-90";
   altValue: "32px";
},
{
   category: "font-size";
   type: "font-size";
   value: "3rem";
   name: "font-size-100";
   altValue: "48px";
},
{
   category: "font-size";
   type: "font-size";
   value: "4rem";
   name: "font-size-110";
   altValue: "64px";
},
{
   category: "font-size";
   type: "font-size";
   value: "100%";
   comment: "Base font size applied to the html element, used for rem calculations";
   name: "font-size-base";
   altValue: "1600px";
},
{
   category: "font-size";
   type: "font-size";
   value: "2rem";
   comment: "Constant typography token for font size display 10";
   name: "font-size-display-10";
   altValue: "32px";
},
{
   category: "font-size";
   type: "font-size";
   value: "3rem";
   comment: "Constant typography token for font size display 20";
   name: "font-size-display-20";
   altValue: "48px";
},
{
   category: "font-size";
   type: "font-size";
   value: "4rem";
   comment: "Constant typography token for font size display 30";
   name: "font-size-display-30";
   altValue: "64px";
}
]
"font-weights": [
    {
   category: "font-weight";
   type: "font-weight";
   value: 300;
   comment: "Font weight for light weight";
   name: "font-weight-light";
   altValue: null;
},
{
   category: "font-weight";
   type: "font-weight";
   value: 400;
   comment: "Font weight for normal weight";
   name: "font-weight-normal";
   altValue: null;
},
{
   category: "font-weight";
   type: "font-weight";
   value: 500;
   comment: "Font weight for medium weight";
   name: "font-weight-medium";
   altValue: null;
},
{
   category: "font-weight";
   type: "font-weight";
   value: 600;
   comment: "Font weight for semibold weight";
   name: "font-weight-semibold";
   altValue: null;
},
{
   category: "font-weight";
   type: "font-weight";
   value: 700;
   comment: "Font weight for bold weight";
   name: "font-weight-bold";
   altValue: null;
},
{
   category: "font-weight";
   type: "font-weight";
   value: 800;
   comment: "Font weight for extrabold weight";
   name: "font-weight-extrabold";
   altValue: null;
}
]
"line-heights": [
    {
   category: "line-height";
   type: "number";
   value: 0;
   comment: "Constant line-height token for line-height 0";
   name: "line-height-0";
   altValue: "0px";
},
{
   category: "line-height";
   type: "number";
   value: "0.75rem";
   comment: "Constant line-height token for line-height 05";
   name: "line-height-05";
   altValue: "12px";
},
{
   category: "line-height";
   type: "number";
   value: "1rem";
   comment: "Constant line-height token for line-height 10";
   name: "line-height-10";
   altValue: "16px";
},
{
   category: "line-height";
   type: "number";
   value: "1.25rem";
   comment: "Constant line-height token for line-height 20";
   name: "line-height-20";
   altValue: "20px";
},
{
   category: "line-height";
   type: "number";
   value: "1.25rem";
   comment: "Constant line-height token for line-height 30";
   name: "line-height-30";
   altValue: "20px";
},
{
   category: "line-height";
   type: "number";
   value: "1.5rem";
   comment: "Constant line-height token for line-height 40";
   name: "line-height-40";
   altValue: "24px";
},
{
   category: "line-height";
   type: "number";
   value: "1.75rem";
   comment: "Constant line-height token for line-height 50";
   name: "line-height-50";
   altValue: "28px";
},
{
   category: "line-height";
   type: "number";
   value: "1.75rem";
   comment: "Constant line-height token for line-height 60";
   name: "line-height-60";
   altValue: "28px";
},
{
   category: "line-height";
   type: "number";
   value: "2rem";
   comment: "Constant line-height token for line-height 70";
   name: "line-height-70";
   altValue: "32px";
},
{
   category: "line-height";
   type: "number";
   value: "2.5rem";
   comment: "Constant line-height token for line-height 80";
   name: "line-height-80";
   altValue: "40px";
},
{
   category: "line-height";
   type: "number";
   value: "2.75rem";
   comment: "Constant line-height token for line-height 90";
   name: "line-height-90";
   altValue: "44px";
},
{
   category: "line-height";
   type: "number";
   value: "3.25rem";
   comment: "Constant line-height token for line-height 100";
   name: "line-height-100";
   altValue: "52px";
},
{
   category: "line-height";
   type: "number";
   value: "4rem";
   comment: "Constant line-height token for line-height 110";
   name: "line-height-110";
   altValue: "64px";
},
{
   category: "line-height";
   type: "number";
   value: "2.5rem";
   comment: "Constant line-height token for line-height-display 10";
   name: "line-height-display-10";
   altValue: "40px";
},
{
   category: "line-height";
   type: "number";
   value: "3.75rem";
   comment: "Constant line-height token for line-height-display 20";
   name: "line-height-display-20";
   altValue: "60px";
},
{
   category: "line-height";
   type: "number";
   value: "5rem";
   comment: "Constant line-height token for line-height-display 30";
   name: "line-height-display-30";
   altValue: "80px";
}
]
"radii": [
    {
   type: "size";
   category: "radius";
   value: 0;
   comment: "Border radius reset";
   name: "border-radius-0";
   altValue: null;
},
{
   type: "size";
   category: "radius";
   value: "2px";
   comment: "Small border radius";
   name: "border-radius-10";
   altValue: null;
},
{
   type: "size";
   category: "radius";
   value: "4px";
   comment: "Large border radius";
   name: "border-radius-20";
   altValue: null;
},
{
   type: "size";
   category: "radius";
   value: "8px";
   comment: "Larger border radius";
   name: "border-radius-30";
   altValue: null;
},
{
   type: "size";
   category: "radius";
   value: "50%";
   comment: "Circular border radius";
   name: "border-radius-circle";
   altValue: null;
},
{
   type: "size";
   category: "radius";
   value: "100px";
   comment: "Pill border radius";
   name: "border-radius-pill";
   altValue: null;
}
]
"sizings": [
    {
   type: "size";
   category: "sizing";
   value: 0;
   comment: "Generic sizing token scale for UI components.";
   name: "size-0";
   altValue: "0px";
},
{
   type: "size";
   category: "sizing";
   value: "5.5rem";
   comment: "Generic sizing token scale for UI components.";
   name: "size-10";
   altValue: "88px";
},
{
   type: "size";
   category: "sizing";
   value: "12rem";
   comment: "Generic sizing token scale for UI components.";
   name: "size-20";
   altValue: "192px";
},
{
   type: "size";
   category: "sizing";
   value: "18.5rem";
   comment: "Generic sizing token scale for UI components.";
   name: "size-30";
   altValue: "296px";
},
{
   type: "size";
   category: "sizing";