@twilio-paste/design-tokens
Version:
Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.
1,722 lines • 147 kB
JSON
{
"aliases": {
"sky": {
"value": "#51A9E3"
},
"mint": {
"value": "#6ADDB2"
},
"saffron": {
"value": "#F2BE5A"
},
"white": {
"value": "#FFFFFF"
},
"amaranth-transparent-10": {
"value": "rgba(242, 47, 70, 0.1)"
},
"paper-accent": {
"value": "#FEF0E6"
},
"sun": {
"value": "#FF7A00"
},
"white-accent": {
"value": "#F6FBFE"
},
"ink-accent": {
"value": "#17243B"
},
"amaranth-accent": {
"value": "#F3465A"
},
"amaranth": {
"value": "#F22F46"
},
"black": {
"value": "#000000"
},
"palette-yellow-70": {
"value": "#c28e00"
},
"palette-blue-10": {
"value": "#ebf4ff"
},
"palette-green-05": {
"value": "#f5fdf8"
},
"palette-yellow-60": {
"value": "#e8b407"
},
"palette-gray-0-transparent-100": {
"value": "rgba(255, 255, 255, 1)"
},
"palette-blue-55": {
"value": "#006dfa"
},
"palette-yellow-50": {
"value": "#fad100"
},
"palette-gray-100-transparent-100": {
"value": "rgba(18, 28, 45, 1)"
},
"palette-red-100": {
"value": "#310c0c"
},
"palette-yellow-40": {
"value": "#ffdd35"
},
"palette-orange-100": {
"value": "#40130f"
},
"palette-purple-05": {
"value": "#faf7fd"
},
"palette-blue-60-transparent-100": {
"value": "rgba(2, 99, 224, 1)"
},
"palette-yellow-30": {
"value": "#ffe980"
},
"palette-blue-60-transparent-90": {
"value": "rgba(2, 99, 224, 0.9)"
},
"palette-orange-90": {
"value": "#541914"
},
"palette-red-90": {
"value": "#4a0b0b"
},
"palette-yellow-20": {
"value": "#fff1b3"
},
"palette-blue-60-transparent-80": {
"value": "rgba(2, 99, 224, 0.8)"
},
"palette-orange-80": {
"value": "#8d3118"
},
"palette-red-80": {
"value": "#750c0c"
},
"palette-yellow-10": {
"value": "#fffbea"
},
"palette-blue-60-transparent-70": {
"value": "rgba(2, 99, 224, 0.7)"
},
"palette-orange-70": {
"value": "#c35323"
},
"palette-blue-05": {
"value": "#f4f9ff"
},
"palette-gray-100-transparent-90": {
"value": "rgba(18, 28, 45, 0.9)"
},
"palette-gray-0-transparent-90": {
"value": "rgba(255, 255, 255, 0.9)"
},
"palette-red-70": {
"value": "#ad1111"
},
"palette-blue-60-transparent-60": {
"value": "rgba(2, 99, 224, 0.6)"
},
"palette-orange-60": {
"value": "#f47c22"
},
"palette-gray-100-transparent-80": {
"value": "rgba(18, 28, 45, 0.8)"
},
"palette-gray-0-transparent-80": {
"value": "rgba(255, 255, 255, 0.8)"
},
"palette-red-60": {
"value": "#d61f1f"
},
"palette-blue-60-transparent-50": {
"value": "rgba(2, 99, 224, 0.5)"
},
"palette-orange-50": {
"value": "#fa9950"
},
"palette-gray-100-transparent-70": {
"value": "rgba(18, 28, 45, 0.7)"
},
"palette-gray-0-transparent-70": {
"value": "rgba(255, 255, 255, 0.7)"
},
"palette-red-50": {
"value": "#eb5656"
},
"palette-blue-60-transparent-40": {
"value": "rgba(2, 99, 224, 0.4)"
},
"palette-orange-40": {
"value": "#ffb37a"
},
"palette-gray-100-transparent-60": {
"value": "rgba(18, 28, 45, 0.6)"
},
"palette-gray-0-transparent-60": {
"value": "rgba(255, 255, 255, 0.6)"
},
"palette-red-40": {
"value": "#f58a8a"
},
"palette-blue-60-transparent-30": {
"value": "rgba(2, 99, 224, 0.3)"
},
"palette-orange-30": {
"value": "#fac2a0"
},
"palette-gray-100-transparent-50": {
"value": "rgba(18, 28, 45, 0.5)"
},
"palette-yellow-100": {
"value": "#3d2106"
},
"palette-gray-0-transparent-50": {
"value": "rgba(255, 255, 255, 0.5)"
},
"palette-red-30": {
"value": "#f6b1b1"
},
"palette-blue-60-transparent-20": {
"value": "rgba(2, 99, 224, 0.2)"
},
"palette-orange-20": {
"value": "#fddcc4"
},
"palette-gray-100-transparent-40": {
"value": "rgba(18, 28, 45, 0.4)"
},
"palette-gray-0-transparent-40": {
"value": "rgba(255, 255, 255, 0.4)"
},
"palette-red-20": {
"value": "#fccfcf"
},
"palette-blue-60-transparent-10": {
"value": "rgba(2, 99, 224, 0.1)"
},
"palette-yellow-05": {
"value": "#fffdf4"
},
"palette-orange-10": {
"value": "#fef5ee"
},
"palette-orange-65": {
"value": "#e36a19"
},
"palette-gray-100-transparent-30": {
"value": "rgba(18, 28, 45, 0.3)"
},
"palette-gray-0-transparent-30": {
"value": "rgba(255, 255, 255, 0.3)"
},
"palette-red-10": {
"value": "#feecec"
},
"palette-red-65": {
"value": "#c72323"
},
"palette-gray-100-transparent-20": {
"value": "rgba(18, 28, 45, 0.2)"
},
"palette-gray-0-transparent-20": {
"value": "rgba(255, 255, 255, 0.2)"
},
"palette-gray-100-transparent-10": {
"value": "rgba(18, 28, 45, 0.1)"
},
"palette-gray-0-transparent-10": {
"value": "rgba(255, 255, 255, 0.1)"
},
"palette-gray-90": {
"value": "#1f304c"
},
"palette-blue-100-transparent-90": {
"value": "rgba(6, 3, 58, 0.9)"
},
"palette-blue-100": {
"value": "#06033a"
},
"palette-gray-80": {
"value": "#394762"
},
"palette-blue-100-transparent-80": {
"value": "rgba(6, 3, 58, 0.8)"
},
"palette-gray-70": {
"value": "#4b5671"
},
"palette-blue-100-transparent-70": {
"value": "rgba(6, 3, 58, 0.7)"
},
"palette-gray-60": {
"value": "#606b85"
},
"palette-orange-05": {
"value": "#fdf7f4"
},
"palette-purple-100": {
"value": "#160433"
},
"palette-blue-100-transparent-60": {
"value": "rgba(6, 3, 58, 0.6)"
},
"palette-red-05": {
"value": "#fef5f5"
},
"palette-gray-50": {
"value": "#8891aa"
},
"palette-green-90": {
"value": "#0d3a1f"
},
"palette-blue-100-transparent-50": {
"value": "rgba(6, 3, 58, 0.5)"
},
"palette-gray-40": {
"value": "#aeb2c1"
},
"palette-green-80": {
"value": "#0b602d"
},
"palette-blue-100-transparent-40": {
"value": "rgba(6, 3, 58, 0.4)"
},
"palette-gray-30": {
"value": "#cacdd8"
},
"palette-green-70": {
"value": "#0e7c3a"
},
"palette-blue-100-transparent-30": {
"value": "rgba(6, 3, 58, 0.3)"
},
"palette-green-100": {
"value": "#052912"
},
"palette-gray-20": {
"value": "#e1e3ea"
},
"palette-green-60": {
"value": "#14b053"
},
"palette-purple-90": {
"value": "#22094a"
},
"palette-blue-100-transparent-20": {
"value": "rgba(6, 3, 58, 0.2)"
},
"palette-gray-10": {
"value": "#f4f4f6"
},
"palette-green-50": {
"value": "#36d576"
},
"palette-purple-80": {
"value": "#380e78"
},
"palette-blue-100-transparent-10": {
"value": "rgba(6, 3, 58, 0.1)"
},
"palette-blue-90": {
"value": "#030b5d"
},
"palette-green-40": {
"value": "#7beaa5"
},
"palette-purple-70": {
"value": "#5817bd"
},
"palette-gray-110": {
"value": "#0F1621"
},
"palette-gray-0": {
"value": "#ffffff"
},
"palette-blue-100-transparent-100": {
"value": "rgba(6, 3, 58, 1)"
},
"palette-green-30": {
"value": "#a2f6c3"
},
"palette-purple-60": {
"value": "#6d2ed1"
},
"palette-gray-100": {
"value": "#121c2d"
},
"palette-blue-80": {
"value": "#001489"
},
"palette-green-20": {
"value": "#d1fae0"
},
"palette-purple-50": {
"value": "#8c5bd8"
},
"palette-blue-70": {
"value": "#043cb5"
},
"palette-green-10": {
"value": "#edfdf3"
},
"palette-purple-40": {
"value": "#a67fe3"
},
"palette-blue-60": {
"value": "#0263e0"
},
"palette-purple-30": {
"value": "#c8aff0"
},
"palette-blue-50": {
"value": "#008cff"
},
"palette-gray-05": {
"value": "#f9f9fa"
},
"palette-purple-20": {
"value": "#e7dcfa"
},
"palette-blue-40": {
"value": "#66b3ff"
},
"palette-purple-10": {
"value": "#f5f0fc"
},
"palette-yellow-90": {
"value": "#543308"
},
"palette-blue-30": {
"value": "#99cdff"
},
"palette-yellow-80": {
"value": "#855c15"
},
"palette-blue-20": {
"value": "#cce4ff"
},
"border-radius-0": {
"value": "0"
},
"border-radius-10": {
"value": "2px"
},
"border-radius-20": {
"value": "4px"
},
"border-radius-30": {
"value": "8px"
},
"border-radius-circle": {
"value": "50%"
},
"border-radius-pill": {
"value": "100px"
},
"border-width-0": {
"value": "0"
},
"border-width-10": {
"value": "1px"
},
"border-width-20": {
"value": "2px"
},
"border-width-30": {
"value": "4px"
},
"border-width-40": {
"value": "8px"
},
"offset-90": {
"value": "32px"
},
"offset-80": {
"value": "24px"
},
"offset-70": {
"value": "20px"
},
"offset-60": {
"value": "16px"
},
"offset-50": {
"value": "12px"
},
"offset-0": {
"value": "0"
},
"offset-40": {
"value": "8px"
},
"offset-30": {
"value": "6px"
},
"offset-20": {
"value": "4px"
},
"offset-10": {
"value": "2px"
},
"space-70": {
"value": "1.5rem"
},
"space-60": {
"value": "1.25rem"
},
"space-190": {
"value": "4.5rem"
},
"space-50": {
"value": "1rem"
},
"space-180": {
"value": "4.25rem"
},
"space-40": {
"value": "0.75rem"
},
"space-170": {
"value": "4rem"
},
"space-30": {
"value": "0.5rem"
},
"space-160": {
"value": "3.75rem"
},
"space-20": {
"value": "0.25rem"
},
"space-150": {
"value": "3.5rem"
},
"space-10": {
"value": "0.125rem"
},
"space-140": {
"value": "3.25rem"
},
"space-130": {
"value": "3rem"
},
"space-120": {
"value": "2.75rem"
},
"space-110": {
"value": "2.5rem"
},
"space-0": {
"value": "0"
},
"space-100": {
"value": "2.25rem"
},
"space-200": {
"value": "4.75rem"
},
"space-90": {
"value": "2rem"
},
"space-80": {
"value": "1.75rem"
},
"shadow-elevation-0": {
"value": "none"
},
"shadow-elevation-10": {
"value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)"
},
"shadow-elevation-20": {
"value": "0 4px 16px 0 rgba(18, 28, 45, 0.2)"
},
"shadow-elevation-30": {
"value": "0 16px 24px 0 rgba(18, 28, 45, 0.2)"
},
"font-family-10": {
"value": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
},
"font-family-20": {
"value": "'TwilioSansMono', Courier, monospace"
},
"font-family-30": {
"value": "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif"
},
"font-family-40": {
"value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif"
},
"font-family-50": {
"value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif"
},
"font-family-60": {
"value": "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif"
},
"font-size-110": {
"value": "3rem"
},
"font-size-100": {
"value": "2.5rem"
},
"font-size-90": {
"value": "2rem"
},
"font-size-80": {
"value": "1.75rem"
},
"font-size-70": {
"value": "1.5rem"
},
"font-size-60": {
"value": "1.25rem"
},
"font-size-50": {
"value": "1.125rem"
},
"font-size-40": {
"value": "1rem"
},
"font-size-30": {
"value": "0.875rem"
},
"font-size-20": {
"value": "0.75rem"
},
"font-size-10": {
"value": "0.625rem"
},
"font-size-display-30": {
"value": "4rem"
},
"font-size-display-20": {
"value": "3rem"
},
"font-size-display-10": {
"value": "2rem"
},
"font-weight-light": {
"value": 300
},
"font-weight-normal": {
"value": 400
},
"font-weight-medium": {
"value": 500
},
"font-weight-semibold": {
"value": 600
},
"font-weight-bold": {
"value": 700
},
"font-weight-extrabold": {
"value": 800
},
"line-height-0": {
"value": "0"
},
"line-height-110": {
"value": "4rem"
},
"line-height-90": {
"value": "2.75rem"
},
"line-height-100": {
"value": "3.25rem"
},
"line-height-80": {
"value": "2.5rem"
},
"line-height-70": {
"value": "2rem"
},
"line-height-60": {
"value": "1.75rem"
},
"line-height-50": {
"value": "1.75rem"
},
"line-height-40": {
"value": "1.5rem"
},
"line-height-30": {
"value": "1.25rem"
},
"line-height-20": {
"value": "1.25rem"
},
"line-height-10": {
"value": "1rem"
},
"line-height-05": {
"value": "0.75rem"
},
"line-height-display-30": {
"value": "5rem"
},
"line-height-display-20": {
"value": "3.75rem"
},
"line-height-display-10": {
"value": "2.5rem"
},
"size-square-40": {
"value": "0.75rem"
},
"size-square-30": {
"value": "0.5rem"
},
"size-square-20": {
"value": "0.25rem"
},
"size-90": {
"value": "57.5rem"
},
"size-square-10": {
"value": "0.125rem"
},
"size-120": {
"value": "77rem"
},
"size-80": {
"value": "51rem"
},
"size-0": {
"value": "0"
},
"size-110": {
"value": "70.5rem"
},
"size-square-190": {
"value": "4.5rem"
},
"size-70": {
"value": "44.5rem"
},
"size-100": {
"value": "64rem"
},
"size-square-180": {
"value": "4.25rem"
},
"size-60": {
"value": "38rem"
},
"size-square-170": {
"value": "4rem"
},
"size-sidebar-compact": {
"value": "4.75rem"
},
"size-square-25": {
"value": "0.375rem"
},
"size-square-160": {
"value": "3.75rem"
},
"size-50": {
"value": "31.5rem"
},
"size-square-150": {
"value": "3.5rem"
},
"size-40": {
"value": "25rem"
},
"size-square-140": {
"value": "3.25rem"
},
"size-30": {
"value": "18.5rem"
},
"size-topbar": {
"value": "4.75rem"
},
"size-square-130": {
"value": "3rem"
},
"size-20": {
"value": "12rem"
},
"size-square-120": {
"value": "2.75rem"
},
"size-10": {
"value": "5.5rem"
},
"size-square-110": {
"value": "2.5rem"
},
"size-square-0": {
"value": "0"
},
"size-square-100": {
"value": "2.25rem"
},
"size-square-200": {
"value": "4.75rem"
},
"size-sidebar": {
"value": "15rem"
},
"size-square-90": {
"value": "2rem"
},
"size-square-80": {
"value": "1.75rem"
},
"size-square-70": {
"value": "1.5rem"
},
"size-square-60": {
"value": "1.25rem"
},
"size-square-50": {
"value": "1rem"
},
"z-index-0": {
"value": "0"
},
"z-index-90": {
"value": 90
},
"z-index-80": {
"value": 80
},
"z-index-70": {
"value": 70
},
"z-index-60": {
"value": 60
},
"z-index-50": {
"value": 50
},
"z-index-40": {
"value": 40
},
"z-index-30": {
"value": 30
},
"z-index-20": {
"value": 20
},
"z-index-10": {
"value": 10
}
},
"props": {
"color-background-user": {
"type": "color",
"category": "background-color",
"value": "#c8aff0",
"comment": "Background color used for user avatars.",
"originalValue": "{!palette-purple-30}",
"name": "color-background-user"
},
"color-background-trial": {
"type": "color",
"category": "background-color",
"value": "#d1fae0",
"comment": "Background color used for trial accounts.",
"originalValue": "{!palette-green-20}",
"name": "color-background-trial"
},
"color-background-subaccount": {
"type": "color",
"category": "background-color",
"value": "#fffbea",
"comment": "Background color used for subaccounts.",
"originalValue": "{!palette-yellow-10}",
"name": "color-background-subaccount"
},
"color-background-primary-stronger": {
"type": "color",
"category": "background-color",
"value": "#030b5d",
"comment": "Stronger background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-90}",
"name": "color-background-primary-stronger"
},
"color-background-destructive-stronger": {
"type": "color",
"category": "background-color",
"value": "#4a0b0b",
"comment": "Stronger background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-90}",
"name": "color-background-destructive-stronger"
},
"color-background-primary-weaker": {
"type": "color",
"category": "background-color",
"value": "#cce4ff",
"comment": "Weaker background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-20}",
"name": "color-background-primary-weaker"
},
"color-background-destructive-weaker": {
"type": "color",
"category": "background-color",
"value": "#fccfcf",
"comment": "Weaker background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-20}",
"name": "color-background-destructive-weaker"
},
"color-background-warning": {
"type": "color",
"category": "background-color",
"value": "#f47c22",
"comment": "Background color used for warning alerts and toasts.",
"originalValue": "{!palette-orange-60}",
"name": "color-background-warning"
},
"color-background-warning-weakest": {
"type": "color",
"category": "background-color",
"value": "#fef5ee",
"comment": "Weakest background color used for warning alerts and toasts.",
"originalValue": "{!palette-orange-10}",
"name": "color-background-warning-weakest"
},
"color-background-inverse-strong": {
"type": "color",
"category": "background-color",
"value": "#394762",
"comment": "Strong inverse background color used for containers.",
"originalValue": "{!palette-gray-80}",
"name": "color-background-inverse-strong"
},
"color-background-new": {
"type": "color",
"category": "background-color",
"value": "#f5f0fc",
"comment": "Background color used to represent a new status.",
"originalValue": "{!palette-purple-10}",
"name": "color-background-new"
},
"color-background-strong": {
"type": "color",
"category": "background-color",
"value": "#e1e3ea",
"comment": "Strong background color used for containers.",
"originalValue": "{!palette-gray-20}",
"name": "color-background-strong"
},
"color-background-new-weakest": {
"type": "color",
"category": "background-color",
"value": "#faf7fd",
"comment": "Weakest background color for indicating a new status.",
"originalValue": "{!palette-purple-05}",
"name": "color-background-new-weakest"
},
"color-background-destructive": {
"type": "color",
"category": "background-color",
"value": "#d61f1f",
"comment": "Background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-60}",
"name": "color-background-destructive"
},
"color-background-weak": {
"type": "color",
"category": "background-color",
"value": "#f9f9fa",
"comment": "Weak background color used for containers.",
"originalValue": "{!palette-gray-05}",
"name": "color-background-weak"
},
"color-background-primary": {
"type": "color",
"category": "background-color",
"value": "#0263e0",
"comment": "Background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-60}",
"name": "color-background-primary"
},
"color-background-primary-weakest": {
"type": "color",
"category": "background-color",
"value": "#ebf4ff",
"comment": "Weakest background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-10}",
"name": "color-background-primary-weakest"
},
"color-background-busy": {
"type": "color",
"category": "background-color",
"value": "#f47c22",
"comment": "Background color used to represent an entity or person as \"busy\".",
"originalValue": "{!palette-orange-60}",
"name": "color-background-busy"
},
"color-background-success": {
"type": "color",
"category": "background-color",
"value": "#14b053",
"comment": "Background color used for success alerts and toasts.",
"originalValue": "{!palette-green-60}",
"name": "color-background-success"
},
"color-background-destructive-weakest": {
"type": "color",
"category": "background-color",
"value": "#feecec",
"comment": "Weakest background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-10}",
"name": "color-background-destructive-weakest"
},
"color-background-offline": {
"type": "color",
"category": "background-color",
"value": "#aeb2c1",
"comment": "Background color used to represent an entity or person as \"offline\".",
"originalValue": "{!palette-gray-40}",
"name": "color-background-offline"
},
"color-background-row-striped": {
"type": "color",
"category": "background-color",
"value": "#f4f4f6",
"comment": "Background color used for alternative striped rows.",
"originalValue": "{!palette-gray-10}",
"name": "color-background-row-striped"
},
"color-background-primary-strongest": {
"type": "color",
"category": "background-color",
"value": "#06033a",
"comment": "Strongest background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-100}",
"name": "color-background-primary-strongest"
},
"color-background-success-weakest": {
"type": "color",
"category": "background-color",
"value": "#edfdf3",
"comment": "Weakest background color used for success alerts and toasts.",
"originalValue": "{!palette-green-10}",
"name": "color-background-success-weakest"
},
"color-background-destructive-strongest": {
"type": "color",
"category": "background-color",
"value": "#310c0c",
"comment": "Strongest background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-100}",
"name": "color-background-destructive-strongest"
},
"color-background-error-strong": {
"type": "color",
"category": "background-color",
"value": "#750c0c",
"comment": "Strongest background color used for error alerts and toasts.",
"originalValue": "{!palette-red-80}",
"name": "color-background-error-strong"
},
"color-background-brand-strong": {
"type": "color",
"category": "background-color",
"value": "#030b5d",
"comment": "Strong primary brand background, accessible with inverse text.",
"originalValue": "{!palette-blue-90}",
"name": "color-background-brand-strong"
},
"color-background-brand": {
"type": "color",
"category": "background-color",
"value": "#001489",
"comment": "Primary brand background, accessible with inverse text.",
"originalValue": "{!palette-blue-80}",
"name": "color-background-brand"
},
"color-background-error": {
"type": "color",
"category": "background-color",
"value": "#d61f1f",
"comment": "Background color used for error alerts and toasts.",
"originalValue": "{!palette-red-60}",
"name": "color-background-error"
},
"color-background-neutral-weakest": {
"type": "color",
"category": "background-color",
"value": "#ebf4ff",
"comment": "Weakest background color used for neutral or default variants.",
"originalValue": "{!palette-blue-10}",
"name": "color-background-neutral-weakest"
},
"color-background-available": {
"type": "color",
"category": "background-color",
"value": "#14b053",
"comment": "Background color used to represent an entity or person as \"available\".",
"originalValue": "{!palette-green-60}",
"name": "color-background-available"
},
"color-background-error-weakest": {
"type": "color",
"category": "background-color",
"value": "#feecec",
"comment": "Weakest background color used for error alerts and toasts.",
"originalValue": "{!palette-red-10}",
"name": "color-background-error-weakest"
},
"color-background-required": {
"type": "color",
"category": "background-color",
"value": "#eb5656",
"comment": "Background color used to represent required form fields.",
"originalValue": "{!palette-red-50}",
"name": "color-background-required"
},
"color-background-error-strongest": {
"type": "color",
"category": "background-color",
"value": "#310c0c",
"comment": "Strongest error background color",
"originalValue": "{!palette-red-100}",
"name": "color-background-error-strongest"
},
"color-background-decorative-40-weakest": {
"type": "color",
"category": "background-color",
"value": "#f5f0fc",
"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.",
"originalValue": "{!palette-purple-10}",
"name": "color-background-decorative-40-weakest"
},
"color-background-inverse-stronger": {
"type": "color",
"category": "background-color",
"value": "#394762",
"comment": "Stronger inverse background color for any container. Must be used on color-background-body-inverse.",
"originalValue": "{!palette-gray-80}",
"name": "color-background-inverse-stronger"
},
"color-background-decorative-30-weakest": {
"type": "color",
"category": "background-color",
"value": "#edfdf3",
"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.",
"originalValue": "{!palette-green-10}",
"name": "color-background-decorative-30-weakest"
},
"color-background-body": {
"type": "color",
"category": "background-color",
"value": "#ffffff",
"comment": "Background color used for the main page body.",
"originalValue": "{!palette-gray-0}",
"name": "color-background-body"
},
"color-background-primary-strong": {
"type": "color",
"category": "background-color",
"value": "#001489",
"comment": "Strong background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-80}",
"name": "color-background-primary-strong"
},
"color-background-decorative-20-weakest": {
"type": "color",
"category": "background-color",
"value": "#ebf4ff",
"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.",
"originalValue": "{!palette-blue-10}",
"name": "color-background-decorative-20-weakest"
},
"color-background-destructive-strong": {
"type": "color",
"category": "background-color",
"value": "#750c0c",
"comment": "Strong background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-80}",
"name": "color-background-destructive-strong"
},
"color-background-destructive-weak": {
"type": "color",
"category": "background-color",
"value": "#f6b1b1",
"comment": "Weak background color used for destructive actions or highlights.",
"originalValue": "{!palette-red-30}",
"name": "color-background-destructive-weak"
},
"color-background-decorative-10-weakest": {
"type": "color",
"category": "background-color",
"value": "#f4f4f6",
"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.",
"originalValue": "{!palette-gray-10}",
"name": "color-background-decorative-10-weakest"
},
"color-background": {
"type": "color",
"category": "background-color",
"value": "#f4f4f6",
"comment": "Default background color for any container.",
"originalValue": "{!palette-gray-10}",
"name": "color-background"
},
"color-background-primary-weak": {
"type": "color",
"category": "background-color",
"value": "#99cdff",
"comment": "Weak background color used for primary actions or highlights.",
"originalValue": "{!palette-blue-30}",
"name": "color-background-primary-weak"
},
"color-background-stronger": {
"type": "color",
"category": "background-color",
"value": "#8891aa",
"comment": "Stronger background color used for containers.",
"originalValue": "{!palette-gray-50}",
"name": "color-background-stronger"
},
"color-background-brand-highlight": {
"type": "color",
"category": "background-color",
"value": "#F22F46",
"comment": "Highlight brand background, accessible with black text.",
"originalValue": "{!amaranth}",
"name": "color-background-brand-highlight"
},
"color-background-brand-highlight-weakest": {
"type": "color",
"category": "background-color",
"value": "rgba(242, 47, 70, 0.1)",
"comment": "Weakest background color used for brand highlights.",
"originalValue": "{!amaranth-transparent-10}",
"name": "color-background-brand-highlight-weakest"
},
"color-background-strongest": {
"type": "color",
"category": "background-color",
"value": "#4b5671",
"comment": "Strongest background color used for containers.",
"originalValue": "{!palette-gray-70}",
"name": "color-background-strongest"
},
"color-background-body-inverse": {
"type": "color",
"category": "background-color",
"value": "#121c2d",
"comment": "Inverse background color used for the main page body.",
"originalValue": "{!palette-gray-100}",
"name": "color-background-body-inverse"
},
"color-background-inverse": {
"type": "color",
"category": "background-color",
"value": "#1f304c",
"comment": "Inverse background color used for containers.",
"originalValue": "{!palette-gray-90}",
"name": "color-background-inverse"
},
"color-background-overlay": {
"type": "color",
"category": "background-color",
"value": "rgba(6, 3, 58, 0.4)",
"comment": "Background color used for overlays.",
"originalValue": "{!palette-blue-100-transparent-40}",
"name": "color-background-overlay"
},
"color-background-unavailable": {
"type": "color",
"category": "background-color",
"value": "#d61f1f",
"comment": "Background color used to represent an entity or person as \"unavailable\".",
"originalValue": "{!palette-red-60}",
"name": "color-background-unavailable"
},
"color-background-error-stronger": {
"type": "color",
"category": "background-color",
"value": "#4a0b0b",
"comment": "Stronger error background color",
"originalValue": "{!palette-red-90}",
"name": "color-background-error-stronger"
},
"color-background-brand-stronger": {
"type": "color",
"category": "background-color",
"value": "#06033a",
"comment": "Stronger primary brand background, accessible with inverse text.",
"originalValue": "{!palette-blue-100}",
"name": "color-background-brand-stronger"
},
"color-border-error-stronger": {
"type": "color",
"category": "border-color",
"value": "#4a0b0b",
"comment": "Stronger error border color",
"originalValue": "{!palette-red-90}",
"name": "color-border-error-stronger"
},
"color-border-warning-weak": {
"type": "color",
"category": "border-color",
"value": "#ffb37a",
"comment": "Weak warning border color",
"originalValue": "{!palette-orange-40}",
"name": "color-border-warning-weak"
},
"color-border-decorative-40-weaker": {
"type": "color",
"category": "border-color",
"value": "#e7dcfa",
"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.",
"originalValue": "{!palette-purple-20}",
"name": "color-border-decorative-40-weaker"
},
"color-border-error-weaker": {
"type": "color",
"category": "border-color",
"value": "#fccfcf",
"comment": "Weaker error border color",
"originalValue": "{!palette-red-20}",
"name": "color-border-error-weaker"
},
"color-border-user": {
"type": "color",
"category": "border-color",
"value": "#e7dcfa",
"comment": "User avatar border color.",
"originalValue": "{!palette-purple-20}",
"name": "color-border-user"
},
"color-border-neutral-weaker": {
"type": "color",
"category": "border-color",
"value": "#cce4ff",
"comment": "Weaker neutral border color",
"originalValue": "{!palette-blue-20}",
"name": "color-border-neutral-weaker"
},
"color-border-warning": {
"type": "color",
"category": "border-color",
"value": "#f47c22",
"comment": "Warning border color",
"originalValue": "{!palette-orange-60}",
"name": "color-border-warning"
},
"color-border-success-weaker": {
"type": "color",
"category": "border-color",
"value": "#d1fae0",
"comment": "Weaker success border color",
"originalValue": "{!palette-green-20}",
"name": "color-border-success-weaker"
},
"color-border-primary-stronger": {
"type": "color",
"category": "border-color",
"value": "#030b5d",
"comment": "Stronger primary border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-new",
"color-background-row-striped",
"color-background-primary-weak",
"color-background-primary-weaker",
"color-background-primary-weakest",
"color-background-destructive-weak",
"color-background-destructive-weaker",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-blue-90}",
"name": "color-border-primary-stronger"
},
"color-border-destructive-stronger": {
"type": "color",
"category": "border-color",
"value": "#4a0b0b",
"comment": "Stronger destructive hover border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-new",
"color-background-row-striped",
"color-background-primary-weak",
"color-background-primary-weaker",
"color-background-primary-weakest",
"color-background-destructive-weak",
"color-background-destructive-weaker",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-red-90}",
"name": "color-border-destructive-stronger"
},
"color-border-warning-weakest": {
"type": "color",
"category": "border-color",
"value": "#fef5ee",
"comment": "Weakest warning border color",
"originalValue": "{!palette-orange-10}",
"name": "color-border-warning-weakest"
},
"color-border-primary-weaker": {
"type": "color",
"category": "border-color",
"value": "#cce4ff",
"comment": "Weaker primary border color",
"originalValue": "{!palette-blue-20}",
"name": "color-border-primary-weaker"
},
"color-border-destructive-weaker": {
"type": "color",
"category": "border-color",
"value": "#fccfcf",
"comment": "Destructive focus border color",
"originalValue": "{!palette-red-20}",
"name": "color-border-destructive-weaker"
},
"color-border-new-weaker": {
"type": "color",
"category": "border-color",
"value": "#e7dcfa",
"comment": "Weaker border color for something designated as new",
"originalValue": "{!palette-purple-20}",
"name": "color-border-new-weaker"
},
"color-border-destructive": {
"type": "color",
"category": "border-color",
"value": "#d61f1f",
"comment": "Destructive border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-neutral-weakest",
"color-background-row-striped",
"color-background-primary-weakest",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-red-60}",
"name": "color-border-destructive"
},
"color-border-inverse-strong": {
"type": "color",
"category": "border-color",
"value": "#e1e3ea",
"comment": "Strong border on inverse backgrounds. Must be used on color-background-body-inverse.",
"uicontrol_contrast_pairing": [
"color-background-body-inverse"
],
"originalValue": "{!palette-gray-20}",
"name": "color-border-inverse-strong"
},
"color-border-primary": {
"type": "color",
"category": "border-color",
"value": "#0263e0",
"comment": "Primary border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-neutral-weakest",
"color-background-row-striped",
"color-background-primary-weakest",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-blue-60}",
"name": "color-border-primary"
},
"color-border-primary-weakest": {
"type": "color",
"category": "border-color",
"value": "#ebf4ff",
"comment": "Weakest primary border color",
"originalValue": "{!palette-blue-10}",
"name": "color-border-primary-weakest"
},
"color-border-success": {
"type": "color",
"category": "border-color",
"value": "#14b053",
"comment": "Success border color",
"originalValue": "{!palette-green-60}",
"name": "color-border-success"
},
"color-border-destructive-weakest": {
"type": "color",
"category": "border-color",
"value": "#feecec",
"comment": "Destructive focus border color",
"originalValue": "{!palette-red-10}",
"name": "color-border-destructive-weakest"
},
"color-border-destructive-strongest": {
"type": "color",
"category": "border-color",
"value": "#310c0c",
"comment": "Strongest destructive hover border color",
"originalValue": "{!palette-red-100}",
"name": "color-border-destructive-strongest"
},
"color-border-primary-strongest": {
"type": "color",
"category": "border-color",
"value": "#06033a",
"comment": "Strongest primary border color",
"originalValue": "{!palette-blue-100}",
"name": "color-border-primary-strongest"
},
"color-border-success-weakest": {
"type": "color",
"category": "border-color",
"value": "#edfdf3",
"comment": "Weakest success border color",
"originalValue": "{!palette-green-10}",
"name": "color-border-success-weakest"
},
"color-border-warning-weaker": {
"type": "color",
"category": "border-color",
"value": "#fddcc4",
"comment": "Weaker warning border color",
"originalValue": "{!palette-orange-20}",
"name": "color-border-warning-weaker"
},
"color-border-strong": {
"type": "color",
"category": "border-color",
"value": "#606b85",
"comment": "Strong border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-strong",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-new",
"color-background-row-striped",
"color-background-primary-weaker",
"color-background-primary-weakest",
"color-background-destructive-weaker",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-gray-60}",
"name": "color-border-strong"
},
"color-border-weak": {
"type": "color",
"category": "border-color",
"value": "#cacdd8",
"comment": "Weak border color",
"originalValue": "{!palette-gray-30}",
"name": "color-border-weak"
},
"color-border-neutral": {
"type": "color",
"category": "border-color",
"value": "#0263e0",
"comment": "Neutral border color",
"originalValue": "{!palette-blue-60}",
"name": "color-border-neutral"
},
"color-border-error": {
"type": "color",
"category": "border-color",
"value": "#d61f1f",
"comment": "Error border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-neutral-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-row-striped",
"color-background-primary-weakest",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-red-60}",
"name": "color-border-error"
},
"color-border-error-weakest": {
"type": "color",
"category": "border-color",
"value": "#feecec",
"comment": "Weakest error border color",
"originalValue": "{!palette-red-10}",
"name": "color-border-error-weakest"
},
"color-border-error-strongest": {
"type": "color",
"category": "border-color",
"value": "#310c0c",
"comment": "Strongest error border color",
"originalValue": "{!palette-red-100}",
"name": "color-border-error-strongest"
},
"color-border-error-strong": {
"type": "color",
"category": "border-color",
"value": "#750c0c",
"comment": "Strong error border color",
"originalValue": "{!palette-red-80}",
"name": "color-border-error-strong"
},
"color-border-error-weak": {
"type": "color",
"category": "border-color",
"value": "#f58a8a",
"comment": "Weak error border color",
"originalValue": "{!palette-red-40}",
"name": "color-border-error-weak"
},
"color-border-neutral-weak": {
"type": "color",
"category": "border-color",
"value": "#66b3ff",
"comment": "Weak neutral border color",
"originalValue": "{!palette-blue-40}",
"name": "color-border-neutral-weak"
},
"color-border": {
"type": "color",
"category": "border-color",
"value": "#8891aa",
"comment": "Default border color",
"uicontrol_contrast_pairing": [
"color-background-body"
],
"originalValue": "{!palette-gray-50}",
"name": "color-border"
},
"color-border-weakest": {
"type": "color",
"category": "border-color",
"value": "#ffffff",
"comment": "Weakest border color",
"originalValue": "{!palette-gray-0}",
"name": "color-border-weakest"
},
"color-border-inverse-stronger": {
"type": "color",
"category": "border-color",
"value": "#f4f4f6",
"comment": "Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.",
"uicontrol_contrast_pairing": [
"color-background-body-inverse"
],
"originalValue": "{!palette-gray-10}",
"name": "color-border-inverse-stronger"
},
"color-border-inverse-weaker": {
"type": "color",
"category": "border-color",
"value": "#394762",
"comment": "Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.",
"originalValue": "{!palette-gray-80}",
"name": "color-border-inverse-weaker"
},
"color-border-success-weak": {
"type": "color",
"category": "border-color",
"value": "#36d576",
"comment": "Weak success border color",
"originalValue": "{!palette-green-50}",
"name": "color-border-success-weak"
},
"color-border-primary-strong": {
"type": "color",
"category": "border-color",
"value": "#001489",
"comment": "Strong primary border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-new",
"color-background-row-striped",
"color-background-primary-weak",
"color-background-primary-weaker",
"color-background-primary-weakest",
"color-background-destructive-weak",
"color-background-destructive-weaker",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-blue-80}",
"name": "color-border-primary-strong"
},
"color-border-inverse": {
"type": "color",
"category": "border-color",
"value": "#8891aa",
"comment": "Border on inverse backgrounds. Must be used on color-background-body-inverse.",
"uicontrol_contrast_pairing": [
"color-background-body-inverse"
],
"originalValue": "{!palette-gray-50}",
"name": "color-border-inverse"
},
"color-border-destructive-strong": {
"type": "color",
"category": "border-color",
"value": "#750c0c",
"comment": "Destructive focus border color",
"uicontrol_contrast_pairing": [
"color-background",
"color-background-body",
"color-background-subaccount",
"color-background-trial",
"color-background-neutral-weakest",
"color-background-success-weakest",
"color-background-warning-weakest",
"color-background-error-weakest",
"color-background-new",
"color-background-row-striped",
"color-background-primary-weak",
"color-background-primary-weaker",
"color-background-primary-weakest",
"color-background-destructive-weak",
"color-background-destructive-weaker",
"color-background-destructive-weakest"
],
"originalValue": "{!palette-red-80}",
"name": "color-border-destructive-strong"
},
"color-border-primary-weak": {
"type": "color",
"category": "border-color",
"value": "#99cdff",
"comment": "Weak primary border color",
"originalValue": "{!palette-blue-30}",
"name": "color-border-primary-weak"
},
"color-border-inverse-weakest": {
"type": "color",
"category": "border-color",
"value": "#1f304c",
"comment": "Weakest border on inverse backgrounds. Must be used on color-backgrou