@twilio-paste/design-tokens
Version:
Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.
2,838 lines • 81 kB
JSON
{
"properties": [
{
"type": "color",
"category": "background-color",
"value": "rgb(34, 9, 74)",
"comment": "User avatar background color.",
"name": "colorBackgroundUser"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(5, 41, 18)",
"comment": "Trial account background color.",
"name": "colorBackgroundTrial"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Background color used for subaccounts.",
"name": "colorBackgroundSubaccount"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(204, 228, 255)",
"comment": "Stronger background for primary actions or highlights.",
"name": "colorBackgroundPrimaryStronger"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(252, 207, 207)",
"comment": "Stronger background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructiveStronger"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(31, 48, 76)",
"comment": "Weaker background for primary actions or highlights.",
"name": "colorBackgroundPrimaryWeaker"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(31, 48, 76)",
"comment": "Weaker background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructiveWeaker"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(244, 124, 34)",
"comment": "Warning background color",
"name": "colorBackgroundWarning"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest warning background color.",
"name": "colorBackgroundWarningWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(31, 48, 76)",
"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(56, 14, 120)",
"comment": "Background color for indicating a new status.",
"name": "colorBackgroundNew"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(31, 48, 76)",
"comment": "Strong default background color.",
"name": "colorBackgroundStrong"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest background color for indicating a new status.",
"name": "colorBackgroundNewWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(214, 31, 31)",
"comment": "Background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructive"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weak default background color.",
"name": "colorBackgroundWeak"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(0, 109, 250)",
"comment": "Background for primary actions or highlights.",
"name": "colorBackgroundPrimary"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest background for primary actions or highlights.",
"name": "colorBackgroundPrimaryWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(244, 124, 34)",
"comment": "Background color used to represent an entity or person as \"busy\".",
"name": "colorBackgroundBusy"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(20, 176, 83)",
"comment": "Success background color.",
"name": "colorBackgroundSuccess"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructiveWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(174, 178, 193)",
"comment": "Color used to represent an entity or person as \"offline\".",
"name": "colorBackgroundOffline"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Background color for alternative striped rows.",
"name": "colorBackgroundRowStriped"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(235, 244, 255)",
"comment": "Strongest background for primary actions or highlights.",
"name": "colorBackgroundPrimaryStrongest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest success background color.",
"name": "colorBackgroundSuccessWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(254, 236, 236)",
"comment": "Strongest background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructiveStrongest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(245, 138, 138)",
"comment": "Strong error background color.",
"name": "colorBackgroundErrorStrong"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(31, 48, 76)",
"comment": "Strong primary brand background, accessible with inverse text.",
"name": "colorBackgroundBrandStrong"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Primary brand background, accessible with inverse text.",
"name": "colorBackgroundBrand"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(214, 31, 31)",
"comment": "Error background color.",
"name": "colorBackgroundError"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest neutral background color.",
"name": "colorBackgroundNeutralWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(20, 176, 83)",
"comment": "Background color used to represent an entity or person as \"available\".",
"name": "colorBackgroundAvailable"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest error background color.",
"name": "colorBackgroundErrorWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(235, 86, 86)",
"comment": "Background color used to represent required form fields.",
"name": "colorBackgroundRequired"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(254, 236, 236)",
"comment": "Strongest error background color.",
"name": "colorBackgroundErrorStrongest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(34, 9, 74)",
"comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.",
"name": "colorBackgroundDecorative40Weakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(57, 71, 98)",
"comment": "Stronger inverse background color for any container. Must be used on color-background-body-inverse.",
"name": "colorBackgroundInverseStronger"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(5, 41, 18)",
"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(13, 19, 28)",
"comment": "Background color used for the main page body.",
"name": "colorBackgroundBody"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(153, 205, 255)",
"comment": "Strong background for primary actions or highlights.",
"name": "colorBackgroundPrimaryStrong"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(3, 11, 93)",
"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(246, 177, 177)",
"comment": "Strong background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructiveStrong"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak background color used for destructive actions or highlights.",
"name": "colorBackgroundDestructiveWeak"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"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(18, 28, 45)",
"comment": "Default background color for any container.",
"name": "colorBackground"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak background for primary actions or highlights.",
"name": "colorBackgroundPrimaryWeak"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(96, 107, 133)",
"comment": "Stronger default background color.",
"name": "colorBackgroundStronger"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(242, 47, 70)",
"comment": "Highlight brand background, accessible with black text.",
"name": "colorBackgroundBrandHighlight"
},
{
"type": "color",
"category": "background-color",
"value": "rgba(242, 47, 70, 0.1)",
"comment": "Weakest background color used for brand highlights.",
"name": "colorBackgroundBrandHighlightWeakest"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(225, 227, 234)",
"comment": "Strongest default background color.",
"name": "colorBackgroundStrongest"
},
{
"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(18, 28, 45, 0.9)",
"comment": "Default background for overlays.",
"name": "colorBackgroundOverlay"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(214, 31, 31)",
"comment": "Color used to represent an entity or person as \"unavailable\".",
"name": "colorBackgroundUnavailable"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(252, 207, 207)",
"comment": "Stronger error background color.",
"name": "colorBackgroundErrorStronger"
},
{
"type": "color",
"category": "background-color",
"value": "rgb(18, 28, 45)",
"comment": "Stronger primary brand background, accessible with inverse text.",
"name": "colorBackgroundBrandStronger"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(252, 207, 207)",
"comment": "Stronger error border color",
"name": "colorBorderErrorStronger"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(195, 83, 35)",
"comment": "Weak warning border color",
"name": "colorBorderWarningWeak"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(88, 23, 189)",
"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(173, 17, 17)",
"comment": "Weaker error border color.",
"name": "colorBorderErrorWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(88, 23, 189)",
"comment": "User avatar border color.",
"name": "colorBorderUser"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(4, 60, 181)",
"comment": "Weaker neutral border color",
"name": "colorBorderNeutralWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(244, 124, 34)",
"comment": "Warning border color",
"name": "colorBorderWarning"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(14, 124, 58)",
"comment": "Weaker success border color.",
"name": "colorBorderSuccessWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(204, 228, 255)",
"comment": "Stronger primary border color",
"name": "colorBorderPrimaryStronger"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(252, 207, 207)",
"comment": "Stronger destructive hover border color",
"name": "colorBorderDestructiveStronger"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(64, 19, 15)",
"comment": "Weakest warning border color",
"name": "colorBorderWarningWeakest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(4, 60, 181)",
"comment": "Weaker primary border color",
"name": "colorBorderPrimaryWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(74, 11, 11)",
"comment": "Destructive focus border color",
"name": "colorBorderDestructiveWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(88, 23, 189)",
"comment": "Weaker border color for something designated as new",
"name": "colorBorderNewWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(214, 31, 31)",
"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(0, 109, 250)",
"comment": "Primary border color.",
"name": "colorBorderPrimary"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(3, 11, 93)",
"comment": "Weakest primary border color",
"name": "colorBorderPrimaryWeakest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(20, 176, 83)",
"comment": "Success border color",
"name": "colorBorderSuccess"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(49, 12, 12)",
"comment": "Destructive focus border color",
"name": "colorBorderDestructiveWeakest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(254, 236, 236)",
"comment": "Strongest destructive hover border color",
"name": "colorBorderDestructiveStrongest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(235, 244, 255)",
"comment": "Strongest primary border color",
"name": "colorBorderPrimaryStrongest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(5, 41, 18)",
"comment": "Weakest success border color",
"name": "colorBorderSuccessWeakest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(195, 83, 35)",
"comment": "Weaker warning border color.",
"name": "colorBorderWarningWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(136, 145, 170)",
"comment": "Strong border color",
"name": "colorBorderStrong"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak border color",
"name": "colorBorderWeak"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(0, 109, 250)",
"comment": "Neutral border color",
"name": "colorBorderNeutral"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(214, 31, 31)",
"comment": "Error border color",
"name": "colorBorderError"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(49, 12, 12)",
"comment": "Weakest error border color",
"name": "colorBorderErrorWeakest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(254, 236, 236)",
"comment": "Strongest error border color",
"name": "colorBorderErrorStrongest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(245, 138, 138)",
"comment": "Strong error border color.",
"name": "colorBorderErrorStrong"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(173, 17, 17)",
"comment": "Weak error border color",
"name": "colorBorderErrorWeak"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(4, 60, 181)",
"comment": "Weak neutral border color",
"name": "colorBorderNeutralWeak"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(96, 107, 133)",
"comment": "Default border color",
"name": "colorBorder"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(13, 19, 28)",
"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(14, 124, 58)",
"comment": "Weak success border color",
"name": "colorBorderSuccessWeak"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(153, 205, 255)",
"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(246, 177, 177)",
"comment": "Destructive focus border color",
"name": "colorBorderDestructiveStrong"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(4, 60, 181)",
"comment": "Weak primary border color",
"name": "colorBorderPrimaryWeak"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(18, 28, 45)",
"comment": "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.",
"name": "colorBorderInverseWeakest"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(117, 12, 12)",
"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(31, 48, 76)",
"comment": "Weaker border color",
"name": "colorBorderWeaker"
},
{
"type": "color",
"category": "border-color",
"value": "rgb(31, 48, 76)",
"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(4, 60, 181)",
"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(14, 124, 58)",
"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",
"comment": "Border radius reset",
"name": "borderRadius0"
},
{
"type": "size",
"category": "radius",
"value": "2px",
"comment": "Small border radius",
"name": "borderRadius10"
},
{
"type": "size",
"category": "radius",
"value": "4px",
"comment": "Large border radius",
"name": "borderRadius20"
},
{
"type": "size",
"category": "radius",
"value": "8px",
"comment": "Larger border radius",
"name": "borderRadius30"
},
{
"type": "size",
"category": "radius",
"value": "0.5",
"comment": "Circular border radius",
"name": "borderRadiusCircle"
},
{
"type": "size",
"category": "radius",
"value": "100px",
"comment": "Pill border radius",
"name": "borderRadiusPill"
},
{
"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 #5817bd",
"comment": "Weaker bottom shadow border for new status",
"name": "shadowBorderBottomNewWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 4px 16px 0 rgba(0, 0, 0, 0.5)",
"comment": "Default shadow.",
"name": "shadow"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #c28e00",
"comment": "Shadow border for subaccount badge.",
"name": "shadowBorderSubaccount"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #fccfcf",
"comment": "Stronger shadow border for destructive interactions",
"name": "shadowBorderDestructiveStronger"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #0e7c3a",
"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 #cce4ff",
"comment": "Stronger shadow border for inputs active.",
"name": "shadowBorderPrimaryStronger"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 1px 0 #c35323",
"comment": "Weaker bottom shadow border warning warning status",
"name": "shadowBorderBottomWarningWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #1f304c",
"comment": "Weaker shadow border for destructive interactions.",
"name": "shadowBorderDestructiveWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #043cb5",
"comment": "Weaker shadow border for primary interactions.",
"name": "shadowBorderPrimaryWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #5817bd",
"comment": "Weaker shadow border for new status inputs.",
"name": "shadowBorderNewWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 2px 4px 0 rgba(0, 0, 0, 0.4)",
"comment": "Low elevation default shadow.",
"name": "shadowLow"
},
{
"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 #c35323",
"comment": "Weaker shadow border for warning inputs.",
"name": "shadowBorderWarningWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #8891aa",
"comment": "Strong shadow border for inputs.",
"name": "shadowBorderStrong"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 2px #121c2d, 0 0 0 3px #ffffff, 0 0 0 5px rgba(255, 255, 255, 0.2)",
"comment": "Shadow for focus ring on interactive elements.",
"name": "shadowFocus"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #394762",
"comment": "Weak shadow border for disabled inputs.",
"name": "shadowBorderWeak"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)",
"comment": "Shadow for focus ring on interactive elements on inverse backgrounds.",
"name": "shadowFocusInverse"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #006dfa",
"comment": "Default shadow border for primary interactions.",
"name": "shadowBorderPrimary"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #d61f1f",
"comment": "Shadow border for destructive interactions.",
"name": "shadowBorderDestructive"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 16px 24px 4px rgba(0, 0, 0, 0.5)",
"comment": "High elevation default shadow.",
"name": "shadowHigh"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #f58a8a",
"comment": "Strong shadow border for error inputs hover.",
"name": "shadowBorderErrorStrong"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #ebf4ff",
"comment": "Strongest shadow border for inputs active.",
"name": "shadowBorderPrimaryStrongest"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #feecec",
"comment": "Strongest shadow border for destructive interactions",
"name": "shadowBorderDestructiveStrongest"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #ad1111",
"comment": "Shadow border for inverse error inputs.",
"name": "shadowBorderErrorWeak"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #d61f1f",
"comment": "Shadow border for error inputs.",
"name": "shadowBorderError"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 1px 0 #8891aa",
"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 #043cb5",
"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": "0 0 0 1px #feecec",
"comment": "Strongest shadow border for error inputs hover.",
"name": "shadowBorderErrorStrongest"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #f6b1b1",
"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 #0e7c3a",
"comment": "Weaker bottom shadow border for decorative 30",
"name": "shadowBorderBottomDecorative30Weaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #99cdff",
"comment": "Strong shadow border for inputs hover.",
"name": "shadowBorderPrimaryStrong"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #043cb5",
"comment": "Weaker shadow border for primary interactions.",
"name": "shadowBorderPrimaryWeak"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)",
"comment": "Shadow for simultaneous focus and border",
"name": "shadowFocusShadowBorder"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 1px 0 #5817bd",
"comment": "Weaker bottom shadow border for decorative 40",
"name": "shadowBorderBottomDecorative40Weaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #394762",
"comment": "Weak shadow border for destructive interactions.",
"name": "shadowBorderDestructiveWeak"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 1px 0 #ad1111",
"comment": "Weaker bottom shadow border for error status",
"name": "shadowBorderBottomErrorWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #1f304c",
"comment": "Weaker shadow border for disabled inputs.",
"name": "shadowBorderWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #606b85",
"comment": "Shadow border for inputs.",
"name": "shadowBorder"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 1px 0 #043cb5",
"comment": "Weaker bottom shadow border for neutral status",
"name": "shadowBorderBottomNeutralWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #1f304c",
"comment": "Weaker shadow border for decorative 10",
"name": "shadowBorderDecorative10Weaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #043cb5",
"comment": "Weaker shadow border for decorative 20",
"name": "shadowBorderDecorative20Weaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 1px 0 #c28e00",
"comment": "Bottom shadow border for subaccount badge",
"name": "shadowBorderBottomSubaccount"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)",
"comment": "Shadow for inset focus on elements, such as DataGrid cells.",
"name": "shadowFocusInset"
},
{
"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 0 0 1px #0e7c3a",
"comment": "Weaker shadow border for decorative 30",
"name": "shadowBorderDecorative30Weaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #121c2d",
"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 #0e7c3a",
"comment": "Weaker bottom shadow border for success status",
"name": "shadowBorderBottomSuccessWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #5817bd",
"comment": "Weaker shadow border for decorative 40",
"name": "shadowBorderDecorative40Weaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #fccfcf",
"comment": "Shadow border for error inputs hover.",
"name": "shadowBorderErrorStronger"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 2px 4px 0 rgba(0, 0, 0, 0.4)",
"comment": "Shadow for cards.",
"name": "shadowCard"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #ad1111",
"comment": "Weaker shadow border for error inputs.",
"name": "shadowBorderErrorWeaker"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #ffffff",
"comment": "Strongest shadow border on interactive elements on inverse backgrounds.",
"name": "shadowBorderInverseStrongest"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)",
"comment": "Shadow for inset focus ring on interactive elements on inverse backgrounds.",
"name": "shadowFocusInverseInset"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #5817bd",
"comment": "Shadow border for user.",
"name": "shadowBorderUser"
},
{
"type": "shadow",
"category": "box-shadow",
"value": "0 0 0 1px #043cb5",
"comment": "Weaker shadow border for neutral inputs.",
"name": "shadowBorderNeutralWeaker"
},
{
"category": "font",
"type": "font",
"value": "'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "fontFamilyText"
},
{
"category": "font",
"type": "font",
"value": "'TwilioSansMono', Courier, monospace",
"name": "fontFamilyCode"
},
{
"category": "font",
"type": "font",
"value": "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif",
"name": "fontFamilyTextJapanese"
},
{
"category": "font",
"type": "font",
"value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif",
"name": "fontFamilyTextKorean"
},
{
"category": "font",
"type": "font",
"value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif",
"name": "fontFamilyTextChineseTraditional"
},
{
"category": "font",
"type": "font",
"value": "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif",
"name": "fontFamilyTextChineseSimplified"
},
{
"category": "font",
"type": "font",
"value": "'TwilioSansDisplay', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "fontFamilyDisplay"
},
{
"category": "font-size",
"type": "font-size",
"value": "48",
"comment": "Constant typography token for font size 110",
"name": "fontSize110"
},
{
"category": "font-size",
"type": "font-size",
"value": "40",
"comment": "Constant typography token for font size 100",
"name": "fontSize100"
},
{
"category": "font-size",
"type": "font-size",
"value": "32",
"comment": "Constant typography token for font size 90",
"name": "fontSize90"
},
{
"category": "font-size",
"type": "font-size",
"value": "28",
"comment": "Constant typography token for font size 80",
"name": "fontSize80"
},
{
"category": "font-size",
"type": "font-size",
"value": "24",
"comment": "Constant typography token for font size 70",
"name": "fontSize70"
},
{
"category": "font-size",
"type": "font-size",
"value": "20",
"comment": "Constant typography token for font size 60",
"name": "fontSize60"
},
{
"category": "font-size",
"type": "font-size",
"value": "18",
"comment": "Constant typography token for font size 50",
"name": "fontSize50"
},
{
"category": "font-size",
"type": "font-size",
"value": "16",
"comment": "Constant typography token for font size 40",
"name": "fontSize40"
},
{
"category": "font-size",
"type": "font-size",
"value": "14",
"comment": "Constant typography token for font size 30",
"name": "fontSize30"
},
{
"category": "font-size",
"type": "font-size",
"value": "12",
"comment": "Constant typography token for font size 20",
"name": "fontSize20"
},
{
"category": "font-size",
"type": "font-size",
"value": "10",
"comment": "Constant typography token for font size 10",
"name": "fontSize10"
},
{
"category": "font-size",
"type": "font-size",
"value": "64",
"comment": "Constant typography token for font size display 30",
"name": "fontSizeDisplay30"
},
{
"category": "font-size",
"type": "font-size",
"value": "48",
"comment": "Constant typography token for font size display 20",
"name": "fontSizeDisplay20"
},
{
"category": "font-size",
"type": "font-size",
"value": "32",
"comment": "Constant typography token for font size display 10",
"name": "fontSizeDisplay10"
},
{
"category": "font-size",
"type": "font-size",
"value": "1",
"comment": "Base font size applied to the html element, used for rem calculations",
"name": "fontSizeBase"
},
{
"category": "font-weight",
"type": "font-weight",
"value": "400",
"comment": "Font weight for light weight",
"name": "fontWeightLight"
},
{
"category": "font-weight",
"type": "font-weight",
"value": "400",
"comment": "Font weight for normal weight",
"name": "fontWeightNormal"
},
{
"category": "font-weight",
"type": "font-weight",
"value": "500",
"comment": "Font weight for medium weight",
"name": "fontWeightMedium"
},
{
"category": "font-weight",
"type": "font-weight",
"value": "600",
"comment": "Font weight for semibold weight",
"name": "fontWeightSemibold"
},
{
"category": "font-weight",
"type": "font-weight",
"value": "600",
"comment": "Font weight for bold weight",
"name": "fontWeightBold"
},
{
"category": "font-weight",
"type": "font-weight",
"value": "800",
"comment": "Font weight for extrabold weight",
"name": "fontWeightExtrabold"
},
{
"category": "line-height",
"type": "number",
"value": "0",
"comment": "Constant line-height token for line-height 0",
"name": "lineHeight0"
},
{
"category": "line-height",
"type": "number",
"value": "64",
"comment": "Constant line-height token for line-height 110",
"name": "lineHeight110"
},
{
"category": "line-height",
"type": "number",
"value": "44",
"comment": "Constant line-height token for line-height 90",
"name": "lineHeight90"
},
{
"category": "line-height",
"type": "number",
"value": "52",
"comment": "Constant line-height token for line-height 100",
"name": "lineHeight100"
},
{
"category": "line-height",
"type": "number",
"value": "40",
"comment": "Constant line-height token for line-height 80",
"name": "lineHeight80"
},
{
"category": "line-height",
"type": "number",
"value": "32",
"comment": "Constant line-height token for line-height 70",
"name": "lineHeight70"
},
{
"category": "line-height",
"type": "number",
"value": "28",
"comment": "Constant line-height token for line-height 60",
"name": "lineHeight60"
},
{
"category": "line-height",
"type": "number",
"value": "28",
"comment": "Constant line-height token for line-height 50",
"name": "lineHeight50"
},
{
"category": "line-height",
"type": "number",
"value": "24",
"comment": "Constant line-height token for line-height 40",
"name": "lineHeight40"
},
{
"category": "line-height",
"type": "number",
"value": "20",
"comment": "Constant line-height token for line-height 30",
"name": "lineHeight30"
},
{
"category": "line-height",
"type": "number",
"value": "20",
"comment": "Constant line-height token for line-height 20",
"name": "lineHeight20"
},
{
"category": "line-height",
"type": "number",
"value": "16",
"comment": "Constant line-height token for line-height 10",
"name": "lineHeight10"
},
{
"category": "line-height",
"type": "number",
"value": "12",
"comment": "Constant line-height token for line-height 05",
"name": "lineHeight05"
},
{
"category": "line-height",
"type": "number",
"value": "80",
"comment": "Constant line-height token for line-height-display 30",
"name": "lineHeightDisplay30"
},
{
"category": "line-height",
"type": "number",
"value": "60",
"comment": "Constant line-height token for line-height-display 20",
"name": "lineHeightDisplay20"
},
{
"category": "line-height",
"type": "number",
"value": "40",
"comment": "Constant line-height token for line-height-display 10",
"name": "lineHeightDisplay10"
},
{
"type": "color",
"category": "color",
"value": "rgb(242, 47, 70)",
"comment": "Twilio brand red",
"name": "colorBrandHighlight"
},
{
"type": "color",
"category": "color",
"value": "rgb(255, 255, 255)",
"comment": "Gray Color 0",
"name": "colorGray0"
},
{
"type": "color",
"category": "color",
"value": "rgb(18, 28, 45)",
"comment": "Gray Color 10",
"name": "colorGray100"
},
{
"type": "color",
"category": "color",
"value": "rgb(31, 48, 76)",
"comment": "Gray Color 9",
"name": "colorGray90"
},
{
"type": "color",
"category": "color",
"value": "rgb(57, 71, 98)",
"comment": "Gray Color 8",
"name": "colorGray80"
},
{
"type": "color",
"category": "color",
"value": "rgb(75, 86, 113)",
"comment": "Gray Color 7",
"name": "colorGray70"
},
{
"type": "color",
"category": "color",
"value": "rgb(96, 107, 133)",
"comment": "Gray Color 6",
"name": "colorGray60"
},
{
"type": "color",
"category": "color",
"value": "rgb(136, 145, 170)",
"comment": "Gray Color 5",
"name": "colorGray50"
},
{
"type": "color",
"category": "color",
"value": "rgb(174, 178, 193)",
"comment": "Gray Color 4",
"name": "colorGray40"
},
{
"type": "color",
"category": "color",
"value": "rgb(0, 20, 137)",
"comment": "Default branding color",
"name": "colorBrand"
},
{
"type": "color",
"category": "color",
"value": "rgb(202, 205, 216)",
"comment": "Gray Color 3",
"name": "colorGray30"
},
{
"type": "color",
"category": "color",
"value": "rgb(225, 227, 234)",
"comment": "Gray Color 2",
"name": "colorGray20"
},
{
"type": "color",
"category": "color",
"value": "rgb(244, 244, 246)",
"comment": "Gray Color 1",
"name": "colorGray10"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(232, 180, 7)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization10"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(2, 99, 224)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization1"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(200, 175, 240)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization2"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(96, 107, 133)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization3"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(102, 179, 255)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization4"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(14, 124, 58)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization5"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(250, 153, 80)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization6"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(195, 83, 35)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization7"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(246, 177, 177)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization8"
},
{
"type": "color",
"category": "data-visualization",
"value": "rgb(140, 91, 216)",
"comment": "Color used for data visualizations. Must be used in a sequence.",
"name": "colorDataVisualization9"
},
{
"type": "size",
"category": "sizing",
"value": "12",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare40"
},
{
"type": "size",
"category": "sizing",
"value": "40",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon80"
},
{
"type": "size",
"category": "sizing",
"value": "8",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare30"
},
{
"type": "size",
"category": "sizing",
"value": "32",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon70"
},
{
"type": "size",
"category": "sizing",
"value": "4",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare20"
},
{
"type": "size",
"category": "sizing",
"value": "28",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon60"
},
{
"type": "size",
"category": "sizing",
"value": "920",
"comment": "Generic sizing token scale for UI components.",
"name": "size90"
},
{
"type": "size",
"category": "sizing",
"value": "2",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare10"
},
{
"type": "size",
"category": "sizing",
"value": "1232",
"comment": "Generic sizing token scale for UI components.",
"name": "size120"
},
{
"type": "size",
"category": "sizing",
"value": "28",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon50"
},
{
"type": "size",
"category": "sizing",
"value": "816",
"comment": "Generic sizing token scale for UI components.",
"name": "size80"
},
{
"type": "size",
"category": "sizing",
"value": "0",
"comment": "Generic sizing token scale for UI components.",
"name": "size0"
},
{
"type": "size",
"category": "sizing",
"value": "1128",
"comment": "Generic sizing token scale for UI components.",
"name": "size110"
},
{
"type": "size",
"category": "sizing",
"value": "24",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon40"
},
{
"type": "size",
"category": "sizing",
"value": "72",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare190"
},
{
"type": "size",
"category": "sizing",
"value": "712",
"comment": "Generic sizing token scale for UI components.",
"name": "size70"
},
{
"type": "size",
"category": "sizing",
"value": "1024",
"comment": "Generic sizing token scale for UI components.",
"name": "size100"
},
{
"type": "size",
"category": "sizing",
"value": "20",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon30"
},
{
"type": "size",
"category": "sizing",
"value": "68",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare180"
},
{
"type": "size",
"category": "sizing",
"value": "608",
"comment": "Generic sizing token scale for UI components.",
"name": "size60"
},
{
"type": "size",
"category": "sizing",
"value": "20",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon20"
},
{
"type": "size",
"category": "sizing",
"value": "64",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare170"
},
{
"type": "size",
"category": "sizing",
"value": "76",
"comment": "Sizing token for the compact sidebar width.",
"name": "sizeSidebarCompact"
},
{
"type": "size",
"category": "sizing",
"value": "16",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon10"
},
{
"type": "size",
"category": "sizing",
"value": "6",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare25"
},
{
"type": "size",
"category": "sizing",
"value": "60",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare160"
},
{
"type": "size",
"category": "sizing",
"value": "504",
"comment": "Generic sizing token scale for UI components.",
"name": "size50"
},
{
"type": "size",
"category": "sizing",
"value": "64",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon110"
},
{
"type": "size",
"category": "sizing",
"value": "56",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare150"
},
{
"type": "size",
"category": "sizing",
"value": "400",
"comment": "Generic sizing token scale for UI components.",
"name": "size40"
},
{
"type": "size",
"category": "sizing",
"value": "52",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon100"
},
{
"type": "size",
"category": "sizing",
"value": "52",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare140"
},
{
"type": "size",
"category": "sizing",
"value": "296",
"comment": "Generic sizing token scale for UI components.",
"name": "size30"
},
{
"type": "size",
"category": "sizing",
"value": "76",
"comment": "Sizing token for the minimum topbar height.",
"name": "sizeTopbar"
},
{
"type": "size",
"category": "sizing",
"value": "48",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare130"
},
{
"type": "size",
"category": "sizing",
"value": "192",
"comment": "Generic sizing token scale for UI components.",
"name": "size20"
},
{
"type": "size",
"category": "sizing",
"value": "44",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare120"
},
{
"type": "size",
"category": "sizing",
"value": "88",
"comment": "Generic sizing token scale for UI components.",
"name": "size10"
},
{
"type": "size",
"category": "sizing",
"value": "40",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare110"
},
{
"type": "size",
"category": "sizing",
"value": "0",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare0"
},
{
"type": "size",
"category": "sizing",
"value": "12",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon05"
},
{
"type": "size",
"category": "sizing",
"value": "36",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare100"
},
{
"type": "size",
"category": "sizing",
"value": "76",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare200"
},
{
"type": "size",
"category": "sizing",
"value": "240",
"comment": "Sizing token for sidebar width.",
"name": "sizeSidebar"
},
{
"type": "size",
"category": "sizing",
"value": "32",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare90"
},
{
"type": "size",
"category": "sizing",
"value": "28",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare80"
},
{
"type": "size",
"category": "sizing",
"value": "24",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare70"
},
{
"type": "size",
"category": "sizing",
"value": "20",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare60"
},
{
"type": "size",
"category": "sizing",
"value": "16",
"comment": "Generic square sizing token scale for UI components.",
"name": "sizeSquare50"
},
{
"type": "size",
"category": "sizing",
"value": "44",
"comment": "Maps to line-height tokens 1:1",
"name": "sizeIcon90"
},
{
"category": "spacing",
"type": "size",
"value": "24",
"name": "space70"
},
{
"category": "spacing",
"type": "size",
"value": "-36",
"name": "spaceNegative100"
},
{
"category": "spacing",
"type": "size",
"value": "20",
"name": "space60"
},
{
"category": "spacing",
"type": "size",
"value": "-76",
"name": "spaceNegative200"
},
{
"category": "spacing",
"type": "size",
"value": "72",
"name": "space190"
},
{
"category": "spacing",
"type": "size",
"value": "16",
"name": "space50"
},
{
"category": "spacing",
"type": "size",
"value": "68",
"name": "space180"
},
{
"category": "spacing",
"type": "size",
"value": "12",
"name": "space40"
},
{
"category": "spacing",
"type": "size",
"value": "64",
"name": "space170"
},
{
"category": "spacing",
"type": "size",
"value": "8",
"name": "space30"
},
{
"category": "spacing",
"type": "size",
"value": "60",
"name": "space160"
},
{
"category": "spacing",
"type": "size",
"value": "4",
"name": "space20"
},
{
"category": "spacing",
"type": "size",
"value": "56",
"name": "space150"
},
{
"category": "spacing",
"type": "size",
"value": "2",
"name": "space10"
},
{
"category": "spacing",
"type": "size",
"value": "52",
"name": "space140"
},
{
"category": "spacing",
"type": "size",
"value": "48",
"name": "space130"
},
{
"category": "spacing",
"type": "size",
"value": "44",
"name": "space120"
},
{
"category": "spacing",
"type": "size",
"value": "-32",
"name": "spaceNegative90"
},
{
"category": "spacing",
"type": "size",
"value": "40",
"name": "space110"
},
{
"category": "spacing",
"type": "size",
"value": "0",
"name": "space0"
},
{
"category": "spacing",
"type": "size",
"value": "-28",
"name": "spaceNegative80"
},
{
"category": "spacing",
"type": "size",
"value": "36",
"name": "space100"
},
{
"category": "spacing",
"type": "size",
"value": "-24",
"name": "spaceNegative70"
},
{
"category": "spacing",
"type": "size",
"value": "76",
"name": "space200"
},
{
"category": "spacing",
"type": "size",
"value": "-20",
"name": "spaceNegative60"
},
{
"category": "spacing",
"type": "size",
"value": "-16",
"name": "spaceNegative50"
},
{
"category": "spacing",
"type": "size",
"value": "-12",
"name": "spaceNegative40"
},
{
"category": "spacing",
"type": "size",
"value": "-8",
"name": "spaceNegative30"
},
{
"category": "spacing",
"type": "size",
"value": "-4",
"name": "spaceNegative20"
},
{
"category": "spacing",
"type": "size",
"value": "-2",
"name": "spaceNegative10"
},
{
"category": "spacing",
"type": "size",
"value": "-72",
"name": "spaceNegative190"
},
{
"category": "spacing",
"type": "size",
"value": "-68",
"name": "spaceNegative180"
},
{
"category": "spacing",
"type": "size",
"value": "-64",
"name": "spaceNegative170"
},
{
"category": "spacing",
"type": "size",
"value": "-60",
"name": "spaceNegative160"
},
{
"category": "spacing",
"type": "size",
"value": "-56",
"name": "spaceNegative150"
},
{
"category": "spacing",
"type": "size",
"value": "-52",
"name": "spaceNegative140"
},
{
"category": "spacing",
"type": "size",
"value": "-48",
"name": "spaceNegative130"
},
{
"category": "spacing",
"type": "size",
"value": "32",
"name": "space90"
},
{
"category": "spacing",
"type": "size",
"value": "-44",
"name": "spaceNegative120"
},
{
"category": "spacing",
"type": "size",
"value": "28",
"name": "space80"
},
{
"category": "spacing",
"type": "size",
"value": "-40",
"name": "spaceNegative110"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak shade of destructive link text to be used in interactions",
"name": "colorTextLinkDestructiveWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 244, 255)",
"comment": "Stronger shade of link text to be used in interactions",
"name": "colorTextLinkStronger"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(200, 175, 240)",
"comment": "Text color for user avatar.",
"name": "colorTextUser"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(200, 175, 240)",
"comment": "Icon color for indicating a new status.",
"name": "colorTextIconNew"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 233, 128)",
"comment": "Text color for the subaccount badge",
"name": "colorTextSubaccount"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(246, 177, 177)",
"comment": "Stronger shade of destructive text.",
"name": "colorTextDestructiveStronger"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(244, 244, 246)",
"comment": "Icon color for indicating a offline status",
"name": "colorTextIconOffline"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 86, 86)",
"comment": "Destructive link text",
"name": "colorTextLinkDestructive"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(153, 205, 255)",
"comment": "Stronger primary text.",
"name": "colorTextPrimaryStronger"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(54, 213, 118)",
"comment": "Icon color for indicating success.",
"name": "colorTextIconSuccess"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 179, 122)",
"comment": "Color for warning text.",
"name": "colorTextWarning"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Strongest shade of destructive link text to be used in interactions",
"name": "colorTextLinkDestructiveStrongest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(102, 179, 255)",
"comment": "Icon color for being neutral.",
"name": "colorTextIconNeutral"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(231, 220, 250)",
"comment": "Color for text indicating a new status.",
"name": "colorTextNew"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 86, 86)",
"comment": "Icon color for indicating an error.",
"name": "colorTextIconError"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(202, 205, 216)",
"comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
"text_contrast_pairing": [
"color-background-body-inverse",
"color-background-brand"
],
"name": "colorTextInverseWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(54, 213, 118)",
"comment": "Icon color for indicating a available status",
"name": "colorTextIconAvailable"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(246, 177, 177)",
"comment": "Stronger shade of destructive link text to be used in interactions.",
"name": "colorTextLinkDestructiveStronger"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Twilio brand icon color used for the Twilio logo on inverse backgrounds.",
"text_contrast_pairing": [
"color-background-body-inverse"
],
"name": "colorTextIconBrandInverse"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 86, 86)",
"comment": "Destructive text.",
"text_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-neutral-weakest",
"color-background-warning-weakest",
"color-background-row-striped",
"color-background-primary-weakest",
"color-background-destructive-weakest"
],
"name": "colorTextDestructive"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(0, 140, 255)",
"comment": "Primary text.",
"name": "colorTextPrimary"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(162, 246, 195)",
"comment": "Text color for success text.",
"name": "colorTextSuccess"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(200, 175, 240)",
"comment": "Inverse color for indicating a new status.",
"name": "colorTextInverseNew"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Strongest shade of destructive text.",
"text_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-row-striped",
"color-background-primary-weakest",
"color-background-destructive-weakest"
],
"name": "colorTextDestructiveStrongest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(136, 145, 170)",
"comment": "Weak body text for visual hierarchy.",
"name": "colorTextWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Strongest primary text.",
"name": "colorTextPrimaryStrongest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(136, 145, 170)",
"comment": "Default icon color.",
"name": "colorTextIcon"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(0, 140, 255)",
"comment": "Link text",
"name": "colorTextLink"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(242, 47, 70)",
"comment": "Twilio brand red icon color used for the Twilio logo.",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body"
],
"name": "colorTextIconBrandHighlight"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(102, 179, 255)",
"comment": "Color for text indicating a neutral status.",
"name": "colorTextNeutral"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Strongest shade of link text to be used in interactions",
"name": "colorTextLinkStrongest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 86, 86)",
"comment": "Error text for inputs and error misc",
"name": "colorTextError"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(136, 145, 170)",
"comment": "Default icon color for inverse backgrounds.",
"name": "colorTextIconInverse"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(246, 177, 177)",
"comment": "Strong error text for inputs and error misc",
"name": "colorTextErrorStrong"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 86, 86)",
"comment": "Icon color for indicating a unavailable status",
"name": "colorTextIconUnavailable"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(235, 86, 86)",
"comment": "Weak error text for inputs and error misc",
"name": "colorTextErrorWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(200, 175, 240)",
"comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
"name": "colorTextDecorative40"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(153, 205, 255)",
"comment": "Strong shade of link text to be used in interactions",
"name": "colorTextLinkStrong"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Text color used on any brand color",
"name": "colorTextBrandInverse"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(254, 236, 236)",
"comment": "Strongest error text for inputs and error misc.",
"name": "colorTextErrorStrongest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(162, 246, 195)",
"comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
"name": "colorTextDecorative30"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak shade of link text to be used in interactions",
"name": "colorTextLinkWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(204, 228, 255)",
"comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
"name": "colorTextDecorative20"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(225, 227, 234)",
"comment": "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.",
"name": "colorTextDecorative10"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(244, 244, 246)",
"comment": "Body text color",
"name": "colorText"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 179, 122)",
"comment": "Icon color for indicating a busy status",
"name": "colorTextIconBusy"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(13, 19, 28)",
"comment": "Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.",
"name": "colorTextWeakest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(242, 47, 70)",
"comment": "Twilio brand red, accessible on large text only.",
"name": "colorTextBrandHighlight"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(246, 177, 177)",
"comment": "Strong shade of destructive text.",
"text_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-row-striped",
"color-background-primary-weakest",
"color-background-destructive-weakest"
],
"name": "colorTextDestructiveStrong"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(136, 145, 170)",
"comment": "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
"name": "colorTextInverseWeaker"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(153, 205, 255)",
"comment": "Strong primary text.",
"name": "colorTextPrimaryStrong"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak primary text.",
"name": "colorTextPrimaryWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(57, 71, 98)",
"comment": "Weak shade of destructive text.",
"name": "colorTextDestructiveWeak"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 255, 255)",
"comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
"text_contrast_pairing": [
"color-background-body-inverse",
"color-background-brand",
"color-background-error",
"color-background-primary",
"color-background-destructive"
],
"name": "colorTextInverse"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(75, 86, 113)",
"comment": "Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
"name": "colorTextInverseWeakest"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(57, 71, 98)",
"comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
"name": "colorTextWeaker"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(250, 194, 160)",
"comment": "Color for dark warning text.",
"name": "colorTextWarningStrong"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(255, 179, 122)",
"comment": "Icon color for indicating a warning.",
"name": "colorTextIconWarning"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(254, 236, 236)",
"comment": "Stronger error text for inputs and error misc",
"name": "colorTextErrorStronger"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(246, 177, 177)",
"comment": "Strong shade of destructive link text to be used in interactions",
"name": "colorTextLinkDestructiveStrong"
},
{
"type": "z-index",
"category": "z-index",
"value": "0",
"name": "zIndex0"
},
{
"type": "z-index",
"category": "z-index",
"value": "90",
"name": "zIndex90"
},
{
"type": "z-index",
"category": "z-index",
"value": "80",
"name": "zIndex80"
},
{
"type": "z-index",
"category": "z-index",
"value": "70",
"name": "zIndex70"
},
{
"type": "z-index",
"category": "z-index",
"value": "60",
"name": "zIndex60"
},
{
"type": "z-index",
"category": "z-index",
"value": "50",
"name": "zIndex50"
},
{
"type": "z-index",
"category": "z-index",
"value": "40",
"name": "zIndex40"
},
{
"type": "z-index",
"category": "z-index",
"value": "30",
"name": "zIndex30"
},
{
"type": "z-index",
"category": "z-index",
"value": "20",
"name": "zIndex20"
},
{
"type": "z-index",
"category": "z-index",
"value": "10",
"name": "zIndex10"
},
{
"type": "string",
"category": "color-scheme",
"value": "dark",
"name": "colorScheme"
}
]
}