@twilio-paste/design-tokens

{ "properties": [ { "type": "color", "category": "background-color", "value": "rgb(231, 228, 249)", "comment": "User avatar background color.", "name": "colorBackgroundUser" }, { "type": "color", "category": "background-color", "value": "rgb(220, 242, 234)", "comment": "Trial account background color.", "name": "colorBackgroundTrial" }, { "type": "color", "category": "background-color", "value": "rgb(255, 239, 210)", "comment": "Subaccount background color.", "name": "colorBackgroundSubaccount" }, { "type": "color", "category": "background-color", "value": "rgb(31, 61, 153)", "comment": "Stronger background for primary actions or highlights.", "name": "colorBackgroundPrimaryStronger" }, { "type": "color", "category": "background-color", "value": "rgb(125, 40, 40)", "comment": "Stronger background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveStronger" }, { "type": "color", "category": "background-color", "value": "rgb(235, 240, 255)", "comment": "Weaker background for primary actions or highlights.", "name": "colorBackgroundPrimaryWeaker" }, { "type": "color", "category": "background-color", "value": "rgb(249, 218, 218)", "comment": "Weaker background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveWeaker" }, { "type": "color", "category": "background-color", "value": "rgb(222, 117, 72)", "comment": "Warning background color", "name": "colorBackgroundWarning" }, { "type": "color", "category": "background-color", "value": "rgb(253, 247, 244)", "comment": "Weakest warning background color.", "name": "colorBackgroundWarningWeakest" }, { "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": "colorBackgroundInverseStrong" }, { "type": "color", "category": "background-color", "value": "rgb(231, 228, 249)", "comment": "Background color for indicating a new status.", "name": "colorBackgroundNew" }, { "type": "color", "category": "background-color", "value": "rgb(230, 232, 240)", "comment": "Strong default background color.", "name": "colorBackgroundStrong" }, { "type": "color", "category": "background-color", "value": "rgb(250, 247, 253)", "comment": "Weakest background color for indicating a new status.", "name": "colorBackgroundNewWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(209, 67, 67)", "comment": "Background color used for destructive actions or highlights.", "name": "colorBackgroundDestructive" }, { "type": "color", "category": "background-color", "value": "rgb(249, 250, 252)", "comment": "Weak default background color.", "name": "colorBackgroundWeak" }, { "type": "color", "category": "background-color", "value": "rgb(51, 102, 255)", "comment": "Background for primary actions or highlights.", "name": "colorBackgroundPrimary" }, { "type": "color", "category": "background-color", "value": "rgb(243, 246, 255)", "comment": "Weakest background for primary actions or highlights.", "name": "colorBackgroundPrimaryWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(222, 117, 72)", "comment": "Background color used to represent an entity or person as \"busy\".", "name": "colorBackgroundBusy" }, { "type": "color", "category": "background-color", "value": "rgb(82, 189, 148)", "comment": "Success background color.", "name": "colorBackgroundSuccess" }, { "type": "color", "category": "background-color", "value": "rgb(253, 244, 244)", "comment": "Weakest background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(193, 196, 214)", "comment": "Color used to represent an entity or person as \"offline\".", "name": "colorBackgroundOffline" }, { "type": "color", "category": "background-color", "value": "rgb(250, 251, 255)", "comment": "Background color for alternative striped rows.", "name": "colorBackgroundRowStriped" }, { "type": "color", "category": "background-color", "value": "rgb(12, 30, 86)", "comment": "Strongest background for primary actions or highlights.", "name": "colorBackgroundPrimaryStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(238, 248, 244)", "comment": "Weakest success background color.", "name": "colorBackgroundSuccessWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(79, 21, 21)", "comment": "Strongest background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(167, 54, 54)", "comment": "Strong error background color.", "name": "colorBackgroundErrorStrong" }, { "type": "color", "category": "background-color", "value": "rgb(3, 11, 93)", "comment": "Strong primary brand background, accessible with inverse text.", "name": "colorBackgroundBrandStrong" }, { "type": "color", "category": "background-color", "value": "rgb(71, 77, 102)", "comment": "Primary brand background, accessible with inverse text.", "name": "colorBackgroundBrand" }, { "type": "color", "category": "background-color", "value": "rgb(209, 67, 67)", "comment": "Error background color.", "name": "colorBackgroundError" }, { "type": "color", "category": "background-color", "value": "rgb(244, 246, 250)", "comment": "Weakest neutral background color.", "name": "colorBackgroundNeutralWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(82, 189, 148)", "comment": "Background color used to represent an entity or person as \"available\".", "name": "colorBackgroundAvailable" }, { "type": "color", "category": "background-color", "value": "rgb(253, 244, 244)", "comment": "Weakest error background color.", "name": "colorBackgroundErrorWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(235, 86, 86)", "comment": "Background color used to represent required form fields.", "name": "colorBackgroundRequired" }, { "type": "color", "category": "background-color", "value": "rgb(49, 12, 12)", "comment": "Strongest error background color.", "name": "colorBackgroundErrorStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(248, 247, 253)", "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.", "name": "colorBackgroundDecorative40Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(105, 111, 140)", "comment": "Stronger inverse background color for any container. Must be used on color-background-body-inverse.", "name": "colorBackgroundInverseStronger" }, { "type": "color", "category": "background-color", "value": "rgb(238, 248, 244)", "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.", "name": "colorBackgroundDecorative30Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(255, 255, 255)", "comment": "Background color used for the main page body.", "name": "colorBackgroundBody" }, { "type": "color", "category": "background-color", "value": "rgb(41, 82, 204)", "comment": "Strong background for primary actions or highlights.", "name": "colorBackgroundPrimaryStrong" }, { "type": "color", "category": "background-color", "value": "rgb(243, 246, 255)", "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.", "name": "colorBackgroundDecorative20Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(167, 54, 54)", "comment": "Strong background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveStrong" }, { "type": "color", "category": "background-color", "value": "rgb(244, 182, 182)", "comment": "Weak background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveWeak" }, { "type": "color", "category": "background-color", "value": "rgb(244, 246, 250)", "comment": "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.", "name": "colorBackgroundDecorative10Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(244, 246, 250)", "comment": "Default background color for any container.", "name": "colorBackground" }, { "type": "color", "category": "background-color", "value": "rgb(214, 224, 255)", "comment": "Weak background for primary actions or highlights.", "name": "colorBackgroundPrimaryWeak" }, { "type": "color", "category": "background-color", "value": "rgb(193, 196, 214)", "comment": "Stronger default background color.", "name": "colorBackgroundStronger" }, { "type": "color", "category": "background-color", "value": "rgb(82, 189, 148)", "comment": "Highlight brand background, accessible with black text.", "name": "colorBackgroundBrandHighlight" }, { "type": "color", "category": "background-color", "value": "rgb(220, 242, 234)", "comment": "Weakest background color used for brand highlights.", "name": "colorBackgroundBrandHighlightWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(105, 111, 140)", "comment": "Strongest default background color.", "name": "colorBackgroundStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(16, 24, 64)", "comment": "Inverse background color used for the main page body.", "name": "colorBackgroundBodyInverse" }, { "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": "colorBackgroundInverse" }, { "type": "color", "category": "background-color", "value": "rgba(71, 77, 102, 0.64)", "comment": "Default background for overlays.", "name": "colorBackgroundOverlay" }, { "type": "color", "category": "background-color", "value": "rgb(209, 67, 67)", "comment": "Color used to represent an entity or person as \"unavailable\".", "name": "colorBackgroundUnavailable" }, { "type": "color", "category": "background-color", "value": "rgb(125, 40, 40)", "comment": "Stronger error background color.", "name": "colorBackgroundErrorStronger" }, { "type": "color", "category": "background-color", "value": "rgb(6, 3, 58)", "comment": "Stronger primary brand background, accessible with inverse text.", "name": "colorBackgroundBrandStronger" }, { "type": "color", "category": "border-color", "value": "rgb(125, 40, 40)", "comment": "Stronger error border color", "name": "colorBorderErrorStronger" }, { "type": "color", "category": "border-color", "value": "rgb(235, 172, 145)", "comment": "Weak warning border color", "name": "colorBorderWarningWeak" }, { "type": "color", "category": "border-color", "value": "rgb(231, 228, 249)", "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.", "name": "colorBorderDecorative40Weaker" }, { "type": "color", "category": "border-color", "value": "rgb(244, 182, 182)", "comment": "Weaker error border color", "name": "colorBorderErrorWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(231, 220, 250)", "comment": "User avatar border color.", "name": "colorBorderUser" }, { "type": "color", "category": "border-color", "value": "rgb(214, 224, 255)", "comment": "Weaker neutral border color", "name": "colorBorderNeutralWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(222, 117, 72)", "comment": "Warning border color", "name": "colorBorderWarning" }, { "type": "color", "category": "border-color", "value": "rgb(220, 242, 234)", "comment": "Weaker success border color", "name": "colorBorderSuccessWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(31, 61, 153)", "comment": "Stronger primary border color", "name": "colorBorderPrimaryStronger" }, { "type": "color", "category": "border-color", "value": "rgb(125, 40, 40)", "comment": "Stronger destructive hover border color", "name": "colorBorderDestructiveStronger" }, { "type": "color", "category": "border-color", "value": "rgb(248, 227, 218)", "comment": "Weakest warning border color", "name": "colorBorderWarningWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(214, 224, 255)", "comment": "Weaker primary border color", "name": "colorBorderPrimaryWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(249, 218, 218)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(231, 228, 249)", "comment": "Weaker border color for something designated as new", "name": "colorBorderNewWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(209, 67, 67)", "comment": "Destructive border color", "name": "colorBorderDestructive" }, { "type": "color", "category": "border-color", "value": "rgb(225, 227, 234)", "comment": "Strong border on inverse backgrounds. Must be used on color-background-body-inverse.", "uicontrol_contrast_pairing": [ "color-background-body-inverse" ], "name": "colorBorderInverseStrong" }, { "type": "color", "category": "border-color", "value": "rgb(51, 102, 255)", "comment": "Primary border color", "name": "colorBorderPrimary" }, { "type": "color", "category": "border-color", "value": "rgb(235, 240, 255)", "comment": "Weakest primary border color", "name": "colorBorderPrimaryWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(82, 189, 148)", "comment": "Success border color", "name": "colorBorderSuccess" }, { "type": "color", "category": "border-color", "value": "rgb(253, 244, 244)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(49, 12, 12)", "comment": "Strongest destructive hover border color", "name": "colorBorderDestructiveStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(12, 30, 86)", "comment": "Strongest primary border color", "name": "colorBorderPrimaryStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(238, 248, 244)", "comment": "Weakest success border color", "name": "colorBorderSuccessWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(242, 200, 182)", "comment": "Weaker warning border color", "name": "colorBorderWarningWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(143, 149, 178)", "comment": "Strong border color", "name": "colorBorderStrong" }, { "type": "color", "category": "border-color", "value": "rgb(230, 232, 240)", "comment": "Weak border color", "name": "colorBorderWeak" }, { "type": "color", "category": "border-color", "value": "rgb(51, 102, 255)", "comment": "Neutral border color", "name": "colorBorderNeutral" }, { "type": "color", "category": "border-color", "value": "rgb(209, 67, 67)", "comment": "Error border color", "name": "colorBorderError" }, { "type": "color", "category": "border-color", "value": "rgb(249, 218, 218)", "comment": "Weakest error border color", "name": "colorBorderErrorWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(49, 12, 12)", "comment": "Strongest error border color", "name": "colorBorderErrorStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(167, 54, 54)", "comment": "Strong error border color", "name": "colorBorderErrorStrong" }, { "type": "color", "category": "border-color", "value": "rgb(238, 145, 145)", "comment": "Weak error border color", "name": "colorBorderErrorWeak" }, { "type": "color", "category": "border-color", "value": "rgb(157, 181, 255)", "comment": "Weak neutral border color", "name": "colorBorderNeutralWeak" }, { "type": "color", "category": "border-color", "value": "rgb(216, 218, 229)", "comment": "Default border color", "name": "colorBorder" }, { "type": "color", "category": "border-color", "value": "rgb(255, 255, 255)", "comment": "Weakest border color", "name": "colorBorderWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(244, 244, 246)", "comment": "Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.", "uicontrol_contrast_pairing": [ "color-background-body-inverse" ], "name": "colorBorderInverseStronger" }, { "type": "color", "category": "border-color", "value": "rgb(57, 71, 98)", "comment": "Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.", "name": "colorBorderInverseWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(163, 230, 205)", "comment": "Weak success border color", "name": "colorBorderSuccessWeak" }, { "type": "color", "category": "border-color", "value": "rgb(41, 82, 204)", "comment": "Strong primary border color", "name": "colorBorderPrimaryStrong" }, { "type": "color", "category": "border-color", "value": "rgb(136, 145, 170)", "comment": "Border on inverse backgrounds. Must be used on color-background-body-inverse.", "uicontrol_contrast_pairing": [ "color-background-body-inverse" ], "name": "colorBorderInverse" }, { "type": "color", "category": "border-color", "value": "rgb(167, 54, 54)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveStrong" }, { "type": "color", "category": "border-color", "value": "rgb(157, 181, 255)", "comment": "Weak primary border color", "name": "colorBorderPrimaryWeak" }, { "type": "color", "category": "border-color", "value": "rgb(31, 48, 76)", "comment": "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.", "name": "colorBorderInverseWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(244, 182, 182)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveWeak" }, { "type": "color", "category": "border-color", "value": "rgb(255, 255, 255)", "comment": "Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.", "uicontrol_contrast_pairing": [ "color-background-body-inverse" ], "name": "colorBorderInverseStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(237, 239, 245)", "comment": "Weaker border color", "name": "colorBorderWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(216, 218, 229)", "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.", "name": "colorBorderDecorative10Weaker" }, { "type": "color", "category": "border-color", "value": "rgb(214, 224, 255)", "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.", "name": "colorBorderDecorative20Weaker" }, { "type": "color", "category": "border-color", "value": "rgb(238, 248, 244)", "comment": "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.", "name": "colorBorderDecorative30Weaker" }, { "type": "size", "category": "radius", "value": "0", "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 #D0CAF4", "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 #fff1b3", "comment": "Shadow border for subaccount badge.", "name": "shadowBorderSubaccount" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #7D2828", "comment": "Stronger shadow border for destructive interactions", "name": "shadowBorderDestructiveStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #d1fae0", "comment": "Weaker shadow border for success inputs.", "name": "shadowBorderSuccessWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #5817bd", "comment": "Shadow border for the sidebar beta badge.", "name": "shadowBorderInverseNewWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #1F3D99", "comment": "Stronger shadow border for inputs active.", "name": "shadowBorderPrimaryStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #F2C8B6", "comment": "Weaker bottom shadow border warning warning status", "name": "shadowBorderBottomWarningWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #F9DADA", "comment": "Weaker shadow border for destructive interactions.", "name": "shadowBorderDestructiveWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #D6E0FF", "comment": "Weaker shadow border for primary interactions.", "name": "shadowBorderPrimaryWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e7dcfa", "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 #fddcc4", "comment": "Weaker shadow border for warning inputs.", "name": "shadowBorderWarningWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #8F95B2", "comment": "Strong shadow border for inputs.", "name": "shadowBorderStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff", "comment": "Shadow for focus ring on interactive elements.", "name": "shadowFocus" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #E6E8F0", "comment": "Weak shadow border for disabled inputs.", "name": "shadowBorderWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 4px rgba(255, 255, 255, 0.4)", "comment": "Shadow for focus ring on interactive elements on inverse backgrounds.", "name": "shadowFocusInverse" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #3366FF", "comment": "Default shadow border for primary interactions.", "name": "shadowBorderPrimary" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #D14343", "comment": "Shadow border for destructive interactions.", "name": "shadowBorderDestructive" }, { "type": "shadow", "category": "box-shadow", "value": "0 16px 24px 4px rgba(0, 0, 0, 0.5)", "comment": "High elevation default shadow.", "name": "shadowHigh" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #A73636", "comment": "Shadow border for error inputs hover.", "name": "shadowBorderErrorStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #0C1E56", "comment": "Strongest shadow border for inputs active.", "name": "shadowBorderPrimaryStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #310C0C", "comment": "Strongest shadow border for destructive interactions", "name": "shadowBorderDestructiveStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #F4B6B6", "comment": "Shadow border for inverse error inputs.", "name": "shadowBorderErrorWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #D14343", "comment": "Shadow border for error inputs.", "name": "shadowBorderError" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #D8DAE5", "comment": "Weaker bottom shadow border for decorative 10", "name": "shadowBorderBottomDecorative10Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #006dfa", "comment": "Bottom shadow border for primary status", "name": "shadowBorderBottomPrimary" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #D6E0FF", "comment": "Weaker bottom shadow border for decorative 20", "name": "shadowBorderBottomDecorative20Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #f4f4f6", "comment": "Stronger shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #310c0c", "comment": "Strongest shadow border for error inputs hover.", "name": "shadowBorderErrorStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #A73636", "comment": "Strong shadow border for destructive interactions", "name": "shadowBorderDestructiveStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #394762", "comment": "Weaker shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #DCF2EA", "comment": "Weaker bottom shadow border for decorative 30", "name": "shadowBorderBottomDecorative30Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #2952CC", "comment": "Strong shadow border for inputs hover.", "name": "shadowBorderPrimaryStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #9DB5FF", "comment": "Weaker shadow border for primary interactions.", "name": "shadowBorderPrimaryWeak" }, { "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": "shadowFocusShadowBorder" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #D0CAF4", "comment": "Weaker bottom shadow border for decorative 40", "name": "shadowBorderBottomDecorative40Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #F4B6B6", "comment": "Weak shadow border for destructive interactions.", "name": "shadowBorderDestructiveWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #F4B6B6", "comment": "Weaker bottom shadow border for error status", "name": "shadowBorderBottomErrorWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #EDEFF5", "comment": "Weaker shadow border for disabled inputs.", "name": "shadowBorderWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #D8DAE5", "comment": "Shadow border for inputs.", "name": "shadowBorder" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #9DB5FF", "comment": "Weaker bottom shadow border for neutral status", "name": "shadowBorderBottomNeutralWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e1e3ea", "comment": "Weaker shadow border for decorative 10", "name": "shadowBorderDecorative10Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #cce4ff", "comment": "Weaker shadow border for decorative 20", "name": "shadowBorderDecorative20Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #ffdd35", "comment": "Bottom shadow border for subaccount badge", "name": "shadowBorderBottomSubaccount" }, { "type": "shadow", "category": "box-shadow", "value": "inset 0 0 0 2px #9DB5FF", "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 #d1fae0", "comment": "Weaker shadow border for decorative 30", "name": "shadowBorderDecorative30Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #1f304c", "comment": "Weakest shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseWeakest" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #5817bd", "comment": "Bottom shadow border for the sidebar beta badge", "name": "shadowBorderBottomInverseNewWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #DCF2EA", "comment": "Weaker bottom shadow border for success status", "name": "shadowBorderBottomSuccessWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e7dcfa", "comment": "Weaker shadow border for decorative 40", "name": "shadowBorderDecorative40Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #7D2828", "comment": "Shadow border for error inputs hover.", "name": "shadowBorderErrorStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 2px 4px 0 rgba(0, 0, 0, 0.4)", "comment": "Shadow for cards.", "name": "shadowCard" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #fccfcf", "comment": "Weaker shadow border for error inputs.", "name": "shadowBorderErrorWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #ffffff", "comment": "Strongest shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "inset 0 0 0 2px rgba(255, 255, 255, 0.4)", "comment": "Shadow for inset focus ring on interactive elements on inverse backgrounds.", "name": "shadowFocusInverseInset" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #8c5bd8", "comment": "Shadow border for user.", "name": "shadowBorderUser" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #cce4ff", "comment": "Weaker shadow border for neutral inputs.", "name": "shadowBorderNeutralWeaker" }, { "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": "fontFamilyText" }, { "category": "font", "type": "font", "value": "'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace", "name": "fontFamilyCode" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif", "name": "fontFamilyTextJapanese" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif", "name": "fontFamilyTextKorean" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif", "name": "fontFamilyTextChineseTraditional" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif", "name": "fontFamilyTextChineseSimplified" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", "name": "fontFamilyDisplay" }, { "category": "font-size", "type": "font-size", "value": "64", "name": "fontSize110" }, { "category": "font-size", "type": "font-size", "value": "48", "name": "fontSize100" }, { "category": "font-size", "type": "font-size", "value": "32", "name": "fontSize90" }, { "category": "font-size", "type": "font-size", "value": "32", "name": "fontSize80" }, { "category": "font-size", "type": "font-size", "value": "24", "name": "fontSize70" }, { "category": "font-size", "type": "font-size", "value": "20", "name": "fontSize60" }, { "category": "font-size", "type": "font-size", "value": "16", "name": "fontSize50" }, { "category": "font-size", "type": "font-size", "value": "14", "name": "fontSize40" }, { "category": "font-size", "type": "font-size", "value": "14", "name": "fontSize30" }, { "category": "font-size", "type": "font-size", "value": "12", "name": "fontSize20" }, { "category": "font-size", "type": "font-size", "value": "12", "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": "300", "comment": "Font weight for light weight", "name": "fontWeightLight" }, { "category": "font-weight", "type": "font-weight", "value": "400", "comment": "Font weight for normal weight", "name": "fontWeightNormal" }, { "category": "font-weight", "type": "font-weight", "value": "500", "comment": "Font weight for medium weight", "name": "fontWeightMedium" }, { "category": "font-weight", "type": "font-weight", "value": "600", "comment": "Font weight for semibold weight", "name": "fontWeightSemibold" }, { "category": "font-weight", "type": "font-weight", "value": "700", "comment": "Font weight for bold weight", "name": "fontWeightBold" }, { "category": "font-weight", "type": "font-weight", "value": "800", "comment": "Font weight for extrabold weight", "name": "fontWeightExtrabold" }, { "category": "line-height", "type": "number", "value": "0", "comment": "Constant line-height token for line-height 0", "name": "lineHeight0" }, { "category": "line-height", "type": "number", "value": "64", "comment": "Constant line-height token for line-height 110", "name": "lineHeight110" }, { "category": "line-height", "type": "number", "value": "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(243, 103, 43)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization10" }, { "type": "color", "category": "data-visualization", "value": "rgb(4, 162, 174)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization1" }, { "type": "color", "category": "data-visualization", "value": "rgb(209, 129, 0)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization2" }, { "type": "color", "category": "data-visualization", "value": "rgb(24, 65, 191)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization3" }, { "type": "color", "category": "data-visualization", "value": "rgb(122, 103, 233)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization4" }, { "type": "color", "category": "data-visualization", "value": "rgb(17, 167, 110)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization5" }, { "type": "color", "category": "data-visualization", "value": "rgb(10, 29, 123)", "comment": "Color used for data visualizations. Must be used in a sequence.", "name": "colorDataVisualization6"